1 files changed, 16 insertions, 24 deletions

diff --git a/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue b/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue
index 5d7e9557aff..4f1b1c758b2 100644
--- a/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue
+++ b/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue
@@ -1,9 +1,9 @@
 <script>
 import '~/commons/bootstrap';
-import { GlTooltip, GlTooltipDirective } from '@gitlab/ui';
+import { GlIcon, GlTooltip, GlTooltipDirective } from '@gitlab/ui';
 import { sprintf } from '~/locale';
-import IssueMilestone from '../../components/issue/issue_milestone.vue';
-import IssueAssignees from '../../components/issue/issue_assignees.vue';
+import IssueMilestone from './issue_milestone.vue';
+import IssueAssignees from './issue_assignees.vue';
 import relatedIssuableMixin from '../../mixins/related_issuable_mixin';
 import CiIcon from '../ci_icon.vue';
 
@@ -13,6 +13,7 @@ export default {
     IssueMilestone,
     IssueAssignees,
     CiIcon,
+    GlIcon,
     GlTooltip,
   },
   directives: {
@@ -44,6 +45,9 @@ export default {
         visibility: 'hidden',
       };
     },
+    iconClasses() {
+      return `${this.iconClass} ic-${this.iconName}`;
+    },
   },
 };
 </script>
@@ -54,30 +58,29 @@ export default {
       'issuable-info-container': !canReorder,
       'card-body': canReorder,
     }"
-    class="item-body d-flex align-items-center p-2 p-lg-3 py-xl-2 px-xl-3"
+    class="item-body d-flex align-items-center py-2 px-3"
   >
     <div class="item-contents d-flex align-items-center flex-wrap flex-grow-1 flex-xl-nowrap">
       <!-- Title area: Status icon (XL) and title -->
-      <div class="item-title d-flex align-items-center mb-xl-0">
-        <span ref="iconElementXL">
-          <icon
+      <div class="item-title d-flex align-items-xl-center mb-xl-0">
+        <div ref="iconElementXL">
+          <gl-icon
             v-if="hasState"
             ref="iconElementXL"
-            :class="iconClass"
+            class="mr-2 d-block"
+            :class="iconClasses"
             :name="iconName"
-            :size="16"
             :title="stateTitle"
             :aria-label="state"
           />
-        </span>
+        </div>
         <gl-tooltip :target="() => $refs.iconElementXL">
           <span v-html="stateTitle"></span>
         </gl-tooltip>
-        <icon
+        <gl-icon
           v-if="confidential"
           v-gl-tooltip
           name="eye-slash"
-          :size="16"
           :title="__('Confidential')"
           class="confidential-icon append-right-4 align-self-baseline align-self-md-auto mt-xl-0"
           :aria-label="__('Confidential')"
@@ -97,17 +100,6 @@ export default {
           <div
             class="item-path-area item-path-id d-flex align-items-center mr-2 mt-2 mt-xl-0 ml-xl-2"
           >
-            <span ref="iconElement">
-              <icon
-                v-if="hasState"
-                :class="iconClass"
-                :name="iconName"
-                :title="stateTitle"
-                :aria-label="state"
-                data-html="true"
-                class="d-xl-none"
-              />
-            </span>
             <gl-tooltip :target="() => this.$refs.iconElement">
               <span v-html="stateTitle"></span>
             </gl-tooltip>
@@ -159,7 +151,7 @@ export default {
       v-gl-tooltip
       :disabled="removeDisabled"
       type="button"
-      class="btn btn-default btn-svg btn-item-remove js-issue-item-remove-button mr-xl-0 align-self-xl-center"
+      class="btn btn-default btn-svg btn-item-remove js-issue-item-remove-button"
       data-qa-selector="remove_related_issue_button"
       :title="__('Remove')"
       :aria-label="__('Remove')"