Replace `<i>` in vue components with `<icon>`

4 files changed, 32 insertions, 24 deletions

diff --git a/app/assets/javascripts/boards/components/issue_card_inner.vue b/app/assets/javascripts/boards/components/issue_card_inner.vue
index 28956c2f3c5..aa98f35786e 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.vue
+++ b/app/assets/javascripts/boards/components/issue_card_inner.vue
@@ -1,5 +1,6 @@
 <script>
   import $ from 'jquery';
+  import Icon from '~/vue_shared/components/icon.vue';
   import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
   import eventHub from '../eventhub';
   import tooltip from '../../vue_shared/directives/tooltip';
@@ -8,6 +9,7 @@
   export default {
     components: {
       UserAvatarLink,
+      Icon,
     },
     directives: {
       tooltip,
@@ -140,11 +142,11 @@
   <div>
     <div class="board-card-header">
       <h4 class="board-card-title">
-        <i
+        <icon
           v-if="issue.confidential"
-          class="fa fa-eye-slash confidential-icon"
-          aria-hidden="true"
-        ></i>
+          name="eye-slash"
+          class="confidential-icon"
+        />
         <a
           :href="issue.path"
           :title="issue.title"
diff --git a/app/assets/javascripts/boards/components/modal/list.vue b/app/assets/javascripts/boards/components/modal/list.vue
index a58b5afe970..c93fd9f415c 100644
--- a/app/assets/javascripts/boards/components/modal/list.vue
+++ b/app/assets/javascripts/boards/components/modal/list.vue
@@ -1,4 +1,5 @@
 <script>
+  import Icon from '~/vue_shared/components/icon.vue';
   import bp from '../../../breakpoints';
   import ModalStore from '../../stores/modal_store';
   import IssueCardInner from '../issue_card_inner.vue';
@@ -6,6 +7,7 @@
   export default {
     components: {
       IssueCardInner,
+      Icon,
     },
     props: {
       issueLinkBase: {
@@ -147,13 +149,13 @@
             :issue="issue"
             :issue-link-base="issueLinkBase"
             :root-path="rootPath"/>
-          <span
+          <icon
             v-if="issue.selected"
             :aria-label="'Issue #' + issue.id + ' selected'"
+            name="mobile-issue-close"
             aria-checked="true"
-            class="issue-card-selected text-center">
-            <i class="fa fa-check"></i>
-          </span>
+            class="issue-card-selected text-center"
+          />
         </div>
       </div>
     </div>
diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.vue b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
index 4622fd28220..3baac08d411 100644
--- a/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
+++ b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
@@ -1,11 +1,13 @@
 <script>
 import { Link } from '@gitlab-org/gitlab-ui';
+import Icon from '~/vue_shared/components/icon.vue';
 import ModalStore from '../../stores/modal_store';
 import boardsStore from '../../stores/boards_store';
 
 export default {
   components: {
     'gl-link': Link,
+    Icon,
   },
   data() {
     return {
@@ -35,7 +37,9 @@ export default {
         class="dropdown-label-box">
       </span>
       {{ selected.title }}
-      <i class="fa fa-chevron-down"></i>
+      <icon
+        name="chevron-down"
+      />
     </button>
     <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up">
       <ul>
diff --git a/app/assets/javascripts/boards/components/project_select.vue b/app/assets/javascripts/boards/components/project_select.vue
index d4676914e02..4e8fe16160a 100644
--- a/app/assets/javascripts/boards/components/project_select.vue
+++ b/app/assets/javascripts/boards/components/project_select.vue
@@ -1,11 +1,15 @@
 <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,9 @@ export default {
         aria-expanded="false"
       >
         {{ selectedProjectName }}
-        <i
-          class="fa fa-chevron-down"
-          aria-hidden="true"
-        >
-        </i>
+        <icon
+          name="chevron-down"
+        />
       </button>
       <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width">
         <div class="dropdown-title">
@@ -92,12 +94,11 @@ export default {
             type="button"
             class="dropdown-title-button dropdown-menu-close"
           >
-            <i
-              aria-hidden="true"
+            <icon
+              name="merge-request-close-m"
               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 +107,11 @@ export default {
             type="search"
             placeholder="Search projects"
           />
-          <i
-            aria-hidden="true"
+          <icon
+            name="search"
+            class="dropdown-input-search"
             data-hidden="true"
-            class="fa fa-search dropdown-input-search"
-          >
-          </i>
+          />
         </div>
         <div class="dropdown-content"></div>
         <div class="dropdown-loading">