Utilize GitLab UI icon component: badges to diffs

This replaces all the usages of ~/vue_shared/components/icon.vue with
the corresponding GitLab UI component for all components from badges to
diffs (alphabetically).

In a previous MR [0] we already replaced the internal implementation
with the GitLab UI component. This should allow us to migrate all usages
without any test failures relating to the differences in their
implementation.

The actual deletion of the file will be done in a follow-up in case we
have missed an instance or someone introduces a new one in the
meanwhile.

[0]: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/38778

app/assets/javascripts/badges/components/badge.vue

 <script>
-import { GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlLoadingIcon, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 
 export default {
   // name: 'Badge' is a false positive: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/25
   // eslint-disable-next-line @gitlab/require-i18n-strings
   name: 'Badge',
   components: {
-    Icon,
+    GlIcon,
     GlLoadingIcon,
   },
   directives: {
@@ -84,7 +83,7 @@ export default {
 
     <div v-show="hasError" class="btn-group">
       <div class="btn btn-default btn-sm disabled">
-        <icon :size="16" class="gl-ml-3 gl-mr-3" name="doc-image" aria-hidden="true" />
+        <gl-icon :size="16" class="gl-ml-3 gl-mr-3" name="doc-image" aria-hidden="true" />
       </div>
       <div class="btn btn-default btn-sm disabled">
         <span class="gl-ml-3 gl-mr-3">{{ s__('Badges|No badge image') }}</span>
@@ -99,7 +98,7 @@ export default {
       type="button"
       @click="reloadImage"
     >
-      <icon :size="16" name="retry" />
+      <gl-icon :size="16" name="retry" />
     </button>
   </div>
 </template>

app/assets/javascripts/badges/components/badge_list_row.vue

 <script>
 import { mapActions, mapState } from 'vuex';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import { PROJECT_BADGE } from '../constants';
 import Badge from './badge.vue';
 
@@ -10,7 +9,7 @@ export default {
   name: 'BadgeListRow',
   components: {
     Badge,
-    Icon,
+    GlIcon,
     GlLoadingIcon,
   },
   props: {
@@ -58,7 +57,7 @@ export default {
           type="button"
           @click="editBadge(badge)"
         >
-          <icon :size="16" :aria-label="__('Edit')" name="pencil" />
+          <gl-icon :size="16" :aria-label="__('Edit')" name="pencil" />
         </button>
         <button
           :disabled="badge.isDeleting"
@@ -68,7 +67,7 @@ export default {
           data-target="#delete-badge-modal"
           @click="updateBadgeInModal(badge)"
         >
-          <icon :size="16" :aria-label="__('Delete')" name="remove" />
+          <gl-icon :size="16" :aria-label="__('Delete')" name="remove" />
         </button>
         <gl-loading-icon v-show="badge.isDeleting" :inline="true" />
       </div>

app/assets/javascripts/batch_comments/components/preview_dropdown.vue

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { sprintf, n__ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import DraftsCount from './drafts_count.vue';
 import PublishButton from './publish_button.vue';
 import PreviewItem from './preview_item.vue';
@@ -10,7 +9,7 @@ import PreviewItem from './preview_item.vue';
 export default {
   components: {
     GlLoadingIcon,
-    Icon,
+    GlIcon,
     DraftsCount,
     PublishButton,
     PreviewItem,
@@ -71,7 +70,7 @@ export default {
     >
       {{ __('Finish review') }}
       <drafts-count />
-      <icon name="angle-up" />
+      <gl-icon name="angle-up" />
     </button>
     <div
       class="dropdown-menu dropdown-menu-large dropdown-menu-right dropdown-open-top"
@@ -87,7 +86,7 @@ export default {
           class="dropdown-title-button dropdown-menu-close"
           @click="toggleReviewDropdown"
         >
-          <icon name="close" />
+          <gl-icon name="close" />
         </button>
       </div>
       <div class="dropdown-content">

app/assets/javascripts/batch_comments/components/preview_item.vue

 <script>
 import { mapActions, mapGetters } from 'vuex';
-import { GlSprintf } from '@gitlab/ui';
+import { GlSprintf, GlIcon } from '@gitlab/ui';
 import { IMAGE_DIFF_POSITION_TYPE } from '~/diffs/constants';
 import { sprintf, __ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import resolvedStatusMixin from '../mixins/resolved_status';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import {
@@ -14,7 +13,7 @@ import {
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     GlSprintf,
   },
   mixins: [resolvedStatusMixin, glFeatureFlagsMixin()],
@@ -101,7 +100,7 @@ export default {
     @click="scrollToDraft(draft)"
   >
     <span class="review-preview-item-header">
-      <icon class="flex-shrink-0" :name="iconName" />
+      <gl-icon class="flex-shrink-0" :name="iconName" />
       <span
         class="bold text-nowrap"
         :class="{ 'gl-align-items-center': glFeatures.multilineComments }"
@@ -138,7 +137,7 @@ export default {
       v-if="draft.discussion_id && resolvedStatusMessage"
       class="review-preview-item-footer draft-note-resolution p-0"
     >
-      <icon class="gl-mr-3" name="status_success" /> {{ resolvedStatusMessage }}
+      <gl-icon class="gl-mr-3" name="status_success" /> {{ resolvedStatusMessage }}
     </span>
   </button>
 </template>

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

 <script>
 import { sortBy } from 'lodash';
 import { mapState } from 'vuex';
-import { GlLabel, GlTooltipDirective } from '@gitlab/ui';
+import { GlLabel, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import issueCardInner from 'ee_else_ce/boards/mixins/issue_card_inner';
 import { sprintf, __ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import IssueDueDate from './issue_due_date.vue';
@@ -15,7 +14,7 @@ import { isScopedLabel } from '~/lib/utils/common_utils';
 export default {
   components: {
     GlLabel,
-    Icon,
+    GlIcon,
     UserAvatarLink,
     TooltipOnTruncate,
     IssueDueDate,
@@ -148,7 +147,7 @@ export default {
   <div>
     <div class="d-flex board-card-header" dir="auto">
       <h4 class="board-card-title gl-mb-0 gl-mt-0">
-        <icon
+        <gl-icon
           v-if="issue.blocked"
           v-gl-tooltip
           name="issue-block"
@@ -156,7 +155,7 @@ export default {
           class="issue-blocked-icon gl-mr-2"
           :aria-label="__('Blocked issue')"
         />
-        <icon
+        <gl-icon
           v-if="issue.confidential"
           v-gl-tooltip
           name="eye-slash"

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

 <script>
 import dateFormat from 'dateformat';
-import { GlTooltip } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlTooltip, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 import {
   getDayDifference,
@@ -12,7 +11,7 @@ import {
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     GlTooltip,
   },
   props: {
@@ -87,7 +86,7 @@ export default {
 <template>
   <span>
     <span ref="issueDueDate" :class="cssClass" class="board-card-info card-number">
-      <icon :class="{ 'text-danger': isPastDue }" class="board-card-info-icon" name="calendar" />
+      <gl-icon :class="{ 'text-danger': isPastDue }" class="board-card-info-icon" name="calendar" />
       <time :class="{ 'text-danger': isPastDue }" datetime="date" class="board-card-info-text">{{
         body
       }}</time>

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

 <script>
-import { GlTooltip } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlTooltip, GlIcon } from '@gitlab/ui';
 import { parseSeconds, stringifyTime } from '~/lib/utils/datetime_utility';
 import boardsStore from '../stores/boards_store';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     GlTooltip,
   },
   props: {
@@ -34,7 +33,7 @@ export default {
 <template>
   <span>
     <span ref="issueTimeEstimate" class="board-card-info card-number">
-      <icon name="hourglass" class="board-card-info-icon" /><time class="board-card-info-text">{{
+      <gl-icon name="hourglass" class="board-card-info-icon" /><time class="board-card-info-text">{{
         timeEstimate
       }}</time>
     </span>

app/assets/javascripts/boards/components/modal/list.vue

 <script>
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import ModalStore from '../../stores/modal_store';
 import IssueCardInner from '../issue_card_inner.vue';
 
 export default {
   components: {
     IssueCardInner,
-    Icon,
+    GlIcon,
   },
   props: {
     issueLinkBase: {
@@ -135,7 +135,7 @@ export default {
           @click="toggleIssue($event, issue)"
         >
           <issue-card-inner :issue="issue" :issue-link-base="issueLinkBase" :root-path="rootPath" />
-          <icon
+          <gl-icon
             v-if="issue.selected"
             :aria-label="'Issue #' + issue.id + ' selected'"
             name="mobile-issue-close"

app/assets/javascripts/boards/components/modal/lists_dropdown.vue

 <script>
-import { GlLink } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlLink, GlIcon } from '@gitlab/ui';
 import ModalStore from '../../stores/modal_store';
 import boardsStore from '../../stores/boards_store';
 
 export default {
   components: {
     GlLink,
-    Icon,
+    GlIcon,
   },
   data() {
     return {
@@ -29,7 +28,7 @@ export default {
   <div class="dropdown inline">
     <button class="dropdown-menu-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
       <span :style="{ backgroundColor: selected.label.color }" class="dropdown-label-box"> </span>
-      {{ selected.title }} <icon name="chevron-down" class="dropdown-menu-toggle-icon" />
+      {{ selected.title }} <gl-icon name="chevron-down" class="dropdown-menu-toggle-icon" />
     </button>
     <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up">
       <ul>

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

 <script>
 import $ from 'jquery';
 import { escape } from 'lodash';
-import { GlLoadingIcon } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 import eventHub from '../eventhub';
 import Api from '../../api';
@@ -11,7 +10,7 @@ import { featureAccessLevel } from '~/pages/projects/shared/permissions/constant
 export default {
   name: 'BoardProjectSelect',
   components: {
-    Icon,
+    GlIcon,
     GlLoadingIcon,
   },
   props: {
@@ -105,13 +104,13 @@ export default {
         data-toggle="dropdown"
         aria-expanded="false"
       >
-        {{ selectedProjectName }} <icon name="chevron-down" class="dropdown-menu-toggle-icon" />
+        {{ selectedProjectName }} <gl-icon name="chevron-down" class="dropdown-menu-toggle-icon" />
       </button>
       <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width">
         <div class="dropdown-title">{{ __('Projects') }}</div>
         <div class="dropdown-input">
           <input class="dropdown-input-field" type="search" :placeholder="__('Search projects')" />
-          <icon name="search" class="dropdown-input-search" data-hidden="true" />
+          <gl-icon name="search" class="dropdown-input-search" data-hidden="true" />
         </div>
         <div class="dropdown-content"></div>
         <div class="dropdown-loading"><gl-loading-icon /></div>

app/assets/javascripts/confidential_merge_request/components/dropdown.vue

 <script>
-import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
+import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
     GlDeprecatedDropdown,
     GlDeprecatedDropdownItem,
-    Icon,
+    GlIcon,
   },
   props: {
     projects: {
@@ -41,17 +40,17 @@ export default {
   <gl-deprecated-dropdown toggle-class="d-flex align-items-center w-100" class="w-100">
     <template #button-content>
       <span class="str-truncated-100 mr-2">
-        <icon name="lock" />
+        <gl-icon name="lock" />
         {{ dropdownText }}
       </span>
-      <icon name="chevron-down" class="ml-auto" />
+      <gl-icon name="chevron-down" class="ml-auto" />
     </template>
     <gl-deprecated-dropdown-item
       v-for="project in projects"
       :key="project.id"
       @click="selectProject(project)"
     >
-      <icon
+      <gl-icon
         name="mobile-issue-close"
         :class="{ icon: project.id !== selectedProject.id }"
         class="js-active-project-check"

app/assets/javascripts/custom_metrics/components/custom_metrics_form_fields.vue

 <script>
-import { GlFormInput, GlLink, GlFormGroup, GlFormRadioGroup, GlLoadingIcon } from '@gitlab/ui';
+import {
+  GlFormInput,
+  GlLink,
+  GlFormGroup,
+  GlFormRadioGroup,
+  GlLoadingIcon,
+  GlIcon,
+} from '@gitlab/ui';
 import { debounce } from 'lodash';
 import { __, s__ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import csrf from '~/lib/utils/csrf';
 import axios from '~/lib/utils/axios_utils';
 import statusCodes from '~/lib/utils/http_status';
@@ -37,7 +43,7 @@ export default {
     GlFormGroup,
     GlFormRadioGroup,
     GlLoadingIcon,
-    Icon,
+    GlIcon,
   },
   props: {
     formOperation: {
@@ -229,7 +235,7 @@ export default {
         {{ s__('Metrics|Must be a valid PromQL query.') }}
         <gl-link href="https://prometheus.io/docs/prometheus/latest/querying/basics/" tabindex="-1">
           {{ s__('Metrics|Prometheus Query Documentation') }}
-          <icon name="external-link" :size="12" />
+          <gl-icon name="external-link" :size="12" />
         </gl-link>
       </span>
     </gl-form-group>

app/assets/javascripts/cycle_analytics/components/banner.vue

 <script>
 import iconCycleAnalyticsSplash from 'icons/_icon_cycle_analytics_splash.svg';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
   },
   props: {
     documentationLink: {
@@ -32,7 +32,7 @@ export default {
       type="button"
       @click="dismissOverviewDialog"
     >
-      <icon name="close" />
+      <gl-icon name="close" />
     </button>
     <div class="svg-container" v-html="iconCycleAnalyticsSplash"></div>
     <div class="inner-content">

app/assets/javascripts/cycle_analytics/components/stage_review_component.vue

@@ -3,14 +3,12 @@ import { GlIcon } from '@gitlab/ui';
 import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 import limitWarning from './limit_warning_component.vue';
 import totalTime from './total_time_component.vue';
-import icon from '../../vue_shared/components/icon.vue';
 
 export default {
   components: {
     userAvatarImage,
     totalTime,
     limitWarning,
-    icon,
     GlIcon,
   },
   props: {
@@ -60,7 +58,7 @@ export default {
           </template>
           <template v-else>
             <span v-if="mergeRequest.branch" class="merge-request-branch">
-              <icon :size="16" name="fork" />
+              <gl-icon :size="16" name="fork" />
               <a :href="mergeRequest.branch.url"> {{ mergeRequest.branch.name }} </a>
             </span>
           </template>

app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 import iconBranch from '../svg/icon_branch.svg';
 import limitWarning from './limit_warning_component.vue';
 import totalTime from './total_time_component.vue';
-import icon from '../../vue_shared/components/icon.vue';
 
 export default {
   components: {
     userAvatarImage,
     totalTime,
     limitWarning,
-    icon,
+    GlIcon,
   },
   props: {
     items: {
@@ -44,7 +44,7 @@ export default {
           <user-avatar-image :img-src="build.author.avatarUrl" />
           <h5 class="item-title">
             <a :href="build.url" class="pipeline-id"> #{{ build.id }} </a>
-            <icon :size="16" name="fork" />
+            <gl-icon :size="16" name="fork" />
             <a :href="build.branch.url" class="ref-name"> {{ build.branch.name }} </a>
             <span class="icon-branch" v-html="iconBranch"> </span>
             <a :href="build.commitUrl" class="commit-sha"> {{ build.shortSha }} </a>

app/assets/javascripts/cycle_analytics/components/stage_test_component.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import iconBuildStatus from '../svg/icon_build_status.svg';
 import iconBranch from '../svg/icon_branch.svg';
 import limitWarning from './limit_warning_component.vue';
 import totalTime from './total_time_component.vue';
-import icon from '../../vue_shared/components/icon.vue';
 
 export default {
   components: {
     totalTime,
     limitWarning,
-    icon,
+    GlIcon,
   },
   props: {
     items: {
@@ -46,7 +46,7 @@ export default {
             <span class="icon-build-status" v-html="iconBuildStatus"> </span>
             <a :href="build.url" class="item-build-name"> {{ build.name }} </a> &middot;
             <a :href="build.url" class="pipeline-id"> #{{ build.id }} </a>
-            <icon :size="16" name="fork" />
+            <gl-icon :size="16" name="fork" />
             <a :href="build.branch.url" class="ref-name"> {{ build.branch.name }} </a>
             <span class="icon-branch" v-html="iconBranch"> </span>
             <a :href="build.commitUrl" class="commit-sha"> {{ build.shortSha }} </a>

app/assets/javascripts/deploy_keys/components/app.vue

 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import { deprecatedCreateFlash as Flash } from '~/flash';
 import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue';
@@ -7,14 +7,13 @@ import eventHub from '../eventhub';
 import DeployKeysService from '../service';
 import DeployKeysStore from '../store';
 import KeysPanel from './keys_panel.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
     KeysPanel,
     NavigationTabs,
     GlLoadingIcon,
-    Icon,
+    GlIcon,
   },
   props: {
     endpoint: {
@@ -125,8 +124,8 @@ export default {
     />
     <template v-else-if="hasKeys">
       <div class="top-area scrolling-tabs-container inner-page-scroll-tabs">
-        <div class="fade-left"><icon name="chevron-lg-left" :size="12" /></div>
-        <div class="fade-right"><icon name="chevron-lg-right" :size="12" /></div>
+        <div class="fade-left"><gl-icon name="chevron-lg-left" :size="12" /></div>
+        <div class="fade-right"><gl-icon name="chevron-lg-right" :size="12" /></div>
 
         <navigation-tabs :tabs="tabs" scope="deployKeys" @onChangeTab="onChangeTab" />
       </div>

app/assets/javascripts/deploy_keys/components/key.vue

 <script>
 import { head, tail } from 'lodash';
+import { GlIcon } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
-import icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 
@@ -10,7 +10,7 @@ import actionBtn from './action_btn.vue';
 export default {
   components: {
     actionBtn,
-    icon,
+    GlIcon,
   },
   directives: {
     tooltip,
@@ -130,7 +130,7 @@ export default {
             class="label deploy-project-label"
           >
             <span> {{ firstProject.project.full_name }} </span>
-            <icon :name="firstProject.can_push ? 'lock-open' : 'lock'" />
+            <gl-icon :name="firstProject.can_push ? 'lock-open' : 'lock'" />
           </a>
           <a
             v-if="isExpandable"
@@ -151,7 +151,7 @@ export default {
             class="label deploy-project-label"
           >
             <span> {{ deployKeysProject.project.full_name }} </span>
-            <icon :name="deployKeysProject.can_push ? 'lock-open' : 'lock'" />
+            <gl-icon :name="deployKeysProject.can_push ? 'lock-open' : 'lock'" />
           </a>
         </template>
         <span v-else class="text-secondary">{{ __('None') }}</span>
@@ -161,7 +161,7 @@ export default {
       <div role="rowheader" class="table-mobile-header">{{ __('Created') }}</div>
       <div class="table-mobile-content text-secondary key-created-at">
         <span v-tooltip :title="tooltipTitle(deployKey.created_at)">
-          <icon name="calendar" /> <span>{{ timeFormatted(deployKey.created_at) }}</span>
+          <gl-icon name="calendar" /> <span>{{ timeFormatted(deployKey.created_at) }}</span>
         </span>
       </div>
     </div>
@@ -178,7 +178,7 @@ export default {
           class="btn btn-default text-secondary"
           data-container="body"
         >
-          <icon name="pencil" />
+          <gl-icon name="pencil" />
         </a>
         <action-btn
           v-if="isRemovable"
@@ -189,7 +189,7 @@ export default {
           type="remove"
           data-container="body"
         >
-          <icon name="remove" />
+          <gl-icon name="remove" />
         </action-btn>
         <action-btn
           v-else-if="isEnabled"
@@ -200,7 +200,7 @@ export default {
           type="disable"
           data-container="body"
         >
-          <icon name="cancel" />
+          <gl-icon name="cancel" />
         </action-btn>
       </div>
     </div>

app/assets/javascripts/design_management/components/list/item.vue

 <script>
 import { GlLoadingIcon, GlIcon, GlIntersectionObserver } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
 import Timeago from '~/vue_shared/components/time_ago_tooltip.vue';
 import { n__, __ } from '~/locale';
 import { DESIGN_ROUTE_NAME } from '../../router/constants';
@@ -10,7 +9,6 @@ export default {
     GlLoadingIcon,
     GlIntersectionObserver,
     GlIcon,
-    Icon,
     Timeago,
   },
   props: {
@@ -132,7 +130,7 @@ export default {
     <div class="card-body p-0 d-flex-center overflow-hidden position-relative">
       <div v-if="icon.name" data-testid="designEvent" class="design-event position-absolute">
         <span :title="icon.tooltip" :aria-label="icon.tooltip">
-          <icon :name="icon.name" :size="18" :class="icon.classes" />
+          <gl-icon :name="icon.name" :size="18" :class="icon.classes" />
         </span>
       </div>
       <gl-intersection-observer @appear="onAppear">
@@ -164,7 +162,7 @@ export default {
         </span>
       </div>
       <div v-if="notesCount" class="ml-auto d-flex align-items-center text-secondary">
-        <icon name="comments" class="ml-1" />
+        <gl-icon name="comments" class="ml-1" />
         <span :aria-label="notesLabel" class="ml-1">
           {{ notesCount }}
         </span>

app/assets/javascripts/design_management_legacy/components/list/item.vue

 <script>
 import { GlLoadingIcon, GlIcon, GlIntersectionObserver } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
 import Timeago from '~/vue_shared/components/time_ago_tooltip.vue';
 import { n__, __ } from '~/locale';
 import { DESIGN_ROUTE_NAME } from '../../router/constants';
@@ -10,7 +9,6 @@ export default {
     GlLoadingIcon,
     GlIntersectionObserver,
     GlIcon,
-    Icon,
     Timeago,
   },
   props: {
@@ -132,7 +130,7 @@ export default {
     <div class="card-body p-0 d-flex-center overflow-hidden position-relative">
       <div v-if="icon.name" data-testid="designEvent" class="design-event position-absolute">
         <span :title="icon.tooltip" :aria-label="icon.tooltip">
-          <icon :name="icon.name" :size="18" :class="icon.classes" />
+          <gl-icon :name="icon.name" :size="18" :class="icon.classes" />
         </span>
       </div>
       <gl-intersection-observer @appear="onAppear">
@@ -164,7 +162,7 @@ export default {
         </span>
       </div>
       <div v-if="notesCount" class="ml-auto d-flex align-items-center text-secondary">
-        <icon name="comments" class="ml-1" />
+        <gl-icon name="comments" class="ml-1" />
         <span :aria-label="notesLabel" class="ml-1">
           {{ notesCount }}
         </span>

app/assets/javascripts/design_management_legacy/components/toolbar/index.vue

 <script>
-import { GlDeprecatedButton } from '@gitlab/ui';
+import { GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import Pagination from './pagination.vue';
 import DeleteButton from '../delete_button.vue';
@@ -11,7 +10,7 @@ import { DESIGNS_ROUTE_NAME } from '../../router/constants';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     Pagination,
     DeleteButton,
     GlDeprecatedButton,
@@ -104,7 +103,7 @@ export default {
       :aria-label="s__('DesignManagement|Go back to designs')"
       class="mr-3 text-plain d-flex justify-content-center align-items-center"
     >
-      <icon :size="18" name="close" />
+      <gl-icon :size="18" name="close" />
     </router-link>
     <div class="overflow-hidden d-flex align-items-center">
       <h2 class="m-0 str-truncated-100 gl-font-base">{{ filename }}</h2>
@@ -112,7 +111,7 @@ export default {
     </div>
     <pagination :id="id" class="ml-auto flex-shrink-0" />
     <gl-deprecated-button :href="image" class="mr-2">
-      <icon :size="18" name="download" />
+      <gl-icon :size="18" name="download" />
     </gl-deprecated-button>
     <delete-button
       v-if="isLatestVersion && canDeleteDesign"
@@ -120,7 +119,7 @@ export default {
       button-variant="danger"
       @deleteSelectedDesigns="$emit('delete')"
     >
-      <icon :size="18" name="remove" />
+      <gl-icon :size="18" name="remove" />
     </delete-button>
   </header>
 </template>

app/assets/javascripts/design_management_legacy/components/toolbar/pagination_button.vue

 <script>
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import { DESIGN_ROUTE_NAME } from '../../router/constants';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
   },
   props: {
     design: {
@@ -43,6 +43,6 @@ export default {
     :aria-label="title"
     class="btn btn-default"
   >
-    <icon :name="iconName" />
+    <gl-icon :name="iconName" />
   </router-link>
 </template>

app/assets/javascripts/diffs/components/commit_item.vue

@@ -5,7 +5,6 @@ import { GlButtonGroup, GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui'
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
@@ -39,7 +38,6 @@ import { setUrlParams } from '../../lib/utils/url_utility';
 export default {
   components: {
     UserAvatarLink,
-    Icon,
     ClipboardButton,
     TimeAgoTooltip,
     CommitPipelineStatus,
@@ -156,7 +154,7 @@ export default {
           type="button"
           :aria-label="__('Toggle commit description')"
         >
-          <icon :size="12" name="ellipsis_h" />
+          <gl-icon :size="12" name="ellipsis_h" />
         </button>
 
         <div class="committer">

app/assets/javascripts/diffs/components/compare_dropdown_layout.vue

 <script>
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     TimeAgo,
   },
   props: {
@@ -29,7 +29,7 @@ export default {
       aria-expanded="false"
     >
       <span> {{ selectedVersionName }} </span>
-      <icon :size="12" name="angle-down" class="position-absolute" />
+      <gl-icon :size="12" name="angle-down" class="position-absolute" />
     </a>
     <div class="dropdown-menu dropdown-select dropdown-menu-selectable">
       <div class="dropdown-content">

app/assets/javascripts/diffs/components/diff_discussions.vue

 <script>
 import { mapActions } from 'vuex';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import noteableDiscussion from '../../notes/components/noteable_discussion.vue';
 
 export default {
   components: {
     noteableDiscussion,
-    Icon,
+    GlIcon,
   },
   props: {
     discussions: {
@@ -70,7 +70,7 @@ export default {
             class="js-diff-notes-toggle"
             @click="toggleDiscussion({ discussionId: discussion.id })"
           >
-            <icon v-if="discussion.expanded" name="collapse" class="collapse-icon" />
+            <gl-icon v-if="discussion.expanded" name="collapse" class="collapse-icon" />
             <template v-else>
               {{ index + 1 }}
             </template>

app/assets/javascripts/diffs/components/diff_expansion_cell.vue

 <script>
 import { mapState, mapActions } from 'vuex';
+import { GlIcon } from '@gitlab/ui';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { s__ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import { UNFOLD_COUNT, INLINE_DIFF_VIEW_TYPE, PARALLEL_DIFF_VIEW_TYPE } from '../constants';
 import * as utils from '../store/utils';
 import tooltip from '../../vue_shared/directives/tooltip';
@@ -26,7 +26,7 @@ export default {
     tooltip,
   },
   components: {
-    Icon,
+    GlIcon,
   },
   props: {
     fileHash: {
@@ -237,7 +237,7 @@ export default {
         :title="__('Expand up')"
         @click="handleExpandLines(EXPAND_UP)"
       >
-        <icon :size="12" name="expand-up" aria-hidden="true" />
+        <gl-icon :size="12" name="expand-up" aria-hidden="true" />
       </a>
       <a class="mx-2 cursor-pointer js-unfold-all" @click="handleExpandLines()">
         <span>{{ s__('Diffs|Show unchanged lines') }}</span>
@@ -251,7 +251,7 @@ export default {
         :title="__('Expand down')"
         @click="handleExpandLines(EXPAND_DOWN)"
       >
-        <icon :size="12" name="expand-down" aria-hidden="true" />
+        <gl-icon :size="12" name="expand-down" aria-hidden="true" />
       </a>
     </div>
   </td>

app/assets/javascripts/diffs/components/diff_file_header.vue

 <script>
 import { escape } from 'lodash';
 import { mapActions, mapGetters } from 'vuex';
-import { GlDeprecatedButton, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui';
+import { GlDeprecatedButton, GlTooltipDirective, GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
 import { truncateSha } from '~/lib/utils/text_utility';
 import { __, s__, sprintf } from '~/locale';
@@ -18,7 +17,7 @@ export default {
     GlDeprecatedButton,
     ClipboardButton,
     EditButton,
-    Icon,
+    GlIcon,
     FileIcon,
     DiffStats,
   },
@@ -162,7 +161,7 @@ export default {
     @click.self="handleToggleFile"
   >
     <div class="file-header-content">
-      <icon
+      <gl-icon
         v-if="collapsible"
         ref="collapseIcon"
         :name="collapseIcon"
@@ -237,7 +236,7 @@ export default {
               type="button"
               @click="toggleFileDiscussionWrappers(diffFile)"
             >
-              <icon name="comment" />
+              <gl-icon name="comment" />
             </gl-deprecated-button>
           </span>
 
@@ -273,8 +272,8 @@ export default {
           @click="toggleFullDiff(diffFile.file_path)"
         >
           <gl-loading-icon v-if="diffFile.isLoadingFullFile" color="dark" inline />
-          <icon v-else-if="diffFile.isShowingFullFile" name="doc-changes" />
-          <icon v-else name="doc-expand" />
+          <gl-icon v-else-if="diffFile.isShowingFullFile" name="doc-changes" />
+          <gl-icon v-else name="doc-expand" />
         </gl-deprecated-button>
         <gl-deprecated-button
           ref="viewButton"
@@ -287,7 +286,7 @@ export default {
           data-track-property="diff_toggle_view_sha"
           :title="viewFileButtonText"
         >
-          <icon name="doc-text" />
+          <gl-icon name="doc-text" />
         </gl-deprecated-button>
 
         <a
@@ -303,7 +302,7 @@ export default {
           data-track-property="diff_toggle_external"
           class="btn btn-file-option"
         >
-          <icon name="external-link" />
+          <gl-icon name="external-link" />
         </a>
       </div>
     </div>

app/assets/javascripts/diffs/components/diff_gutter_avatars.vue

 <script>
-import { GlTooltipDirective } from '@gitlab/ui';
+import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { n__ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import { truncate } from '~/lib/utils/text_utility';
 import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
 import { COUNT_OF_AVATARS_IN_GUTTER, LENGTH_OF_AVATAR_TOOLTIP } from '../constants';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     UserAvatarImage,
   },
   directives: {
@@ -68,7 +67,7 @@ export default {
       class="diff-notes-collapse js-diff-comment-avatar js-diff-comment-button"
       @click="$emit('toggleLineDiscussions')"
     >
-      <icon :size="12" name="collapse" />
+      <gl-icon :size="12" name="collapse" />
     </button>
     <template v-else>
       <user-avatar-image

app/assets/javascripts/diffs/components/diff_stats.vue

 <script>
 import { isNumber } from 'lodash';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import { n__ } from '~/locale';
 
 export default {
-  components: { Icon },
+  components: { GlIcon },
   props: {
     addedLines: {
       type: Number,
@@ -46,7 +46,7 @@ export default {
     }"
   >
     <div v-if="hasDiffFiles" class="diff-stats-group">
-      <icon name="doc-code" class="diff-stats-icon text-secondary" />
+      <gl-icon name="doc-code" class="diff-stats-icon text-secondary" />
       <span class="text-secondary bold">{{ diffFilesCountText }} {{ filesText }}</span>
     </div>
     <div

app/assets/javascripts/diffs/components/edit_button.vue

 <script>
-import { GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui';
+import { GlTooltipDirective, GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
     GlDeprecatedButton,
-    Icon,
+    GlIcon,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -59,7 +58,7 @@ export default {
       class="rounded-0 js-edit-blob"
       @click.native="handleEditClick"
     >
-      <icon name="pencil" />
+      <gl-icon name="pencil" />
     </gl-deprecated-button>
   </span>
 </template>

app/assets/javascripts/diffs/components/image_diff_overlay.vue

@@ -2,12 +2,12 @@
 import { mapActions, mapGetters } from 'vuex';
 import { isArray } from 'lodash';
 import imageDiffMixin from 'ee_else_ce/diffs/mixins/image_diff';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 
 export default {
   name: 'ImageDiffOverlay',
   components: {
-    Icon,
+    GlIcon,
   },
   mixins: [imageDiffMixin],
   props: {
@@ -112,7 +112,7 @@ export default {
       type="button"
       @click="clickedToggle(discussion)"
     >
-      <icon v-if="showCommentIcon" name="image-comment-dark" />
+      <gl-icon v-if="showCommentIcon" name="image-comment-dark" />
       <template v-else>
         {{ toggleText(discussion, index) }}
       </template>
@@ -127,7 +127,7 @@ export default {
       class="btn-transparent comment-indicator"
       type="button"
     >
-      <icon name="image-comment-dark" />
+      <gl-icon name="image-comment-dark" />
     </button>
   </div>
 </template>

app/assets/javascripts/diffs/components/settings_dropdown.vue

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { GlDeprecatedButton } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
     GlDeprecatedButton,
-    Icon,
+    GlIcon,
   },
   computed: {
     ...mapGetters('diffs', ['isInlineView', 'isParallelView']),
@@ -31,7 +30,7 @@ export default {
       data-toggle="dropdown"
       data-display="static"
     >
-      <icon name="settings" /> <icon name="chevron-down" />
+      <gl-icon name="settings" /> <gl-icon name="chevron-down" />
     </button>
     <div class="dropdown-menu dropdown-menu-right p-2 pt-3 pb-3">
       <div>

app/assets/javascripts/diffs/components/tree_list.vue

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { GlTooltipDirective } from '@gitlab/ui';
+import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import FileTree from '~/vue_shared/components/file_tree.vue';
 import DiffFileRow from './diff_file_row.vue';
 
@@ -11,7 +10,7 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   components: {
-    Icon,
+    GlIcon,
     FileTree,
   },
   props: {
@@ -66,7 +65,7 @@ export default {
   <div class="tree-list-holder d-flex flex-column">
     <div class="gl-mb-3 position-relative tree-list-search d-flex">
       <div class="flex-fill d-flex">
-        <icon name="search" class="position-absolute tree-list-icon" />
+        <gl-icon name="search" class="position-absolute tree-list-icon" />
         <label for="diff-tree-search" class="sr-only">{{ $options.searchPlaceholder }}</label>
         <input
           id="diff-tree-search"
@@ -83,7 +82,7 @@ export default {
           class="position-absolute bg-transparent tree-list-icon tree-list-clear-icon border-0 p-0"
           @click="clearSearch"
         >
-          <icon name="close" />
+          <gl-icon name="close" />
         </button>
       </div>
     </div>

ee/app/assets/javascripts/analytics/cycle_analytics/components/stage_build_item.vue

 <script>
-import { GlLink } from '@gitlab/ui';
+import { GlLink, GlIcon } from '@gitlab/ui';
 import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
 import TotalTime from './total_time_component.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 import iconBranch from '../svg/icon_branch.svg';
 import iconBuildStatus from '../svg/icon_build_status.svg';
 
@@ -10,7 +9,7 @@ export default {
   components: {
     UserAvatarImage,
     TotalTime,
-    Icon,
+    GlIcon,
     GlLink,
   },
   props: {
@@ -55,7 +54,7 @@ export default {
             <gl-link :href="url" class="item-build-name">{{ name }}</gl-link> &middot;
           </template>
           <gl-link :href="url" class="pipeline-id">#{{ id }}</gl-link>
-          <icon :size="16" name="fork" />
+          <gl-icon :size="16" name="fork" />
           <gl-link :href="branch.url" class="ref-name">{{ branch.name }}</gl-link>
           <span class="icon-branch" v-html="iconBranch"></span>
           <gl-link :href="commitUrl" class="commit-sha">{{ shortSha }}</gl-link>

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

 <script>
-import { GlTooltip } from '@gitlab/ui';
-import icon from '~/vue_shared/components/icon.vue';
+import { GlTooltip, GlIcon } from '@gitlab/ui';
 
 export default {
   name: 'IssueCardWeight',
   components: {
-    icon,
+    GlIcon,
     GlTooltip,
   },
   props: {
@@ -30,7 +29,7 @@ export default {
     tabindex="1"
     v-on="$listeners"
   >
-    <icon name="weight" class="board-card-info-icon" />
+    <gl-icon name="weight" class="board-card-info-icon" />
     <span class="board-card-info-text"> {{ weight }} </span>
     <gl-tooltip
       :target="() => $refs.itemWeight"

spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap

@@ -59,7 +59,7 @@ exports[`Design management list item component with notes renders item with mult
     <div
       class="ml-auto d-flex align-items-center text-secondary"
     >
-      <icon-stub
+      <gl-icon-stub
         class="ml-1"
         name="comments"
         size="16"
@@ -129,7 +129,7 @@ exports[`Design management list item component with notes renders item with sing
     <div
       class="ml-auto d-flex align-items-center text-secondary"
     >
-      <icon-stub
+      <gl-icon-stub
         class="ml-1"
         name="comments"
         size="16"

spec/frontend/design_management/components/list/item_spec.js

 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import { GlIcon, GlLoadingIcon, GlIntersectionObserver } from '@gitlab/ui';
 import VueRouter from 'vue-router';
-import Icon from '~/vue_shared/components/icon.vue';
 import Item from '~/design_management/components/list/item.vue';
 
 const localVue = createLocalVue();
@@ -20,7 +19,7 @@ describe('Design management list item component', () => {
   let wrapper;
 
   const findDesignEvent = () => wrapper.find('[data-testid="designEvent"]');
-  const findEventIcon = () => findDesignEvent().find(Icon);
+  const findEventIcon = () => findDesignEvent().find(GlIcon);
   const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
 
   function createComponent({

spec/frontend/design_management_legacy/components/list/__snapshots__/item_spec.js.snap

@@ -59,7 +59,7 @@ exports[`Design management list item component with notes renders item with mult
     <div
       class="ml-auto d-flex align-items-center text-secondary"
     >
-      <icon-stub
+      <gl-icon-stub
         class="ml-1"
         name="comments"
         size="16"
@@ -129,7 +129,7 @@ exports[`Design management list item component with notes renders item with sing
     <div
       class="ml-auto d-flex align-items-center text-secondary"
     >
-      <icon-stub
+      <gl-icon-stub
         class="ml-1"
         name="comments"
         size="16"

spec/frontend/design_management_legacy/components/list/item_spec.js

 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import { GlIcon, GlLoadingIcon, GlIntersectionObserver } from '@gitlab/ui';
 import VueRouter from 'vue-router';
-import Icon from '~/vue_shared/components/icon.vue';
 import Item from '~/design_management_legacy/components/list/item.vue';
 
 const localVue = createLocalVue();
@@ -20,7 +19,7 @@ describe('Design management list item component', () => {
   let wrapper;
 
   const findDesignEvent = () => wrapper.find('[data-testid="designEvent"]');
-  const findEventIcon = () => findDesignEvent().find(Icon);
+  const findEventIcon = () => findDesignEvent().find(GlIcon);
   const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
 
   function createComponent({

spec/frontend/design_management_legacy/components/toolbar/__snapshots__/index_spec.js.snap

@@ -8,7 +8,7 @@ exports[`Design management toolbar component renders design and updated data 1`]
     aria-label="Go back to designs"
     class="mr-3 text-plain d-flex justify-content-center align-items-center"
   >
-    <icon-stub
+    <gl-icon-stub
       name="close"
       size="18"
     />
@@ -41,7 +41,7 @@ exports[`Design management toolbar component renders design and updated data 1`]
     size="md"
     variant="secondary"
   >
-    <icon-stub
+    <gl-icon-stub
       name="download"
       size="18"
     />
@@ -52,7 +52,7 @@ exports[`Design management toolbar component renders design and updated data 1`]
     buttonvariant="danger"
     hasselecteddesigns="true"
   >
-    <icon-stub
+    <gl-icon-stub
       name="remove"
       size="18"
     />

spec/frontend/design_management_legacy/components/toolbar/__snapshots__/pagination_button_spec.js.snap

@@ -7,7 +7,7 @@ exports[`Design management pagination button component disables button when no d
   disabled="true"
   to="[object Object]"
 >
-  <icon-stub
+  <gl-icon-stub
     name="angle-right"
     size="16"
   />
@@ -20,7 +20,7 @@ exports[`Design management pagination button component renders router-link 1`] =
   class="btn btn-default"
   to="[object Object]"
 >
-  <icon-stub
+  <gl-icon-stub
     name="angle-right"
     size="16"
   />

spec/frontend/diffs/components/diff_discussions_spec.js

 import { mount, createLocalVue } from '@vue/test-utils';
+import { GlIcon } from '@gitlab/ui';
 import DiffDiscussions from '~/diffs/components/diff_discussions.vue';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
 import NoteableDiscussion from '~/notes/components/noteable_discussion.vue';
 import DiscussionNotes from '~/notes/components/discussion_notes.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 import { createStore } from '~/mr_notes/stores';
 import '~/behaviors/markdown/render_gfm';
 import discussionsMockData from '../mock_data/diff_discussions';
@@ -51,7 +51,7 @@ describe('DiffDiscussions', () => {
       const diffNotesToggle = findDiffNotesToggle();
 
       expect(diffNotesToggle.exists()).toBe(true);
-      expect(diffNotesToggle.find(Icon).exists()).toBe(true);
+      expect(diffNotesToggle.find(GlIcon).exists()).toBe(true);
       expect(diffNotesToggle.classes('diff-notes-collapse')).toBe(true);
     });
 

spec/frontend/diffs/components/diff_file_header_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
+import { GlIcon } from '@gitlab/ui';
 import DiffFileHeader from '~/diffs/components/diff_file_header.vue';
 import EditButton from '~/diffs/components/edit_button.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 import diffDiscussionsMockData from '../mock_data/diff_discussions';
 import { truncateSha } from '~/lib/utils/text_utility';
 import { diffViewerModes } from '~/ide/constants';
@@ -70,7 +70,7 @@ describe('DiffFileHeader component', () => {
   const findCollapseIcon = () => wrapper.find({ ref: 'collapseIcon' });
 
   const findIconByName = iconName => {
-    const icons = wrapper.findAll(Icon).filter(w => w.props('name') === iconName);
+    const icons = wrapper.findAll(GlIcon).filter(w => w.props('name') === iconName);
     if (icons.length === 0) return icons;
     if (icons.length > 1) {
       throw new Error(`Multiple icons found for ${iconName}`);

spec/frontend/diffs/components/diff_stats_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlIcon } from '@gitlab/ui';
 import DiffStats from '~/diffs/components/diff_stats.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 
 const TEST_ADDED_LINES = 100;
 const TEST_REMOVED_LINES = 200;
@@ -53,7 +53,7 @@ describe('diff_stats', () => {
   describe('files changes', () => {
     const findIcon = name =>
       wrapper
-        .findAll(Icon)
+        .findAll(GlIcon)
         .filter(c => c.attributes('name') === name)
         .at(0).element.parentNode;
 

spec/frontend/diffs/components/image_diff_overlay_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlIcon } from '@gitlab/ui';
 import ImageDiffOverlay from '~/diffs/components/image_diff_overlay.vue';
 import { createStore } from '~/mr_notes/stores';
 import { imageDiffDiscussions } from '../mock_data/diff_discussions';
-import Icon from '~/vue_shared/components/icon.vue';
 
 describe('Diffs image diff overlay component', () => {
   const dimensions = {
@@ -64,7 +64,7 @@ describe('Diffs image diff overlay component', () => {
   it('renders icon when showCommentIcon is true', () => {
     createComponent({ showCommentIcon: true });
 
-    expect(wrapper.find(Icon).exists()).toBe(true);
+    expect(wrapper.find(GlIcon).exists()).toBe(true);
   });
 
   it('sets badge comment positions', () => {