Merge branch 'leipert-icons-p-to-z' into 'master'

Utilize GitLab UI icon component: pipelines to vue_merge_request_widget

See merge request gitlab-org/gitlab!40266

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');