navbar: Add Ionic search icon and use for navbar search.

This adds a new search icon which we prefer over the one made
available from bootstrap, and replaces search icons in navbar
search with the Ionic icon.

docs/THIRDPARTY

@@ -114,6 +114,10 @@ Source: https://github.com/ionic-team/ionicons/blob/v5.5.2/src/svg/earth.svg, mo
 Copyright: 2015-present Ionic (http://ionic.io/)
 License: Expat
 
+Files: web/images/icons/search.svg
+Copyright: 2015-present Ionic (http://ionic.io/)
+License: Expat
+
 Files: tools/check-thirdparty
 Copyright: 2020 Kandra Labs, Inc.
 License: GPL-2.0+

web/images/icons/search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Search</title><path d="M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z"/></svg>

web/styles/search.css

@@ -37,7 +37,7 @@
         width: max-content;
         min-width: 100%;
 
-        .fa-search {
+        .zulip-icon-search {
             padding: 0;
             font-size: 20px;
             position: absolute;
@@ -50,7 +50,7 @@
             }
         }
 
-        .fa-search:not(.deactivated) {
+        .zulip-icon-search:not(.deactivated) {
             cursor: pointer;
         }
     }

web/styles/zulip.css

@@ -2652,7 +2652,7 @@ select.invite-as {
         width: calc(100% - 84px);
     }
 
-    .search_closed .fa-search {
+    .search_closed .zulip-icon-search {
         right: 115px;
     }
 }
@@ -2725,7 +2725,7 @@ select.invite-as {
         width: calc(100% - 108px);
     }
 
-    .search_closed .fa-search {
+    .search_closed .zulip-icon-search {
         right: 115px;
     }
 }
@@ -2750,8 +2750,10 @@ select.invite-as {
         }
     }
 
-    .search_closed .fa-search {
-        top: 5px;
+    /* Usually the styling is applied directly to the icon, but here
+    the icon is `position: static`, so we can't. */
+    .search_closed {
+        top: 4px;
     }
 
     #streamlist-toggle,

web/templates/message_view_header.hbs

@@ -18,4 +18,4 @@
     {{> navbar_icon_and_title }}
 </span>
 {{/if}}
-<span class="search_icon search_closed" role="button"><i class="fa fa-search" aria-hidden="true"></i></span>
+<span class="search_icon search_closed" role="button"><i class="zulip-icon zulip-icon-search" aria-hidden="true"></i></span>

web/templates/navbar.hbs

@@ -19,7 +19,7 @@
                     <div id="searchbox">
                         <form id="searchbox_form" class="navbar-search">
                             <div id="search_arrows" class="pill-container input-append">
-                                <span class="search_icon search_open" ><i class="fa fa-search" aria-hidden="true"></i></span>
+                                <span class="search_icon search_open" ><i class="zulip-icon zulip-icon-search"></i></span>
                                 <div contenteditable="true" class="input search-query input-block-level" id="search_query" type="text" placeholder="{{t 'Search' }}"
                                   autocomplete="off" aria-label="{{t 'Search' }}" title="{{t 'Search' }} (/)">
                                 </div>
@@ -33,7 +33,7 @@
                     <div id="searchbox_legacy">
                         <form id="searchbox_form" class="navbar-search">
                             <div id="search_arrows" class="input-append">
-                                <span class="search_icon search_open" ><i class="fa fa-search" aria-hidden="true"></i></span>
+                                <span class="search_icon search_open" ><i class="zulip-icon zulip-icon-search"></i></span>
                                 <input class="search-query input-block-level home-page-input" id="search_query" type="text" placeholder="{{t 'Search' }}"
                                   autocomplete="off" aria-label="{{t 'Search' }}" title="{{t 'Search' }} (/)"/>
                                 <button class="btn search_close_button" type="button" id="search_exit" aria-label="{{t 'Exit search' }}"><i class="fa fa-remove" aria-hidden="true"></i></button>