Replace fa-search with GitLab SVG search icon

- Replace in HAML and Vue files
- Update selectors in specs
- Remove icon definitions in fontawesome_custom.scss
- Add changelog

app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue

@@ -44,7 +44,6 @@ export default {
       type="search"
       autocomplete="off"
     />
-    <i class="fa fa-search dropdown-input-search" aria-hidden="true" data-hidden="true"> </i>
     <gl-icon name="search" class="dropdown-input-search" aria-hidden="true" data-hidden="true" />
   </div>
 </template>

app/assets/stylesheets/fontawesome_custom.scss

@@ -96,10 +96,6 @@
   content: '\f00c';
 }
 
-.fa-search::before {
-  content: '\f002';
-}
-
 .fa-warning::before,
 .fa-exclamation-triangle::before {
   content: '\f071';
@@ -221,14 +217,6 @@
   content: '\f04b';
 }
 
-.fa-search-plus::before {
-  content: '\f00e';
-}
-
-.fa-search-minus::before {
-  content: '\f010';
-}
-
 .fa-share::before {
   content: '\f064';
 }

app/assets/stylesheets/pages/search.scss

@@ -202,7 +202,7 @@ input[type='checkbox']:hover {
   .search-icon {
     position: absolute;
     left: 10px;
-    top: 10px;
+    top: 9px;
     color: $gray-darkest;
     pointer-events: none;
   }

app/helpers/dropdowns_helper.rb

@@ -103,7 +103,7 @@ module DropdownsHelper
   def dropdown_filter(placeholder, search_id: nil)
     content_tag :div, class: "dropdown-input" do
       filter_output = search_field_tag search_id, nil, class: "dropdown-input-field qa-dropdown-input-field", placeholder: placeholder, autocomplete: 'off'
-      filter_output << icon('search', class: "dropdown-input-search")
+      filter_output << sprite_icon('search', css_class: 'dropdown-input-search')
       filter_output << sprite_icon('close', size: 16, css_class: 'dropdown-input-clear js-dropdown-input-clear')
 
       filter_output.html_safe

app/views/admin/groups/index.html.haml

@@ -8,7 +8,7 @@
         - project_name = params[:name].present? ? params[:name] : nil
         .search-field-holder
           = search_field_tag :name, project_name, class: "form-control search-text-input js-search-input", autofocus: true, spellcheck: false, placeholder: 'Search by name', data: { qa_selector: 'group_search_field' }
-          = icon("search", class: "search-icon")
+          = sprite_icon('search', css_class: 'search-icon')
         = render "shared/groups/dropdown", options_hash: admin_groups_sort_options_hash
         = link_to new_admin_group_path, class: "btn btn-success" do
           = _('New group')

app/views/admin/users/index.html.haml

@@ -51,7 +51,7 @@
         = search_field_tag :search_query, params[:search_query], placeholder: s_('AdminUsers|Search by name, email or username'), class: 'form-control search-text-input js-search-input', spellcheck: false, data: { qa_selector: 'user_search_field' }
         - if @sort.present?
           = hidden_field_tag :sort, @sort
-        = icon("search", class: "search-icon")
+        = sprite_icon('search', css_class: 'search-icon')
         = button_tag s_('AdminUsers|Search users') if Rails.env.test?
       .dropdown.user-sort-dropdown
         = label_tag 'Sort by', nil, class: 'label-bold'

app/views/projects/network/show.html.haml

@@ -7,7 +7,7 @@
       = form_tag project_network_path(@project, @id), method: :get, class: 'form-inline network-form' do |f|
         = text_field_tag :extended_sha1, @options[:extended_sha1], placeholder: _("Git revision"), class: 'search-input form-control input-mx-250 search-sha'
         = button_tag class: 'btn btn-success' do
-          = icon('search')
+          = sprite_icon('search')
         .inline.prepend-left-20
           .form-check.light
             = check_box_tag :filter_ref, 1, @options[:filter_ref], class: 'form-check-input'

app/views/projects/project_members/_team.html.haml

@@ -11,7 +11,7 @@
         .position-relative
           = search_field_tag :search, params[:search], { placeholder: _('Find existing members by name'), class: 'form-control', spellcheck: false }
           %button.user-search-btn{ type: "submit", "aria-label" => _("Submit search") }
-            = icon("search")
+            = sprite_icon('search', css_class: 'gl-vertical-align-middle!')
         = label_tag :sort_by, _('Sort by'), class: 'col-form-label label-bold px-2'
         = render 'shared/members/sort_dropdown'
   %ul.content-list.members-list{ data: { qa_selector: 'members_list' } }

app/views/projects/starrers/index.html.haml

@@ -11,7 +11,7 @@
           .position-relative
             = search_field_tag :search, params[:search], { placeholder: _('Search'), class: 'form-control', spellcheck: false }
             %button.user-search-btn{ type: "submit", "aria-label" => _("Submit search") }
-              = icon("search")
+              = sprite_icon('search')
           .dropdown.inline.user-sort-dropdown
             = dropdown_toggle(starrers_sort_options_hash[@sort], { toggle: 'dropdown' })
             %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable

app/views/search/_form.html.haml

@@ -9,7 +9,7 @@
         = _("What are you searching for?")
       .position-relative
         = search_field_tag :search, params[:search], placeholder: _("Search for projects, issues, etc."), class: "form-control search-text-input js-search-input", id: "dashboard_search", autofocus: true, spellcheck: false
-        = icon("search", class: "search-icon")
+        = sprite_icon('search', css_class: 'search-icon')
         %button.search-clear.js-search-clear{ class: ("hidden" if !params[:search].present?), type: "button", tabindex: "-1" }
           = sprite_icon('clear')
           %span.sr-only

app/views/search/results/_empty.html.haml

 .search_box
   .search_glyph
   %h4
-    = icon('search')
+    = sprite_icon('search', size: 24, css_class: 'gl-vertical-align-text-bottom')
     = search_entries_empty_message(@scope, @search_term)

app/views/shared/labels/_nav.html.haml

@@ -16,7 +16,7 @@
         = search_field_tag :search, params[:search], { placeholder: _('Filter'), id: 'label-search', class: 'form-control search-text-input input-short', spellcheck: false, autofocus: true }
         %span.input-group-append
           %button.btn.gl-button.btn-default{ type: "submit", "aria-label" => _('Submit search') }
-            = icon("search")
+            = sprite_icon('search')
     = render 'shared/labels/sort_dropdown'
     - if labels_or_filters && can_admin_label && @project
       = link_to _('New label'), new_project_label_path(@project), class: "btn gl-button btn-success qa-label-create-new"

app/views/shared/projects/_search_form.html.haml

@@ -11,7 +11,7 @@
     autofocus: local_assigns[:autofocus]
 
   - if local_assigns[:icon]
-    = icon("search", class: "search-icon")
+    = sprite_icon('search', css_class: 'search-icon')
 
   - if params[:sort].present?
     = hidden_field_tag :sort, params[:sort]

changelogs/unreleased/224527-replace-fa-search-with-gitlab-svg-search-icon.yml

+---
+title: Replace fa-search with GitLab SVG search icon
+merge_request: 43110
+author:
+type: changed

spec/frontend/vue_shared/components/dropdown/dropdown_search_input_spec.js

@@ -29,7 +29,7 @@ describe('DropdownSearchInputComponent', () => {
     });
 
     it('renders search icon element', () => {
-      expect(wrapper.find('.fa-search.dropdown-input-search').exists()).toBe(true);
+      expect(wrapper.find('.dropdown-input-search[data-testid="search-icon"]').exists()).toBe(true);
     });
 
     it('displays custom placeholder text', () => {