zulip-icon: Add zulip-icon as classPrefix for icon.

This avoids general class names like `bot`.

static/assets/icons/zulip-icons.font.js

@@ -5,7 +5,7 @@
 module.exports = {
     files: ["./*.svg"],
     fontName: "zulip-icons",
-    classPrefix: "",
+    classPrefix: "zulip-icon-",
     baseSelector: ".zulip-icon",
     cssTemplate: "./template.hbs",
     ligature: false,

static/styles/components.css

@@ -106,7 +106,7 @@ a.no-underline:hover {
     }
 }
 
-i.zulip-icon.bot {
+i.zulip-icon.zulip-icon-bot {
     color: hsl(180, 5%, 74%);
     vertical-align: top;
     padding: 0 2px;

static/styles/zulip.css

@@ -1251,7 +1251,7 @@ td.pointer {
     vertical-align: top;
     position: relative;
 
-    i.zulip-icon.bot {
+    i.zulip-icon.zulip-icon-bot {
         font-size: 12px;
     }
 }
@@ -1277,7 +1277,7 @@ td.pointer {
     }
 }
 
-.popover_info i.zulip-icon.bot {
+.popover_info i.zulip-icon.zulip-icon-bot {
     margin-top: 3px;
 }
 

static/templates/me_message.hbs

@@ -12,7 +12,7 @@
             </span>
         </span>
         {{#if sender_is_bot}}
-        <i class="zulip-icon bot" aria-label="{{t 'Bot' }}"></i>
+        <i class="zulip-icon zulip-icon-bot" aria-label="{{t 'Bot' }}"></i>
         {{/if}}
 
         <span class="rendered_markdown status-message auto-select">{{rendered_markdown status_message}}</span>

static/templates/message_body.hbs

@@ -6,7 +6,7 @@
             {{> message_avatar}}
             <span class="sender_name auto-select" role="button" tabindex="0">{{msg/sender_full_name}}</span>
             {{#if sender_is_bot}}
-            <i class="zulip-icon bot" aria-label="{{t 'Bot' }}"></i>
+            <i class="zulip-icon zulip-icon-bot" aria-label="{{t 'Bot' }}"></i>
             {{/if}}
         </span>
         {{/if}}

static/templates/message_controls.hbs

@@ -11,7 +11,7 @@
 
     {{#unless msg/locally_echoed}}
     <div class="info actions_hover message_control_button">
-        <i class="zulip-icon ellipsis-v-solid" title="{{#tr}}Message actions{{/tr}} (i)" title="{{#tr}}Message actions{{/tr}}" role="button" aria-haspopup="true" tabindex="0" aria-label="{{#tr}}Message actions{{/tr}}"></i>
+        <i class="zulip-icon zulip-icon-ellipsis-v-solid" title="{{#tr}}Message actions{{/tr}} (i)" title="{{#tr}}Message actions{{/tr}}" role="button" aria-haspopup="true" tabindex="0" aria-label="{{#tr}}Message actions{{/tr}}"></i>
     </div>
     {{/unless}}
 

static/templates/stream_sidebar_row.hbs

@@ -12,6 +12,6 @@
 
             <span class="unread_count"></span>
         </div>
-        <span class="stream-sidebar-menu-icon"><i class="zulip-icon ellipsis-v-solid" aria-hidden="true"></i></span>
+        <span class="stream-sidebar-menu-icon"><i class="zulip-icon zulip-icon-ellipsis-v-solid" aria-hidden="true"></i></span>
     </div>
 </li>

static/templates/topic_list_item.hbs

@@ -8,6 +8,6 @@
         </span>
     </span>
     <span class="topic-sidebar-menu-icon">
-        <i class="zulip-icon ellipsis-v-solid" aria-hidden="true"></i>
+        <i class="zulip-icon zulip-icon-ellipsis-v-solid" aria-hidden="true"></i>
     </span>
 </li>

static/templates/user_group_info_popover_content.hbs

@@ -11,7 +11,7 @@
     <li>
         {{#if is_active }}
             {{#if is_bot}}
-            <i class="zulip-icon bot" aria-hidden="true"></i>
+            <i class="zulip-icon zulip-icon-bot" aria-hidden="true"></i>
             {{else}}
             <span class="user_circle {{user_circle_class}}  popover_user_presence" title="{{user_last_seen_time_status}}"></span>
             {{/if}}

static/templates/user_info_popover_content.hbs

@@ -5,7 +5,7 @@
             <b>{{user_full_name}}</b>
             {{#if is_active }}
                 {{#if is_bot}}
-                <i class="zulip-icon bot" aria-hidden="true"></i>
+                <i class="zulip-icon zulip-icon-bot" aria-hidden="true"></i>
                 {{else}}
                 <span class="{{user_circle_class}} user_circle popover_user_presence" title="{{user_last_seen_time_status}}"></span>
                 {{/if}}

static/templates/user_presence_row.hbs

@@ -12,5 +12,5 @@
         </a>
         <span class="unread_count">{{#if num_unread}}{{num_unread}}{{/if}}</span>
     </div>
-    <span class="user-list-sidebar-menu-icon"><i class="zulip-icon ellipsis-v-solid" aria-hidden="true"></i></span>
+    <span class="user-list-sidebar-menu-icon"><i class="zulip-icon zulip-icon-ellipsis-v-solid" aria-hidden="true"></i></span>
 </li>

templates/zerver/app/left_sidebar.html

@@ -11,7 +11,7 @@
                     <span>{{ _('All messages') }}</span>
                     <span class="unread_count"></span>
                 </a>
-                <span class="arrow all-messages-sidebar-menu-icon"><i class="zulip-icon ellipsis-v-solid" aria-hidden="true"></i></span>
+                <span class="arrow all-messages-sidebar-menu-icon"><i class="zulip-icon zulip-icon-ellipsis-v-solid" aria-hidden="true"></i></span>
             </li>
             <li class="top_left_private_messages">
                 <div class="private_messages_header top_left_row" title="{{ _('Private messages') }} (P)">
@@ -46,7 +46,7 @@
                     <span>{{ _('Starred messages') }}</span>
                     <span class="unread_count"></span>
                 </a>
-                <span class="arrow starred-messages-sidebar-menu-icon"><i class="zulip-icon ellipsis-v-solid" aria-hidden="true"></i></span>
+                <span class="arrow starred-messages-sidebar-menu-icon"><i class="zulip-icon zulip-icon-ellipsis-v-solid" aria-hidden="true"></i></span>
             </li>
             <li class="top_left_recent_topics top_left_row" title="{{ _('Recent topics') }} (t)">
                 <a href="#recent_topics">

templates/zerver/archive/single_message.html

@@ -11,7 +11,7 @@
                   <span class="sender-status">
                       <span class="sender_name-in-status">{{ sender_full_name }}</span>
                       {% if sender_is_bot %}
-                      <i class="zulip-icon bot" aria-hidden="true"></i>
+                      <i class="zulip-icon zulip-icon-bot" aria-hidden="true"></i>
                       {% endif %}
                       <span class="status-message">
                           {{ status_message }}
@@ -20,7 +20,7 @@
               {% else %}
                   <span class="sender_name auto-select">{{ sender_full_name }}</span>
                   {% if sender_is_bot %}
-                  <i class="zulip-icon bot" aria-hidden="true"></i>
+                  <i class="zulip-icon zulip-icon-bot" aria-hidden="true"></i>
                   {% endif %}
               {% endif %}
           {% endif %}

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

@@ -24,7 +24,7 @@ whereas [archiving a stream](/help/archive-a-stream) does not.
 
 1. Hover over the topic in the **left sidebar**.
 
-1. Click the ellipsis (<i class="zulip-icon ellipsis-v-solid"></i>).
+1. Click the ellipsis (<i class="zulip-icon zulip-icon-ellipsis-v-solid"></i>).
 
 1. Click **Delete topic**.
 

templates/zerver/help/emoji-reactions.md

@@ -15,7 +15,7 @@ underneath the message.
 
     !!! warn ""
         For messages that you've sent, click the ellipsis
-        (<i class="zulip-icon ellipsis-v-solid"></i>) and then
+        (<i class="zulip-icon zulip-icon-ellipsis-v-solid"></i>) and then
         **Add emoji reaction**.
 
 1. Select an emoji. Type to search, use the arrow keys, or click on an emoji

templates/zerver/help/include/message-actions-menu.md

@@ -1,3 +1,3 @@
 1. Hover over a message to reveal three icons on the right.
 
-1. Click the ellipsis (<i class="zulip-icon ellipsis-v-solid"></i>).
+1. Click the ellipsis (<i class="zulip-icon zulip-icon-ellipsis-v-solid"></i>).

templates/zerver/help/include/stream-actions.md

@@ -1,3 +1,3 @@
 1. Hover over a stream in the left sidebar.
 
-1. Click on the ellipsis (<i class="zulip-icon ellipsis-v-solid"></i>).
+1. Click on the ellipsis (<i class="zulip-icon zulip-icon-ellipsis-v-solid"></i>).

templates/zerver/help/marking-messages-as-read.md

@@ -22,7 +22,7 @@ stream or topic as read**.
 
 1. Hover over a stream, topic, or All messages in the left sidebar.
 
-1. Click the ellipsis (<i class="zulip-icon ellipsis-v-solid"></i>) to the right.
+1. Click the ellipsis (<i class="zulip-icon zulip-icon-ellipsis-v-solid"></i>) to the right.
 
 1. Click **Mark all messages as read**.
 

templates/zerver/help/mention-a-user-or-group.md

@@ -23,7 +23,7 @@ messages and alert words.
 
 1. Hover over a user in the right sidebar.
 
-1. Click the ellipsis (<i class="zulip-icon ellipsis-v-solid"></i>) to the right.
+1. Click the ellipsis (<i class="zulip-icon zulip-icon-ellipsis-v-solid"></i>) to the right.
 
 1. Select **Reply mentioning user**.
 

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

@@ -15,8 +15,8 @@ Muted topics still appear in the left sidebar, though they are grayed out.
 1. On the left, click on the stream that contains the topic you want to mute or unmute.
 
 2. Hover over the topic to reveal a ellipsis
-   (<i class="zulip-icon ellipsis-v-solid"></i>) to its right.
+   (<i class="zulip-icon zulip-icon-ellipsis-v-solid"></i>) to its right.
-   Click on the ellipsis (<i class="zulip-icon ellipsis-v-solid"></i>).
+   Click on the ellipsis (<i class="zulip-icon zulip-icon-ellipsis-v-solid"></i>).
 
 4. Select **Mute the topic <topic name\>**.
 

templates/zerver/help/status-and-availability.md

@@ -17,7 +17,7 @@ teammates know when you were last active.
 
 1. Hover over your name in the right sidebar.
 
-1. Click the ellipsis (<i class="zulip-icon ellipsis-v-solid"></i>) to the right.
+1. Click the ellipsis (<i class="zulip-icon zulip-icon-ellipsis-v-solid"></i>) to the right.
 
 1. Click **Set a status message**.
 
@@ -63,7 +63,7 @@ unavailable).
 
 1. Hover over your name in the right sidebar.
 
-1. Click the ellipsis (<i class="zulip-icon ellipsis-v-solid"></i>) to the right.
+1. Click the ellipsis (<i class="zulip-icon zulip-icon-ellipsis-v-solid"></i>) to the right.
 
 1. Click **Set yourself as unavailable**.
 

templates/zerver/help/stream-notifications.md

@@ -9,7 +9,7 @@ stream basis.
 
 1. Hover over the stream in the left sidebar.
 
-2. Click the ellipsis (<i class="zulip-icon ellipsis-v-solid"></i>) to the
+2. Click the ellipsis (<i class="zulip-icon zulip-icon-ellipsis-v-solid"></i>) to the
    right of the stream.
 
 3. Click **Stream settings**.

templates/zerver/help/view-someones-profile.md

@@ -22,7 +22,7 @@ when they were last active, and any
 
 1. Hover over a user's name in the right sidebar.
 
-1. Click on the ellipsis (<i class="zulip-icon ellipsis-v-solid"></i>) to
+1. Click on the ellipsis (<i class="zulip-icon zulip-icon-ellipsis-v-solid"></i>) to
    the right of their name.
 
 1. Click **View full profile**.