Use icon svg instead of fontawesome

app/assets/javascripts/issuable/related_issues/components/issue_item.vue

@@ -33,19 +33,16 @@ export default {
         {{ title }}
       </a>
       <div class="block text-secondary">
-        <i
-          ref="stateIcon"
+        <icon
           v-if="hasState"
           v-tooltip
-          class="fa"
-          :class="{
-            'issue-token-state-icon-open fa-circle-o': isOpen,
-            'issue-token-state-icon-closed fa-minus': isClosed,
-          }"
+          :css-classes="iconClass"
+          :name="iconName"
+          :size="12"
           :title="stateTitle"
           :aria-label="state"
-        >
-        </i>{{ displayReference }}
+        />
+        {{ displayReference }}
       </div>
     </div>
     <button

app/assets/javascripts/issuable/related_issues/components/issue_token.vue

@@ -69,18 +69,15 @@ export default {
           'issue-token-reference': isCondensed,
           'issuable-info': !isCondensed,
         }">
-        <i
-          ref="stateIcon"
+        <icon
           v-if="hasState"
           v-tooltip
-          class="fa"
-          :class="{
-            'issue-token-state-icon-open fa-circle-o': isOpen,
-            'issue-token-state-icon-closed fa-minus': isClosed,
-          }"
+          :css-classes="iconClass"
+          :name="iconName"
+          :size="12"
           :title="stateTitle"
           :aria-label="state"
-        >
+        />
         </i>{{ displayReference }}
       </component>
     </component>

app/assets/javascripts/issuable/related_issues/mixins/related_issues_mixin.js

 import tooltip from '../../../vue_shared/directives/tooltip';
+import icon from '../../../vue_shared/components/icon.vue';
 import eventHub from '../event_hub';
 
 const mixins = {
@@ -42,6 +43,9 @@ const mixins = {
       default: false,
     },
   },
+  components: {
+    icon,
+  },
   directives: {
     tooltip,
   },
@@ -58,6 +62,12 @@ const mixins = {
     hasTitle() {
       return this.title.length > 0;
     },
+    iconName() {
+      return this.isOpen ? 'issue-open-m' : 'cut';
+    },
+    iconClass() {
+      return this.isOpen ? 'issue-token-state-icon-open' : 'issue-token-state-icon-closed';
+    },
     computedLinkElementType() {
       return this.path.length > 0 ? 'a' : 'span';
     },

app/assets/stylesheets/pages/issues.scss

@@ -374,18 +374,11 @@ ul.related-merge-requests > li {
   }
 }
 
-@mixin issue-token-state-icon {
-  margin-right: 0.35em;
-  font-size: 0.9em;
-}
-
 .issue-token-state-icon-open {
-  @include issue-token-state-icon;
   color: $green-600;
 }
 
 .issue-token-state-icon-closed {
-  @include issue-token-state-icon;
   color: $red-600;
 }