Replace fa icons with svg icons

- Replaces font awesome icons in the boards modal
with the svg sprite

app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue

 <script>
 import { __, s__, sprintf } from '~/locale';
+import { GlIcon } from '@gitlab/ui';
 
 export default {
+  components: {
+    GlIcon,
+  },
   props: {
     abilityName: {
       type: String,
@@ -72,6 +76,10 @@ export default {
     data-toggle="dropdown"
   >
     <span class="dropdown-toggle-text"> {{ dropdownToggleText }} </span>
-    <i aria-hidden="true" class="fa fa-chevron-down" data-hidden="true"> </i>
+    <gl-icon
+      name="chevron-down"
+      class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-700"
+      :size="16"
+    />
   </button>
 </template>

app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue

 <script>
-export default {};
+import { GlIcon } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlIcon,
+  },
+};
 </script>
 
 <template>
@@ -10,13 +16,13 @@ export default {};
       class="dropdown-input-field"
       type="search"
     />
-    <i aria-hidden="true" class="fa fa-search dropdown-input-search" data-hidden="true"> </i>
-    <i
-      aria-hidden="true"
-      class="fa fa-times dropdown-input-clear js-dropdown-input-clear"
-      data-hidden="true"
-      role="button"
-    >
-    </i>
+    <gl-icon
+      name="search"
+      class="dropdown-input-search gl-absolute gl-top-3 gl-right-5 gl-text-gray-500 gl-pointer-events-none"
+    />
+    <gl-icon
+      name="close"
+      class="dropdown-input-clear js-dropdown-input-clear gl-absolute gl-top-3 gl-right-5 gl-text-gray-700"
+    />
   </div>
 </template>

app/assets/stylesheets/framework/dropdowns.scss

@@ -639,9 +639,12 @@
     display: none;
     cursor: pointer;
     pointer-events: all;
-    right: 22px;
-    top: 9px;
+    top: $gl-padding-8;
     font-size: 14px;
+
+    &:not(.gl-icon) {
+      right: 22px;
+    }
   }
 
   &.has-value {

ee/app/assets/javascripts/boards/components/assignee_select.vue

 <script>
-import '~/gl_dropdown';
-import { GlLoadingIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
+import '~/gl_dropdown';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import UsersSelect from '~/users_select';
 import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
 
@@ -9,6 +9,7 @@ export default {
   components: {
     UserAvatarImage,
     GlLoadingIcon,
+    GlIcon,
   },
   props: {
     anyUserText: {
@@ -133,7 +134,11 @@ export default {
           type="button"
         >
           <span class="dropdown-toggle-text"> {{ placeholderText }} </span>
-          <i aria-hidden="true" class="fa fa-chevron-down" data-hidden="true"> </i>
+          <gl-icon
+            name="chevron-down"
+            class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-700"
+            :size="16"
+          />
         </button>
         <div
           class="dropdown-menu dropdown-select dropdown-menu-paging
@@ -146,15 +151,14 @@ dropdown-menu-user dropdown-menu-selectable dropdown-menu-author"
               :placeholder="__('Search')"
               type="search"
             />
-            <i aria-hidden="true" class="fa fa-search dropdown-input-search" data-hidden="true">
-            </i>
-            <i
-              aria-hidden="true"
-              class="fa fa-times dropdown-input-clear js-dropdown-input-clear"
-              data-hidden="true"
-              role="button"
-            >
-            </i>
+            <gl-icon
+              name="search"
+              class="dropdown-input-search gl-absolute gl-top-3 gl-right-5 gl-text-gray-500 gl-pointer-events-none"
+            />
+            <gl-icon
+              name="close"
+              class="dropdown-input-clear js-dropdown-input-clear gl-absolute gl-top-3 gl-right-5 gl-text-gray-700"
+            />
           </div>
           <div class="dropdown-content"></div>
           <div class="dropdown-loading"><gl-loading-icon /></div>

ee/app/assets/javascripts/boards/components/milestone_select.vue

 <script>
-/* eslint-disable @gitlab/vue-require-i18n-strings */
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import MilestoneSelect from '~/milestone_select';
 
 const ANY_MILESTONE = 'Any milestone';
@@ -9,6 +8,7 @@ const NO_MILESTONE = 'No milestone';
 export default {
   components: {
     GlLoadingIcon,
+    GlIcon,
   },
   props: {
     board: {
@@ -78,7 +78,7 @@ export default {
 <template>
   <div class="block milestone">
     <div class="title append-bottom-10">
-      Milestone
+      {{ __('Milestone') }}
       <button v-if="canEdit" type="button" class="edit-link btn btn-blank float-right">
         {{ __('Edit') }}
       </button>
@@ -101,7 +101,12 @@ export default {
           data-toggle="dropdown"
           type="button"
         >
-          Milestone <i aria-hidden="true" data-hidden="true" class="fa fa-chevron-down"> </i>
+          {{ __('Milestone') }}
+          <gl-icon
+            name="chevron-down"
+            class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-700"
+            :size="16"
+          />
         </button>
         <div class="dropdown-menu dropdown-select dropdown-menu-selectable">
           <div class="dropdown-input">
@@ -111,15 +116,14 @@ export default {
               :placeholder="__('Search milestones')"
               autocomplete="off"
             />
-            <i aria-hidden="true" data-hidden="true" class="fa fa-search dropdown-input-search">
-            </i>
-            <i
-              role="button"
-              aria-hidden="true"
-              data-hidden="true"
-              class="fa fa-times dropdown-input-clear js-dropdown-input-clear"
-            >
-            </i>
+            <gl-icon
+              name="search"
+              class="dropdown-input-search gl-absolute gl-top-3 gl-right-5 gl-text-gray-500 gl-pointer-events-none"
+            />
+            <gl-icon
+              name="close"
+              class="dropdown-input-clear js-dropdown-input-clear gl-right-5 gl-absolute gl-top-3 gl-text-gray-700"
+            />
           </div>
           <div class="dropdown-content"></div>
           <div class="dropdown-loading"><gl-loading-icon /></div>

spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js

@@ -82,10 +82,9 @@ describe('DropdownButtonComponent', () => {
     });
 
     it('renders dropdown button icon', () => {
-      const dropdownIconEl = vm.$el.querySelector('i.fa');
+      const dropdownIconEl = vm.$el.querySelector('.dropdown-menu-toggle .gl-icon');
 
       expect(dropdownIconEl).not.toBeNull();
-      expect(dropdownIconEl.classList.contains('fa-chevron-down')).toBe(true);
     });
   });
 });

spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js

@@ -29,13 +29,11 @@ describe('DropdownSearchInputComponent', () => {
     });
 
     it('renders search icon element', () => {
-      expect(vm.$el.querySelector('.fa-search.dropdown-input-search')).not.toBeNull();
+      expect(vm.$el.querySelector('.dropdown-input-search')).not.toBeNull();
     });
 
     it('renders clear search icon element', () => {
-      expect(
-        vm.$el.querySelector('.fa-times.dropdown-input-clear.js-dropdown-input-clear'),
-      ).not.toBeNull();
+      expect(vm.$el.querySelector('.dropdown-input-clear.js-dropdown-input-clear')).not.toBeNull();
     });
   });
 });