compose: Add DM icon to the recipient dropdown.

This commit adds the new users icon and uses it in the
recipient dropdown, both in the selection options and
the selected option displayed on the button.

web/src/compose_actions.js

@@ -96,7 +96,10 @@ export function show_compose_box(msg_type, opts) {
         // button. It would be nice if the dropdown supported a way to attach
         // the "DM" button display string so we wouldn't have to manually change
         // it here.
-        $("#compose_select_recipient_name").text($t({defaultMessage: "DM"}));
+        const direct_message_label = $t({defaultMessage: "DM"});
+        $("#compose_select_recipient_name").html(
+            `<i class="zulip-icon zulip-icon-users stream-privacy-type-icon"></i> ${direct_message_label}`,
+        );
     }
     compose_banner.clear_errors();
     compose_banner.clear_warnings();

web/src/compose_recipient.js

@@ -202,6 +202,7 @@ function get_options_for_recipient_widget() {
     const direct_messages_option = {
         name: $t({defaultMessage: "Direct message"}),
         value: DIRECT_MESSAGE,
+        is_direct_message: true,
     };
     if (
         page_params.realm_private_message_policy ===

web/styles/app_components.css

@@ -829,13 +829,15 @@ div.overlay {
     position: relative;
     top: 0.06rem;
     padding-right: 1px;
+    width: 12px;
 
     &.zulip-icon-globe,
     &.zulip-icon-hashtag {
         font-size: 0.75em;
     }
 
-    &.zulip-icon-lock {
+    &.zulip-icon-lock,
+    &.zulip-icon-users {
         font-size: 0.8em;
     }
 }

web/templates/settings/dropdown_list.hbs

@@ -3,6 +3,8 @@
     <a role="menuitem" tabindex="0">
         {{#if stream}}
             {{> ../inline_decorated_stream_name stream=stream show_colored_icon=true}}
+        {{else if is_direct_message}}
+            <i class="zulip-icon zulip-icon-users stream-privacy-type-icon"></i> {{name}}
         {{else}}
             {{name}}
         {{/if}}