icons: Change mute icon from bell to speaker.

This icon is more standard, and lets us use a speaker icon for other
applications.

Fixes #21751

docs/THIRDPARTY

@@ -118,6 +118,12 @@ Files: tools/check-thirdparty
 Copyright: 2020 Kandra Labs, Inc.
 License: GPL-2.0+
 
+Files: static/shared/icons/mute.svg
+Source: https://fonts.google.com/icons?selected=Material+Symbols+Rounded:volume_mute
+Copyright: Google, Inc.
+License: Apache-2.0
+Comment: Material volume icon (rounded) with custom cross symbol
+
 License: Apache-2.0
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.

static/styles/popovers.css

@@ -101,6 +101,7 @@ ul {
         width: 14px;
         text-align: center;
         margin-right: 3px;
+        vertical-align: middle;
     }
 
     &.topics_popover {

static/styles/recent_topics.css

@@ -173,6 +173,11 @@
             flex-flow: row nowrap;
         }
 
+        .recent_topic_actions .recent_topics_focusable {
+            display: flex;
+            align-items: center;
+        }
+
         .recent_topics_participants {
             display: inline-flex; /* Causes LI items to display in row. */
             list-style-type: none;

static/styles/settings.css

@@ -412,6 +412,7 @@ input[type="checkbox"] {
 #stream-specific-notify-table .unmute_stream {
     position: relative;
     left: 3px;
+    top: 2px;
 
     &:hover {
         color: hsl(0, 0%, 20%);

static/styles/zulip.css

@@ -1200,7 +1200,9 @@ td.pointer {
 }
 
 .recipient_bar_controls {
+    display: flex;
     flex-grow: 1;
+    align-items: center;
 }
 
 .recipient_row_date {
@@ -1217,8 +1219,8 @@ td.pointer {
 }
 
 .recipient_bar_icon {
-    padding-left: 2px;
+    padding-left: 4px;
-    padding-right: 2px;
+    padding-right: 4px;
 }
 
 #mark_as_read_turned_off_banner {

static/templates/recent_topic_row.hbs

@@ -21,9 +21,9 @@
                 <div class="recent_topic_actions">
                     <div class="recent_topics_focusable hidden-for-spectators">
                         {{#if topic_muted}}
-                        <i class="fa fa-bell-slash on_hover_topic_unmute recipient_bar_icon tippy-zulip-tooltip" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" data-tippy-content="{{t 'Unmute topic' }}" role="button" tabindex="0" aria-label="{{t 'Unmute topic' }}"></i>
+                        <i class="zulip-icon zulip-icon-mute on_hover_topic_unmute recipient_bar_icon tippy-zulip-tooltip" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" data-tippy-content="{{t 'Unmute topic' }}" role="button" tabindex="0" aria-label="{{t 'Unmute topic' }}"></i>
                         {{else}}
-                        <i class="fa fa-bell-slash on_hover_topic_mute recipient_bar_icon tippy-zulip-tooltip" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" data-tippy-content="{{t 'Mute topic' }}" role="button" tabindex="0" aria-label="{{t 'Mute topic' }}"></i>
+                        <i class="zulip-icon zulip-icon-mute on_hover_topic_mute recipient_bar_icon tippy-zulip-tooltip" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" data-tippy-content="{{t 'Mute topic' }}" role="button" tabindex="0" aria-label="{{t 'Mute topic' }}"></i>
                         {{/if}}
                     </div>
                 </div>

static/templates/recipient_row.hbs

@@ -64,9 +64,9 @@
                 {{/if}}
 
                 {{#if topic_muted}}
-                    <i class="fa fa-bell-slash on_hover_topic_unmute recipient_bar_icon" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" data-tippy-content="{{t 'Unmute topic' }} (M)" role="button" tabindex="0" aria-label="{{t 'Unmute topic' }}"></i>
+                    <i class="zulip-icon zulip-icon-mute on_hover_topic_unmute recipient_bar_icon" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" data-tippy-content="{{t 'Unmute topic' }} (M)" role="button" tabindex="0" aria-label="{{t 'Unmute topic' }}"></i>
                 {{else}}
-                    <i class="fa fa-bell-slash on_hover_topic_mute recipient_bar_icon hidden-for-spectators" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" data-tippy-content="{{t 'Mute topic' }} (M)" role="button" tabindex="0" aria-label="{{t 'Mute topic' }}"></i>
+                    <i class="zulip-icon zulip-icon-mute on_hover_topic_mute recipient_bar_icon hidden-for-spectators" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" data-tippy-content="{{t 'Mute topic' }} (M)" role="button" tabindex="0" aria-label="{{t 'Mute topic' }}"></i>
                 {{/if}}
             </span>
             <span class="recipient_row_date {{#if group_date_divider_html}}{{else}}hide-date{{/if}}">{{{date}}}</span>

static/templates/settings/stream_specific_notification_row.hbs

@@ -6,8 +6,8 @@
               is_web_public=stream.is_web_public }}
         </span>
         {{stream.stream_name}}
-        <div class="fa fa-bell-slash-o unmute_stream" data-tippy-content="{{t 'Unmute' }}"
+        <i class="zulip-icon zulip-icon-mute unmute_stream" data-tippy-content="{{t 'Unmute' }}"
-          {{#unless muted}}style="display: none;"{{/unless}}></div>
+          {{#unless muted}}style="display: none;"{{/unless}}></i>
     </td>
     {{#each stream_specific_notification_settings}}
         {{> notification_settings_checkboxes

static/templates/settings_overlay.hbs

@@ -45,7 +45,7 @@
                     </li>
                     {{/if}}
                     <li tabindex="0" data-section="muted-topics">
-                        <i class="icon fa fa-bell-slash" aria-hidden="true"></i>
+                        <i class="icon zulip-icon zulip-icon-mute" aria-hidden="true"></i>
                         <div class="text">{{t "Muted topics" }}</div>
                     </li>
                     <li tabindex="0" data-section="muted-users">

static/templates/stream_sidebar_actions.hbs

@@ -39,10 +39,10 @@
     <li class="hidden-for-spectators">
         <a tabindex="0" class="toggle_stream_muted">
             {{#if stream.is_muted}}
-            <i class="fa fa-bell" aria-hidden="true"></i>
+            <i class="zulip-icon zulip-icon-mute" aria-hidden="true"></i>
             {{t "Unmute stream"}}
             {{else}}
-            <i class="fa fa-bell-slash" aria-hidden="true"></i>
+            <i class="zulip-icon zulip-icon-mute" aria-hidden="true"></i>
             {{t "Mute stream"}}
             {{/if}}
         </a>

static/templates/topic_sidebar_actions.hbs

@@ -11,14 +11,14 @@
     {{#unless topic_muted}}
     <li class="hidden-for-spectators">
         <a tabindex="0" class="sidebar-popover-mute-topic" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
-            <i class="fa fa-bell-slash" aria-hidden="true"></i>
+            <i class="zulip-icon zulip-icon-mute" aria-hidden="true"></i>
             {{t "Mute topic"}}
         </a>
     </li>
     {{else}}
     <li class="hidden-for-spectators">
         <a tabindex="0" class="sidebar-popover-unmute-topic" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
-            <i class="fa fa-bell" aria-hidden="true"></i>
+            <i class="zulip-icon zulip-icon-mute" aria-hidden="true"></i>
             {{t "Unmute topic"}}
         </a>
     </li>

templates/zerver/help/mute-a-topic.md

@@ -28,7 +28,7 @@ They also do not contribute to stream unread counts.
 1. Find a message belonging to the topic that you
    wish to mute.
 
-1. Click on the <i class="fa fa-bell-slash"></i> to mute the topic.
+2. Click on the <i class="zulip-icon zulip-icon-mute"></i> to mute the topic.
 
 {end_tabs}