Replace icons in ProjectSelect vue component

app/assets/javascripts/boards/components/project_select.vue

 <script>
 import $ from 'jquery';
 import _ from 'underscore';
+import Icon from '~/vue_shared/components/icon.vue';
 import eventHub from '../eventhub';
 import Api from '../../api';
 
 export default {
   name: 'BoardProjectSelect',
+  components: {
+    Icon,
+  },
   props: {
     groupId: {
       type: Number,
@@ -78,11 +82,10 @@ export default {
         aria-expanded="false"
       >
         {{ selectedProjectName }}
-        <i
-          class="fa fa-chevron-down"
+        <icon
+          name="angle-down"
           aria-hidden="true"
-        >
-        </i>
+        />
       </button>
       <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width">
         <div class="dropdown-title">
@@ -92,12 +95,12 @@ export default {
             type="button"
             class="dropdown-title-button dropdown-menu-close"
           >
-            <i
+            <icon
+              name="merge-request-close-m"
               aria-hidden="true"
               data-hidden="true"
-              class="fa fa-times dropdown-menu-close-icon"
-            >
-            </i>
+              class="dropdown-menu-close-icon"
+            />
           </button>
         </div>
         <div class="dropdown-input">
@@ -106,12 +109,12 @@ export default {
             type="search"
             placeholder="Search projects"
           />
-          <i
+          <icon
+            name="search"
+            class="search-icon"
             aria-hidden="true"
             data-hidden="true"
-            class="fa fa-search dropdown-input-search"
-          >
-          </i>
+          />
         </div>
         <div class="dropdown-content"></div>
         <div class="dropdown-loading">

app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue

@@ -52,7 +52,6 @@ export default {
     <icon
       v-if="!searchQuery"
       name="search"
-      size="12"
       class="search-icon"
       aria-hidden="true"
     />

app/assets/stylesheets/framework/dropdowns.scss

@@ -579,9 +579,10 @@
   padding: 0 10px;
 
   .fa,
-  .input-icon {
+  .input-icon,
+  .ic-search {
     position: absolute;
-    top: 10px;
+    top: $gl-padding-8;
     right: 20px;
     color: $dropdown-input-fa-color;
     font-size: 12px;

changelogs/unreleased/replace-i-to-icons-in-vue-components.yml

+---
+title: Replace i to icons in vue components
+merge_request: 20748
+author: George Tsiolis
+type: changed