diff --git a/web/src/message_list_tooltips.ts b/web/src/message_list_tooltips.ts
index a91f1266f2..562ff1fb62 100644
--- a/web/src/message_list_tooltips.ts
+++ b/web/src/message_list_tooltips.ts
@@ -315,7 +315,10 @@ export function initialize(): void {
     });
 
     message_list_tooltip(
-        "#message_feed_container .recipient_bar_icon:not(.recipient-row-topic-menu):not(.toggle_resolve_topic_spinner)",
+        [
+            "#message_feed_container .recipient_bar_icon:not(.recipient-row-topic-menu):not(.toggle_resolve_topic_spinner)",
+            "#message_feed_container .recipient-bar-control-icon:not(.recipient-row-topic-menu):not(.toggle_resolve_topic_spinner)",
+        ].join(","),
         {
             delay: LONG_HOVER_DELAY,
             onHidden(instance) {
diff --git a/web/styles/message_header.css b/web/styles/message_header.css
index 1c086997b5..cffc723e6f 100644
--- a/web/styles/message_header.css
+++ b/web/styles/message_header.css
@@ -283,7 +283,6 @@
     }
 }
 
-.on_hover_topic_edit,
 .on_hover_topic_unresolve,
 .on_hover_topic_resolve {
     opacity: 0.2;
diff --git a/web/templates/recipient_row.hbs b/web/templates/recipient_row.hbs
index eb5ac42579..0c94255cfe 100644
--- a/web/templates/recipient_row.hbs
+++ b/web/templates/recipient_row.hbs
@@ -47,7 +47,7 @@
 
             {{! edit topic pencil icon }}
             {{#if is_topic_editable}}
-                <i class="fa fa-pencil on_hover_topic_edit recipient-bar-control recipient_bar_icon hidden-for-spectators" data-tippy-content="{{t 'Edit topic'}}" role="button" tabindex="0" aria-label="{{t 'Edit topic' }}"></i>
+                {{> components/icon_button icon="edit" intent="neutral" custom_classes="on_hover_topic_edit recipient-bar-control recipient-bar-control-icon hidden-for-spectators" data-tippy-content=(t "Edit topic") aria-label=(t "Edit topic") }}
             {{/if}}
 
             {{#if (and user_can_resolve_topic (not is_empty_string_topic))}}