message_header: Update legacy edit topic button to use icon button.

This commit is part of a series of commits aimed at updating the message
header buttons to use the new icon button component which has consistent
styling across the Web UI and offers a larger clickable area for the
users.

This commit also replaces the legacy font awesome pencil icon to the
newer "edit" icon from the Zulip font icons.

Fixes part of #34477.

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) {

web/styles/message_header.css

@@ -283,7 +283,6 @@
     }
 }
 
-.on_hover_topic_edit,
 .on_hover_topic_unresolve,
 .on_hover_topic_resolve {
     opacity: 0.2;

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))}}