diff --git a/web/styles/message_row.css b/web/styles/message_row.css
index 9a642ca4a7..f225c6c91f 100644
--- a/web/styles/message_row.css
+++ b/web/styles/message_row.css
@@ -430,7 +430,7 @@
         text-align: center;
         color: var(--color-message-action-visible);
 
-        & i {
+        & .message-controls-icon {
             vertical-align: middle;
             /* TODO: Math for these values, possibly with variables.
                In short, the icon body is 16px square; the current
diff --git a/web/templates/message_controls.hbs b/web/templates/message_controls.hbs
index 7b8c778864..33865d9478 100644
--- a/web/templates/message_controls.hbs
+++ b/web/templates/message_controls.hbs
@@ -6,30 +6,30 @@
     {{#unless msg/sent_by_me}}
     <div class="reaction_button message_control_button" data-tooltip-template-id="add-emoji-tooltip-template">
         <div class="emoji-message-control-button-container">
-            <i class="zulip-icon zulip-icon-smile" aria-label="{{t 'Add emoji reaction' }} (:)" role="button" aria-haspopup="true" tabindex="0"></i>
+            <i class="message-controls-icon zulip-icon zulip-icon-smile" aria-label="{{t 'Add emoji reaction' }} (:)" role="button" aria-haspopup="true" tabindex="0"></i>
         </div>
     </div>
     {{/unless}}
 
     {{#unless msg/locally_echoed}}
     <div class="actions_hover message_control_button" data-tooltip-template-id="message-actions-tooltip-template" >
-        <i class="message-actions-menu-button zulip-icon zulip-icon-more-vertical-spread" role="button" aria-haspopup="true" tabindex="0" aria-label="{{t 'Message actions' }}"></i>
+        <i class="message-controls-icon message-actions-menu-button zulip-icon zulip-icon-more-vertical-spread" role="button" aria-haspopup="true" tabindex="0" aria-label="{{t 'Message actions' }}"></i>
     </div>
     {{/unless}}
 
     <div class="message_failed {{#unless msg.failed_request}}hide{{/unless}}">
         <div class="message_control_button failed_message_action" data-tippy-content="{{t 'Retry' }}">
-            <i class="fa fa-refresh refresh-failed-message" aria-label="{{t 'Retry' }}" role="button" tabindex="0"></i>
+            <i class="message-controls-icon fa fa-refresh refresh-failed-message" aria-label="{{t 'Retry' }}" role="button" tabindex="0"></i>
         </div>
 
         <div class="message_control_button failed_message_action" data-tooltip-template-id="dismiss-failed-send-button-tooltip-template">
-            <i class="fa fa-times-circle remove-failed-message" aria-label="{{t 'Dismiss' }}" role="button" tabindex="0"></i>
+            <i class="message-controls-icon fa fa-times-circle remove-failed-message" aria-label="{{t 'Dismiss' }}" role="button" tabindex="0"></i>
         </div>
     </div>
 
     {{#unless msg/locally_echoed}}
     <div class="star_container message_control_button {{#if msg/starred}}{{else}}empty-star{{/if}}" data-tooltip-template-id="{{#if msg/starred}}unstar{{else}}star{{/if}}-message-tooltip-template">
-        <i role="button" tabindex="0" class="star zulip-icon {{#if msg/starred}}zulip-icon-star-filled{{else}}zulip-icon-star{{/if}}"></i>
+        <i role="button" tabindex="0" class="message-controls-icon star zulip-icon {{#if msg/starred}}zulip-icon-star-filled{{else}}zulip-icon-star{{/if}}"></i>
     </div>
     {{/unless}}