Merge branch 'mw-replace-fa-search-icons' into 'master'

Replace fa-search with GitLab SVG

See merge request gitlab-org/gitlab!43879

app/assets/javascripts/ide/components/file_templates/dropdown.vue

 <script>
 import $ from 'jquery';
 import { mapActions, mapState } from 'vuex';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlIcon, GlLoadingIcon } from '@gitlab/ui';
 import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
 
 export default {
   components: {
     DropdownButton,
+    GlIcon,
     GlLoadingIcon,
   },
   props: {
@@ -85,7 +86,7 @@ export default {
           type="search"
           class="dropdown-input-field qa-dropdown-filter-input"
         />
-        <i aria-hidden="true" class="fa fa-search dropdown-input-search"></i>
+        <gl-icon name="search" class="dropdown-input-search" aria-hidden="true" />
       </div>
       <div class="dropdown-content">
         <gl-loading-icon v-if="showLoading" size="lg" />

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

 <script>
+import { GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 
 export default {
+  components: {
+    GlIcon,
+  },
   props: {
     placeholderText: {
       type: String,
@@ -41,5 +45,6 @@ export default {
       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/javascripts/vue_shared/components/file_finder/index.vue

@@ -230,13 +230,12 @@ export default {
           @keydown="onKeydown($event)"
           @keyup="onKeyup($event)"
         />
-        <i
-          :class="{
-            hidden: showClearInputButton,
-          }"
+        <gl-icon
+          name="search"
+          class="dropdown-input-search"
+          :class="{ hidden: showClearInputButton }"
           aria-hidden="true"
-          class="fa fa-search dropdown-input-search"
-        ></i>
+        />
         <gl-icon
           name="close"
           class="dropdown-input-clear"

changelogs/unreleased/mw-replace-fa-search-icons.yml

+---
+title: Replace fa-search fontawesome icons with GitLab SVG in Vue components
+merge_request: 43879
+author:
+type: changed

ee/app/assets/javascripts/boards/components/boards_list_selector/list_filter.vue

@@ -31,7 +31,7 @@ export default {
       class="dropdown-input-field"
       @keyup="handleInputChange"
     />
-    <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" />
     <gl-icon
       name="close"
       class="dropdown-input-clear"

ee/spec/frontend/boards/components/board_list_selector/list_filter_spec.js

@@ -74,7 +74,7 @@ describe('ListFilter', () => {
     });
 
     it('renders search input icons', () => {
-      expect(wrapper.find('i.fa.fa-search.dropdown-input-search').exists()).toBe(true);
+      expect(wrapper.find('.dropdown-input-search').exists()).toBe(true);
       expect(wrapper.find('.dropdown-input-clear').exists()).toBe(true);
     });
   });