Utilize GitLab UI icon component: pipelines to vue_merge_request_widget

This replaces all the usages of ~/vue_shared/components/icon.vue with
the corresponding GitLab UI component for all components from pipelines
to vue_merge_request_widget (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/pipelines/components/graph/action_component.vue

 <script>
-import { GlTooltipDirective, GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlTooltipDirective, GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
 import { dasherize } from '~/lib/utils/text_utility';
 import { __ } from '~/locale';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
-import Icon from '~/vue_shared/components/icon.vue';
 
 /**
  * Renders either a cancel, retry or play icon button and handles the post request
@@ -18,7 +17,7 @@ import Icon from '~/vue_shared/components/icon.vue';
  */
 export default {
   components: {
-    Icon,
+    GlIcon,
     GlButton,
     GlLoadingIcon,
   },
@@ -92,6 +91,6 @@ export default {
     @click="onClickAction"
   >
     <gl-loading-icon v-if="isLoading" class="js-action-icon-loading" />
-    <icon v-else :name="actionIcon" class="gl-mr-0!" />
+    <gl-icon v-else :name="actionIcon" class="gl-mr-0!" />
   </gl-button>
 </template>

app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue

 <script>
 import { isEqual } from 'lodash';
+import { GlIcon } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import PipelinesService from '../../services/pipelines_service';
@@ -9,7 +10,6 @@ import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue';
 import NavigationControls from './nav_controls.vue';
 import { getParameterByName } from '~/lib/utils/common_utils';
 import CIPaginationMixin from '~/vue_shared/mixins/ci_pagination_api_mixin';
-import Icon from '~/vue_shared/components/icon.vue';
 import PipelinesFilteredSearch from './pipelines_filtered_search.vue';
 import { validateParams } from '../../utils';
 import { ANY_TRIGGER_AUTHOR, RAW_TEXT_WARNING, FILTER_TAG_IDENTIFIER } from '../../constants';
@@ -21,7 +21,7 @@ export default {
     NavigationTabs,
     NavigationControls,
     PipelinesFilteredSearch,
-    Icon,
+    GlIcon,
   },
   mixins: [pipelinesMixin, CIPaginationMixin, glFeatureFlagsMixin()],
   props: {
@@ -285,8 +285,8 @@ export default {
       v-if="shouldRenderTabs || shouldRenderButtons"
       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
         v-if="shouldRenderTabs"

app/assets/javascripts/pipelines/components/pipelines_list/pipelines_actions.vue

 <script>
-import { GlTooltipDirective, GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlTooltipDirective, GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
 import { deprecatedCreateFlash as flash } from '~/flash';
 import { s__, __, sprintf } from '~/locale';
 import GlCountdown from '~/vue_shared/components/gl_countdown.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 import eventHub from '../../event_hub';
 
 export default {
@@ -12,7 +11,7 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   components: {
-    Icon,
+    GlIcon,
     GlCountdown,
     GlButton,
     GlLoadingIcon,
@@ -87,7 +86,7 @@ export default {
       data-toggle="dropdown"
       :aria-label="__('Run manual or delayed jobs')"
     >
-      <icon name="play" class="icon-play" />
+      <gl-icon name="play" class="icon-play" />
       <i class="fa fa-caret-down" aria-hidden="true"></i>
       <gl-loading-icon v-if="isLoading" />
     </button>
@@ -104,7 +103,7 @@ export default {
           <div class="d-flex justify-content-between flex-wrap">
             {{ action.name }}
             <span v-if="action.scheduled_at">
-              <icon name="clock" />
+              <gl-icon name="clock" />
               <gl-countdown :end-date-string="action.scheduled_at" />
             </span>
           </div>

app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue

 <script>
 /* eslint-disable @gitlab/vue-require-i18n-strings */
-import { GlLink, GlTooltipDirective } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlLink, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 
 export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
   components: {
-    Icon,
+    GlIcon,
     GlLink,
   },
   props: {
@@ -29,7 +28,7 @@ export default {
       data-toggle="dropdown"
       :aria-label="__('Artifacts')"
     >
-      <icon name="download" />
+      <gl-icon name="download" />
       <i class="fa fa-caret-down" aria-hidden="true"></i>
     </button>
     <ul class="dropdown-menu dropdown-menu-right">

app/assets/javascripts/pipelines/components/pipelines_list/stage.vue

@@ -13,18 +13,17 @@
  */
 
 import $ from 'jquery';
-import { GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlLoadingIcon, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { deprecatedCreateFlash as Flash } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import eventHub from '../../event_hub';
-import Icon from '~/vue_shared/components/icon.vue';
 import JobItem from '../graph/job_item.vue';
 import { PIPELINES_TABLE } from '../../constants';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     JobItem,
     GlLoadingIcon,
   },
@@ -170,7 +169,7 @@ export default {
       @click="onClickStage"
     >
       <span :aria-label="stage.title" aria-hidden="true" class="no-pointer-events">
-        <icon :name="borderlessIcon" />
+        <gl-icon :name="borderlessIcon" />
       </span>
     </button>
 

app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue

 <script>
 import { mapGetters } from 'vuex';
-import { GlTooltipDirective, GlFriendlyWrap } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlTooltipDirective, GlFriendlyWrap, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
 
 export default {
   name: 'TestsSuiteTable',
   components: {
-    Icon,
+    GlIcon,
     SmartVirtualList,
     GlFriendlyWrap,
   },
@@ -96,7 +95,7 @@ export default {
                 class="add-border ci-status-icon d-flex align-items-center justify-content-end justify-content-md-center"
                 :class="`ci-status-icon-${testCase.status}`"
               >
-                <icon :size="24" :name="testCase.icon" />
+                <gl-icon :size="24" :name="testCase.icon" />
               </div>
             </div>
           </div>

app/assets/javascripts/pipelines/components/test_reports/test_summary.vue

 <script>
-import { GlDeprecatedButton, GlProgressBar } from '@gitlab/ui';
+import { GlDeprecatedButton, GlProgressBar, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import { formattedTime } from '../../stores/test_reports/utils';
 
 export default {
@@ -9,7 +8,7 @@ export default {
   components: {
     GlDeprecatedButton,
     GlProgressBar,
-    Icon,
+    GlIcon,
   },
   props: {
     report: {
@@ -75,7 +74,7 @@ export default {
           class="gl-mr-3 js-back-button"
           @click="onBackClick"
         >
-          <icon name="angle-left" />
+          <gl-icon name="angle-left" />
         </gl-deprecated-button>
 
         <h4>{{ heading }}</h4>

app/assets/javascripts/related_merge_requests/components/related_merge_requests.vue

 <script>
 import { mapState, mapActions } from 'vuex';
-import { GlLink, GlLoadingIcon } from '@gitlab/ui';
+import { GlLink, GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { sprintf, n__, s__ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import RelatedIssuableItem from '~/vue_shared/components/issue/related_issuable_item.vue';
 import { parseIssuableData } from '../../issue_show/utils/parse_data';
 
 export default {
   name: 'RelatedMergeRequests',
   components: {
-    Icon,
+    GlIcon,
     GlLink,
     GlLoadingIcon,
     RelatedIssuableItem,
@@ -85,7 +84,7 @@ export default {
             <div class="mr-count-badge gl-display-inline-flex">
               <div class="mr-count-badge-count">
                 <svg class="s16 mr-1 text-secondary">
-                  <icon name="merge-request" class="mr-1 text-secondary" />
+                  <gl-icon name="merge-request" class="mr-1 text-secondary" />
                 </svg>
                 <span class="js-items-count">{{ totalCount }}</span>
               </div>

app/assets/javascripts/releases/components/release_block_assets.vue

 <script>
 import { GlTooltipDirective, GlLink, GlButton, GlCollapse, GlIcon, GlBadge } from '@gitlab/ui';
 import { difference, get } from 'lodash';
-import Icon from '~/vue_shared/components/icon.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { ASSET_LINK_TYPE } from '../constants';
 import { __, s__, sprintf } from '~/locale';
@@ -13,7 +12,6 @@ export default {
     GlButton,
     GlCollapse,
     GlIcon,
-    Icon,
     GlBadge,
   },
   directives: {
@@ -157,7 +155,7 @@ export default {
       <ul v-if="assets.links.length" class="pl-0 mb-0 gl-mt-3 list-unstyled js-assets-list">
         <li v-for="link in assets.links" :key="link.name" class="gl-mb-3">
           <gl-link v-gl-tooltip.bottom :title="__('Download asset')" :href="link.directAssetUrl">
-            <icon name="package" class="align-middle gl-mr-2 align-text-bottom" />
+            <gl-icon name="package" class="align-middle gl-mr-2 align-text-bottom" />
             {{ link.name }}
             <span v-if="link.external" data-testid="external-link-indicator">{{
               __('(external source)')
@@ -174,9 +172,9 @@ export default {
           aria-haspopup="true"
           aria-expanded="false"
         >
-          <icon name="doc-code" class="align-top gl-mr-2" />
+          <gl-icon name="doc-code" class="align-top gl-mr-2" />
           {{ __('Source code') }}
-          <icon name="chevron-down" />
+          <gl-icon name="chevron-down" />
         </button>
 
         <div class="js-sources-dropdown dropdown-menu">

app/assets/javascripts/releases/components/release_block_footer.vue

 <script>
-import { GlTooltipDirective, GlLink } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlTooltipDirective, GlLink, GlIcon } from '@gitlab/ui';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import { __, sprintf } from '~/locale';
@@ -8,7 +7,7 @@ import { __, sprintf } from '~/locale';
 export default {
   name: 'ReleaseBlockFooter',
   components: {
-    Icon,
+    GlIcon,
     GlLink,
     UserAvatarLink,
   },
@@ -68,7 +67,7 @@ export default {
 <template>
   <div>
     <div v-if="commit" class="float-left mr-3 d-flex align-items-center js-commit-info">
-      <icon ref="commitIcon" name="commit" class="mr-1" />
+      <gl-icon ref="commitIcon" name="commit" class="mr-1" />
       <div v-gl-tooltip.bottom :title="commit.title">
         <gl-link v-if="commitPath" :href="commitPath">
           {{ commit.shortId }}
@@ -78,7 +77,7 @@ export default {
     </div>
 
     <div v-if="tagName" class="float-left mr-3 d-flex align-items-center js-tag-info">
-      <icon name="tag" class="mr-1" />
+      <gl-icon name="tag" class="mr-1" />
       <div v-gl-tooltip.bottom :title="__('Tag')">
         <gl-link v-if="tagPath" :href="tagPath">
           {{ tagName }}

app/assets/javascripts/releases/components/release_block_header.vue

 <script>
-import { GlTooltipDirective, GlLink, GlBadge, GlButton } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlTooltipDirective, GlLink, GlBadge, GlButton, GlIcon } from '@gitlab/ui';
 import { BACK_URL_PARAM } from '~/releases/constants';
 import { setUrlParams } from '~/lib/utils/url_utility';
 
@@ -9,7 +8,7 @@ export default {
   components: {
     GlLink,
     GlBadge,
-    Icon,
+    GlIcon,
     GlButton,
   },
   directives: {
@@ -60,7 +59,7 @@ export default {
       :title="__('Edit this release')"
       :href="editLink"
     >
-      <icon name="pencil" />
+      <gl-icon name="pencil" />
     </gl-button>
   </div>
 </template>

app/assets/javascripts/releases/components/release_block_metadata.vue

 <script>
-import { GlTooltipDirective, GlLink } from '@gitlab/ui';
+import { GlTooltipDirective, GlLink, GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import ReleaseBlockAuthor from './release_block_author.vue';
 import ReleaseBlockMilestones from './release_block_milestones.vue';
@@ -9,7 +8,7 @@ import ReleaseBlockMilestones from './release_block_milestones.vue';
 export default {
   name: 'ReleaseBlockMetadata',
   components: {
-    Icon,
+    GlIcon,
     GlLink,
     ReleaseBlockAuthor,
     ReleaseBlockMilestones,
@@ -58,7 +57,7 @@ export default {
 <template>
   <div class="card-subtitle d-flex flex-wrap text-secondary">
     <div class="gl-mr-3">
-      <icon name="commit" class="align-middle" />
+      <gl-icon name="commit" class="align-middle" />
       <gl-link v-if="commitUrl" v-gl-tooltip.bottom :title="commit.title" :href="commitUrl">
         {{ commit.shortId }}
       </gl-link>
@@ -66,7 +65,7 @@ export default {
     </div>
 
     <div class="gl-mr-3">
-      <icon name="tag" class="align-middle" />
+      <gl-icon name="tag" class="align-middle" />
       <gl-link v-if="tagUrl" v-gl-tooltip.bottom :title="__('Tag')" :href="tagUrl">
         {{ release.tagName }}
       </gl-link>

app/assets/javascripts/releases/components/release_block_milestones.vue

 <script>
-import { GlTooltipDirective, GlLink } from '@gitlab/ui';
+import { GlTooltipDirective, GlLink, GlIcon } from '@gitlab/ui';
 import { n__ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   name: 'ReleaseBlockMilestones',
   components: {
     GlLink,
-    Icon,
+    GlIcon,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -29,7 +28,7 @@ export default {
 <template>
   <div>
     <div class="js-milestone-list-label">
-      <icon name="flag" class="align-middle" />
+      <gl-icon name="flag" class="align-middle" />
       <span class="js-label-text">{{ labelText }}</span>
     </div>
 

app/assets/javascripts/reports/components/issue_status_icon.vue

 <script>
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import { STATUS_FAILED, STATUS_NEUTRAL, STATUS_SUCCESS } from '../constants';
 
 export default {
   name: 'IssueStatusIcon',
   components: {
-    Icon,
+    GlIcon,
   },
   props: {
     status: {
@@ -49,6 +49,6 @@ export default {
     }"
     class="report-block-list-icon"
   >
-    <icon :name="iconName" :size="statusIconSize" :data-qa-selector="`status_${status}_icon`" />
+    <gl-icon :name="iconName" :size="statusIconSize" :data-qa-selector="`status_${status}_icon`" />
   </div>
 </template>

app/assets/javascripts/repository/components/breadcrumbs.vue

@@ -4,10 +4,10 @@ import {
   GlDeprecatedDropdownDivider,
   GlDeprecatedDropdownHeader,
   GlDeprecatedDropdownItem,
+  GlIcon,
 } from '@gitlab/ui';
 import { joinPaths, escapeFileUrl } from '~/lib/utils/url_utility';
 import { __ } from '../../locale';
-import Icon from '../../vue_shared/components/icon.vue';
 import getRefMixin from '../mixins/get_ref';
 import projectShortPathQuery from '../queries/project_short_path.query.graphql';
 import projectPathQuery from '../queries/project_path.query.graphql';
@@ -24,7 +24,7 @@ export default {
     GlDeprecatedDropdownDivider,
     GlDeprecatedDropdownHeader,
     GlDeprecatedDropdownItem,
-    Icon,
+    GlIcon,
   },
   apollo: {
     projectShortPath: {
@@ -249,8 +249,8 @@ export default {
         <gl-deprecated-dropdown toggle-class="add-to-tree qa-add-to-tree ml-1">
           <template #button-content>
             <span class="sr-only">{{ __('Add to tree') }}</span>
-            <icon name="plus" :size="16" class="float-left" />
-            <icon name="chevron-down" :size="16" class="float-left" />
+            <gl-icon name="plus" :size="16" class="float-left" />
+            <gl-icon name="chevron-down" :size="16" class="float-left" />
           </template>
           <template v-for="(item, i) in dropdownItems">
             <component :is="getComponent(item.type)" :key="i" v-bind="item.attrs">

app/assets/javascripts/repository/components/last_commit.vue

 <script>
-import { GlTooltipDirective, GlLink, GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlTooltipDirective, GlLink, GlDeprecatedButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import defaultAvatarUrl from 'images/no_avatar.png';
 import { sprintf, s__ } from '~/locale';
-import Icon from '../../vue_shared/components/icon.vue';
 import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import TimeagoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
 import CiIcon from '../../vue_shared/components/ci_icon.vue';
@@ -13,7 +12,7 @@ import pathLastCommitQuery from '../queries/path_last_commit.query.graphql';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     UserAvatarLink,
     TimeagoTooltip,
     ClipboardButton,
@@ -130,7 +129,7 @@ export default {
             class="text-expander"
             @click="toggleShowDescription"
           >
-            <icon name="ellipsis_h" :size="10" />
+            <gl-icon name="ellipsis_h" :size="10" />
           </gl-deprecated-button>
           <div class="committer">
             <gl-link

app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue

 <script>
 import $ from 'jquery';
 import GfmAutoComplete from 'ee_else_ce/gfm_auto_complete';
-import { GlModal, GlTooltipDirective } from '@gitlab/ui';
+import { GlModal, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
-import Icon from '~/vue_shared/components/icon.vue';
 import { __, s__ } from '~/locale';
 import Api from '~/api';
 import eventHub from './event_hub';
@@ -14,7 +13,7 @@ const emojiMenuClass = 'js-modal-status-emoji-menu';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     GlModal,
   },
   directives: {
@@ -196,9 +195,9 @@ export default {
                 v-show="noEmoji"
                 class="js-no-emoji-placeholder no-emoji-placeholder position-relative"
               >
-                <icon name="slight-smile" class="award-control-icon-neutral" />
-                <icon name="smiley" class="award-control-icon-positive" />
-                <icon name="smile" class="award-control-icon-super-positive" />
+                <gl-icon name="slight-smile" class="award-control-icon-neutral" />
+                <gl-icon name="smiley" class="award-control-icon-positive" />
+                <gl-icon name="smile" class="award-control-icon-super-positive" />
               </span>
             </button>
           </span>
@@ -223,7 +222,7 @@ export default {
               class="js-clear-user-status-button clear-user-status btn"
               @click="clearStatusInputs()"
             >
-              <icon name="close" />
+              <gl-icon name="close" />
             </button>
           </span>
         </div>

app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue

 <script>
 import { mapState } from 'vuex';
+import { GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import tooltip from '~/vue_shared/directives/tooltip';
-import Icon from '~/vue_shared/components/icon.vue';
 import eventHub from '~/sidebar/event_hub';
 import EditForm from './edit_form.vue';
 
 export default {
   components: {
     EditForm,
-    Icon,
+    GlIcon,
   },
   directives: {
     tooltip,
@@ -81,7 +81,7 @@ export default {
       data-boundary="viewport"
       @click="toggleForm"
     >
-      <icon :name="confidentialityIcon" aria-hidden="true" />
+      <gl-icon :name="confidentialityIcon" aria-hidden="true" />
     </div>
     <div class="title hide-collapsed">
       {{ __('Confidentiality') }}
@@ -105,11 +105,11 @@ export default {
         :issuable-type="issuableType"
       />
       <div v-if="!confidential" class="no-value sidebar-item-value" data-testid="not-confidential">
-        <icon :size="16" name="eye" aria-hidden="true" class="sidebar-item-icon inline" />
+        <gl-icon :size="16" name="eye" aria-hidden="true" class="sidebar-item-icon inline" />
         {{ __('Not confidential') }}
       </div>
       <div v-else class="value sidebar-item-value hide-collapsed">
-        <icon
+        <gl-icon
           :size="16"
           name="eye-slash"
           aria-hidden="true"

app/assets/javascripts/sidebar/components/lock/issuable_lock_form.vue

 <script>
 import { mapGetters } from 'vuex';
+import { GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 import tooltip from '~/vue_shared/directives/tooltip';
-import Icon from '~/vue_shared/components/icon.vue';
 import eventHub from '~/sidebar/event_hub';
 import editForm from './edit_form.vue';
 
@@ -22,7 +22,7 @@ export default {
   },
   components: {
     editForm,
-    Icon,
+    GlIcon,
   },
 
   directives: {
@@ -88,7 +88,7 @@ export default {
       data-boundary="viewport"
       @click="toggleForm"
     >
-      <icon :name="lockStatus.icon" class="sidebar-item-icon is-active" />
+      <gl-icon :name="lockStatus.icon" class="sidebar-item-icon is-active" />
     </div>
 
     <div class="title hide-collapsed">
@@ -116,7 +116,7 @@ export default {
       />
 
       <div data-testid="lock-status" class="sidebar-item-value" :class="lockStatus.class">
-        <icon
+        <gl-icon
           :size="16"
           :name="lockStatus.icon"
           class="sidebar-item-icon"

app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 import Tracking from '~/tracking';
-import icon from '~/vue_shared/components/icon.vue';
 import toggleButton from '~/vue_shared/components/toggle_button.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
 import eventHub from '../../event_hub';
@@ -16,7 +16,7 @@ export default {
     tooltip,
   },
   components: {
-    icon,
+    GlIcon,
     toggleButton,
   },
   mixins: [Tracking.mixin({ label: 'right_sidebar' })],
@@ -118,7 +118,7 @@ export default {
       data-boundary="viewport"
       @click="onClickCollapsedIcon"
     >
-      <icon
+      <gl-icon
         :name="notificationIcon"
         :size="16"
         aria-hidden="true"

app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
-import icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
 
 export default {
   name: 'TimeTrackingCollapsedState',
   components: {
-    icon,
+    GlIcon,
   },
   directives: {
     tooltip,
@@ -105,7 +105,7 @@ export default {
     data-placement="left"
     data-boundary="viewport"
   >
-    <icon name="timer" />
+    <gl-icon name="timer" />
     <div class="time-tracking-collapsed-summary">
       <div :class="divClass">
         <span :class="spanClass"> {{ text }} </span>

app/assets/javascripts/sidebar/components/todo_toggle/todo.vue

 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 import tooltip from '~/vue_shared/directives/tooltip';
 
-import Icon from '~/vue_shared/components/icon.vue';
-
 const MARK_TEXT = __('Mark as done');
 const TODO_TEXT = __('Add a To-Do');
 
@@ -13,7 +11,7 @@ export default {
     tooltip,
   },
   components: {
-    Icon,
+    GlIcon,
     GlLoadingIcon,
   },
   props: {
@@ -85,7 +83,7 @@ export default {
     data-boundary="viewport"
     @click="handleButtonClick"
   >
-    <icon
+    <gl-icon
       v-show="collapsedButtonIconVisible"
       :class="collapsedButtonIconClasses"
       :name="collapsedButtonIcon"

app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary_optional.vue

 <script>
-import { GlTooltipDirective, GlLink } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlTooltipDirective, GlLink, GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
     GlLink,
-    Icon,
+    GlIcon,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -35,7 +34,7 @@ export default {
       target="_blank"
       class="d-flex-center pl-1"
     >
-      <icon name="question" />
+      <gl-icon name="question" />
     </gl-link>
   </div>
 </template>

app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue

 <script>
-import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
     GlButton,
     GlLoadingIcon,
-    Icon,
+    GlIcon,
   },
   props: {
     title: {
@@ -66,7 +65,7 @@ export default {
           @click="toggleCollapsed"
         >
           <gl-loading-icon v-if="isLoading" />
-          <icon v-else :name="arrowIconName" class="js-icon" />
+          <gl-icon v-else :name="arrowIconName" class="js-icon" />
         </button>
         <gl-button
           variant="link"

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_alert_message.vue

 <script>
-import { GlLink } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlLink, GlIcon } from '@gitlab/ui';
 import { WARNING, DANGER, WARNING_MESSAGE_CLASS, DANGER_MESSAGE_CLASS } from '../constants';
 
 export default {
   name: 'MrWidgetAlertMessage',
   components: {
     GlLink,
-    Icon,
+    GlIcon,
   },
   props: {
     type: {
@@ -40,7 +39,7 @@ export default {
   <div class="m-3 ml-7" :class="messageClass">
     <slot></slot>
     <gl-link v-if="helpPath" :href="helpPath" target="_blank">
-      <icon :size="16" name="question-o" class="align-middle" />
+      <gl-icon :size="16" name="question-o" class="align-middle" />
     </gl-link>
   </div>
 </template>

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_icon.vue

 <script>
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 
 export default {
-  components: { Icon },
+  components: { GlIcon },
   props: {
     name: {
       type: String,
@@ -14,6 +14,6 @@ export default {
 
 <template>
   <div class="circle-icon-container gl-mr-3 align-self-start align-self-lg-center">
-    <icon :name="name" :size="24" />
+    <gl-icon :name="name" :size="24" />
   </div>
 </template>

app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue

 <script>
-import { GlTooltipDirective } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -36,6 +35,6 @@ export default {
     data-track-event="open_review_app"
     data-track-label="review_app"
   >
-    {{ display.text }} <icon class="fgray" name="external-link" />
+    {{ display.text }} <gl-icon class="fgray" name="external-link" />
   </a>
 </template>

app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue

 <script>
-import { GlDeprecatedButton } from '@gitlab/ui';
+import { GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { __, n__, sprintf, s__ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     GlDeprecatedButton,
   },
   props: {
@@ -86,7 +85,7 @@ export default {
         class="commit-edit-toggle square s24 gl-mr-3"
         @click.stop="toggle()"
       >
-        <icon :name="collapseIcon" :size="16" />
+        <gl-icon :name="collapseIcon" :size="16" />
       </gl-deprecated-button>
       <span v-if="expanded">{{ __('Collapse') }}</span>
       <span v-else>

app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue

 <script>
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
 import { __ } from '~/locale';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
   },
   directives: {
     tooltip,
@@ -62,7 +62,7 @@ export default {
       rel="noopener noreferrer nofollow"
       data-container="body"
     >
-      <icon name="question" />
+      <gl-icon name="question" />
     </a>
   </div>
 </template>

ee/app/assets/javascripts/sidebar/components/ancestors_tree/ancestors_tree.vue

 <script>
-import { GlLoadingIcon, GlLink, GlTooltip } from '@gitlab/ui';
+import { GlLoadingIcon, GlLink, GlTooltip, GlIcon } from '@gitlab/ui';
 import { escape } from 'lodash';
 
 import { __ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   name: 'AncestorsTree',
   components: {
-    Icon,
+    GlIcon,
     GlLoadingIcon,
     GlLink,
     GlTooltip,
@@ -66,7 +65,7 @@ export default {
 <template>
   <div class="ancestor-tree">
     <div ref="sidebarIcon" class="sidebar-collapsed-icon">
-      <div><icon name="epic" /></div>
+      <div><gl-icon name="epic" /></div>
       <span v-if="!isFetching" class="collapse-truncated-title">{{ tooltipText }}</span>
     </div>
 
@@ -78,7 +77,7 @@ export default {
     <ul v-if="!isFetching && ancestors.length" class="vertical-timeline hide-collapsed">
       <li v-for="(ancestor, id) in ancestors" :key="id" class="vertical-timeline-row d-flex">
         <div class="vertical-timeline-icon" :class="getTimelineClass(ancestor)">
-          <icon :name="getIcon(ancestor)" />
+          <gl-icon :name="getIcon(ancestor)" />
         </div>
         <div class="vertical-timeline-content">
           <gl-link :href="ancestor.url">{{ ancestor.title }}</gl-link>

ee/app/assets/javascripts/sidebar/components/weight/weight.vue

 <script>
 import $ from 'jquery';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import Tracking from '~/tracking';
 import eventHub from '~/sidebar/event_hub';
 import tooltip from '~/vue_shared/directives/tooltip';
-import icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
-    icon,
+    GlIcon,
     GlLoadingIcon,
   },
   directives: {
@@ -164,7 +163,7 @@ export default {
       data-boundary="viewport"
       @click="onCollapsedClick"
     >
-      <icon :size="16" name="weight" />
+      <gl-icon :size="16" name="weight" />
       <gl-loading-icon v-if="fetching" class="js-weight-collapsed-loading-icon" />
       <span v-else class="js-weight-collapsed-weight-label" v-html="collapsedWeightLabel"></span>
     </div>
@@ -192,7 +191,7 @@ export default {
         @keydown.enter="onSubmit"
       />
       <span v-if="!hasValidInput" class="gl-field-error">
-        <icon :size="24" name="merge-request-close-m" />
+        <gl-icon :size="24" name="merge-request-close-m" />
         {{ s__('Sidebar|Only numeral characters allowed') }}
       </span>
     </div>

ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue

 <script>
-import { GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlDeprecatedButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
 import ApprovalsList from './approvals_list.vue';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     GlDeprecatedButton,
     GlLoadingIcon,
     UserAvatarList,
@@ -75,7 +74,7 @@ export default {
         @click="toggle"
       >
         <gl-loading-icon v-if="!isCollapsed && isLoadingRules" />
-        <icon v-else :name="angleIcon" :size="16" />
+        <gl-icon v-else :name="angleIcon" :size="16" />
       </button>
       <template v-if="isCollapsed">
         <user-avatar-list :items="suggestedApproversTrimmed" :breakpoint="0" empty-text="" />

ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approved_icon.vue

 <script>
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
   },
   props: {
     isApproved: {
@@ -15,6 +15,6 @@ export default {
 </script>
 
 <template>
-  <icon v-if="isApproved" name="mobile-issue-close" class="text-success" :size="16" />
+  <gl-icon v-if="isApproved" name="mobile-issue-close" class="text-success" :size="16" />
   <div v-else class="square s16"></div>
 </template>

ee/app/assets/javascripts/vue_merge_request_widget/components/blocking_merge_requests/blocking_merge_request_body.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import RelatedIssuableItem from '~/vue_shared/components/issue/related_issuable_item.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 import { n__ } from '~/locale';
 
 export default {
   name: 'BlockingMergeRequestsBody',
-  components: { RelatedIssuableItem, Icon },
+  components: { RelatedIssuableItem, GlIcon },
   props: {
     issue: {
       type: Object,
@@ -34,7 +34,7 @@ export default {
 
 <template>
   <div v-if="issue.hiddenCount" class="p-3 d-flex align-items-center">
-    <icon class="gl-mr-3" name="eye-slash" aria-hidden="true" />
+    <gl-icon class="gl-mr-3" name="eye-slash" aria-hidden="true" />
     {{ hiddenBlockingMRsText }}
   </div>
   <related-issuable-item

ee/app/assets/javascripts/vue_merge_request_widget/components/visual_review_app_link.vue

@@ -6,8 +6,8 @@ import {
   GlModal,
   GlSearchBoxByType,
   GlModalDirective,
+  GlIcon,
 } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
 import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
 import ReviewAppLink from '~/vue_merge_request_widget/components/review_app_link.vue';
 import { s__, sprintf } from '~/locale';
@@ -19,7 +19,7 @@ export default {
     GlDeprecatedDropdownItem,
     GlModal,
     GlSearchBoxByType,
-    Icon,
+    GlIcon,
     ReviewAppLink,
     ModalCopyButton,
   },
@@ -216,7 +216,7 @@ export default {
           <gl-search-box-by-type v-model.trim="changesSearchTerm" class="m-2" />
           <template #button-content>
             {{ s__('VisualReviewApp|Open review app') }}
-            <icon class="fgray" name="external-link" />
+            <gl-icon class="fgray" name="external-link" />
           </template>
           <gl-deprecated-dropdown-item
             v-for="change in filteredChanges"

ee/spec/frontend/vue_mr_widget/components/approvals/approvals_footer_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlDeprecatedButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import ApprovalsList from 'ee/vue_merge_request_widget/components/approvals/approvals_list.vue';
 import ApprovalsFooter from 'ee/vue_merge_request_widget/components/approvals/approvals_footer.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
 
 const testSuggestedApprovers = () => Array.from({ length: 11 }, (_, i) => i).map(id => ({ id }));
@@ -22,7 +21,7 @@ describe('EE MRWidget approvals footer', () => {
   };
 
   const findToggle = () => wrapper.find('button');
-  const findToggleIcon = () => findToggle().find(Icon);
+  const findToggleIcon = () => findToggle().find(GlIcon);
   const findToggleLoadingIcon = () => findToggle().find(GlLoadingIcon);
   const findExpandButton = () => wrapper.find(GlDeprecatedButton);
   const findCollapseButton = () => wrapper.find(GlDeprecatedButton);

ee/spec/frontend/vue_mr_widget/components/approvals/approved_icon_spec.js

 import { shallowMount } from '@vue/test-utils';
 import ApprovedIcon from 'ee/vue_merge_request_widget/components/approvals/approved_icon.vue';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 
 const EXPECTED_SIZE = 16;
 
@@ -13,7 +13,7 @@ describe('EE MRWidget approved icon', () => {
     });
   };
 
-  const findIcon = () => wrapper.find(Icon);
+  const findIcon = () => wrapper.find(GlIcon);
   const findSquare = () => wrapper.find('.square');
 
   afterEach(() => {

spec/frontend/releases/components/release_block_footer_spec.js

 import { mount } from '@vue/test-utils';
-import { GlLink } from '@gitlab/ui';
+import { GlLink, GlIcon } from '@gitlab/ui';
 import { trimText } from 'helpers/text_helper';
 import { cloneDeep } from 'lodash';
 import ReleaseBlockFooter from '~/releases/components/release_block_footer.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 import { release as originalRelease } from '../mock_data';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 
@@ -56,7 +55,7 @@ describe('Release block footer', () => {
     beforeEach(() => factory());
 
     it('renders the commit icon', () => {
-      const commitIcon = commitInfoSection().find(Icon);
+      const commitIcon = commitInfoSection().find(GlIcon);
 
       expect(commitIcon.exists()).toBe(true);
       expect(commitIcon.props('name')).toBe('commit');
@@ -71,7 +70,7 @@ describe('Release block footer', () => {
     });
 
     it('renders the tag icon', () => {
-      const commitIcon = tagInfoSection().find(Icon);
+      const commitIcon = tagInfoSection().find(GlIcon);
 
       expect(commitIcon.exists()).toBe(true);
       expect(commitIcon.props('name')).toBe('tag');

spec/frontend/releases/components/release_block_spec.js

 import $ from 'jquery';
 import { mount } from '@vue/test-utils';
+import { GlIcon } from '@gitlab/ui';
 import EvidenceBlock from '~/releases/components/evidence_block.vue';
 import ReleaseBlock from '~/releases/components/release_block.vue';
 import ReleaseBlockFooter from '~/releases/components/release_block_footer.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import { release as originalRelease } from '../mock_data';
-import Icon from '~/vue_shared/components/icon.vue';
 import * as commonUtils from '~/lib/utils/common_utils';
 import { BACK_URL_PARAM } from '~/releases/constants';
 import * as urlUtility from '~/lib/utils/url_utility';
@@ -247,7 +247,7 @@ describe('Release block', () => {
       it('renders the milestone icon', () => {
         expect(
           milestoneListLabel()
-            .find(Icon)
+            .find(GlIcon)
             .exists(),
         ).toBe(true);
       });

spec/frontend/reports/components/__snapshots__/issue_status_icon_spec.js.snap

@@ -4,7 +4,7 @@ exports[`IssueStatusIcon renders "failed" state correctly 1`] = `
 <div
   class="report-block-list-icon failed"
 >
-  <icon-stub
+  <gl-icon-stub
     data-qa-selector="status_failed_icon"
     name="status_failed_borderless"
     size="24"
@@ -16,7 +16,7 @@ exports[`IssueStatusIcon renders "neutral" state correctly 1`] = `
 <div
   class="report-block-list-icon neutral"
 >
-  <icon-stub
+  <gl-icon-stub
     data-qa-selector="status_neutral_icon"
     name="dash"
     size="24"
@@ -28,7 +28,7 @@ exports[`IssueStatusIcon renders "success" state correctly 1`] = `
 <div
   class="report-block-list-icon success"
 >
-  <icon-stub
+  <gl-icon-stub
     data-qa-selector="status_success_icon"
     name="status_success_borderless"
     size="24"

spec/frontend/sidebar/__snapshots__/confidential_issue_sidebar_spec.js.snap

@@ -13,7 +13,7 @@ exports[`Confidential Issue Sidebar Block renders for confidential = false and i
     data-placement="left"
     title=""
   >
-    <icon-stub
+    <gl-icon-stub
       aria-hidden="true"
       name="eye"
       size="16"
@@ -38,7 +38,7 @@ exports[`Confidential Issue Sidebar Block renders for confidential = false and i
       class="no-value sidebar-item-value"
       data-testid="not-confidential"
     >
-      <icon-stub
+      <gl-icon-stub
         aria-hidden="true"
         class="sidebar-item-icon inline"
         name="eye"
@@ -65,7 +65,7 @@ exports[`Confidential Issue Sidebar Block renders for confidential = false and i
     data-placement="left"
     title=""
   >
-    <icon-stub
+    <gl-icon-stub
       aria-hidden="true"
       name="eye"
       size="16"
@@ -98,7 +98,7 @@ exports[`Confidential Issue Sidebar Block renders for confidential = false and i
       class="no-value sidebar-item-value"
       data-testid="not-confidential"
     >
-      <icon-stub
+      <gl-icon-stub
         aria-hidden="true"
         class="sidebar-item-icon inline"
         name="eye"
@@ -125,7 +125,7 @@ exports[`Confidential Issue Sidebar Block renders for confidential = true and is
     data-placement="left"
     title=""
   >
-    <icon-stub
+    <gl-icon-stub
       aria-hidden="true"
       name="eye-slash"
       size="16"
@@ -149,7 +149,7 @@ exports[`Confidential Issue Sidebar Block renders for confidential = true and is
     <div
       class="value sidebar-item-value hide-collapsed"
     >
-      <icon-stub
+      <gl-icon-stub
         aria-hidden="true"
         class="sidebar-item-icon inline is-active"
         name="eye-slash"
@@ -176,7 +176,7 @@ exports[`Confidential Issue Sidebar Block renders for confidential = true and is
     data-placement="left"
     title=""
   >
-    <icon-stub
+    <gl-icon-stub
       aria-hidden="true"
       name="eye-slash"
       size="16"
@@ -208,7 +208,7 @@ exports[`Confidential Issue Sidebar Block renders for confidential = true and is
     <div
       class="value sidebar-item-value hide-collapsed"
     >
-      <icon-stub
+      <gl-icon-stub
         aria-hidden="true"
         class="sidebar-item-icon inline is-active"
         name="eye-slash"

spec/frontend/sidebar/__snapshots__/todo_spec.js.snap

@@ -13,7 +13,7 @@ exports[`SidebarTodo template renders component container element with proper da
   title=""
   type="button"
 >
-  <icon-stub
+  <gl-icon-stub
     class="todo-undone"
     name="todo-done"
     size="16"

spec/frontend/sidebar/todo_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 
 import SidebarTodos from '~/sidebar/components/todo_toggle/todo.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 
 const defaultProps = {
   issuableId: 1,
@@ -45,11 +44,11 @@ describe('SidebarTodo', () => {
 
       expect(
         wrapper
-          .find(Icon)
+          .find(GlIcon)
           .classes()
           .join(' '),
       ).toStrictEqual(iconClass);
-      expect(wrapper.find(Icon).props('name')).toStrictEqual(icon);
+      expect(wrapper.find(GlIcon).props('name')).toStrictEqual(icon);
       expect(wrapper.find('button').text()).toBe(label);
     },
   );
@@ -82,7 +81,7 @@ describe('SidebarTodo', () => {
     it('renders button icon when `collapsed` prop is `true`', () => {
       createComponent({ collapsed: true });
 
-      expect(wrapper.find(Icon).props('name')).toBe('todo-done');
+      expect(wrapper.find(GlIcon).props('name')).toBe('todo-done');
     });
 
     it('renders loading icon when `isActionActive` prop is true', () => {
@@ -94,7 +93,7 @@ describe('SidebarTodo', () => {
     it('hides button icon when `isActionActive` prop is true', () => {
       createComponent({ collapsed: true, isActionActive: true });
 
-      expect(wrapper.find(Icon).isVisible()).toBe(false);
+      expect(wrapper.find(GlIcon).isVisible()).toBe(false);
     });
   });
 });

spec/frontend/vue_mr_widget/components/mr_widget_icon_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlIcon } from '@gitlab/ui';
 import MrWidgetIcon from '~/vue_merge_request_widget/components/mr_widget_icon.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 
 const TEST_ICON = 'commit';
 
@@ -21,6 +21,6 @@ describe('MrWidgetIcon', () => {
 
   it('renders icon and container', () => {
     expect(wrapper.is('.circle-icon-container')).toBe(true);
-    expect(wrapper.find(Icon).props('name')).toEqual(TEST_ICON);
+    expect(wrapper.find(GlIcon).props('name')).toEqual(TEST_ICON);
   });
 });

spec/frontend/vue_mr_widget/components/states/mr_widget_commits_header_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlIcon } from '@gitlab/ui';
 import CommitsHeader from '~/vue_merge_request_widget/components/states/commits_header.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 
 describe('Commits header component', () => {
   let wrapper;
@@ -23,7 +23,7 @@ describe('Commits header component', () => {
 
   const findHeaderWrapper = () => wrapper.find('.js-mr-widget-commits-count');
   const findCommitToggle = () => wrapper.find('.commit-edit-toggle');
-  const findIcon = () => wrapper.find(Icon);
+  const findIcon = () => wrapper.find(GlIcon);
   const findCommitsCountMessage = () => wrapper.find('.commits-count-message');
   const findTargetBranchMessage = () => wrapper.find('.label-branch');
   const findModifyButton = () => wrapper.find('.modify-message-button');