Automatic merge of gitlab-org/gitlab master

.gitlab/issue_templates/QA Failure.md

@@ -68,10 +68,10 @@ a nightly pipeline, select ~"found:nightly".
 
 <!--
 https://about.gitlab.com/handbook/engineering/quality/guidelines/#priorities:
-- ~P::1: Tests that are needed to verify fundamental GitLab functionality.
-- ~P::2: Tests that deal with external integrations which may take a longer time to debug and fix.
+- ~"priority::1": Tests that are needed to verify fundamental GitLab functionality.
+- ~"priority::2": Tests that deal with external integrations which may take a longer time to debug and fix.
 -->
-/label ~P::
+/label ~priority::
 
-<!-- Select the current milestone if ~P::1 or the next milestone if ~P::2. -->
+<!-- Select the current milestone if ~"priority::1" or the next milestone if ~"priority::2". -->
 /milestone %

.gitlab/merge_request_templates/Security Release.md

@@ -23,7 +23,6 @@ See [the general developer security release guidelines](https://gitlab.com/gitla
   - [ ] Ensure it's approved by an AppSec engineer.
     - If you're unsure who should approve, find the AppSec engineer associated to the issue in the [Canonical repository], or ask #sec-appsec on Slack.
     - Trigger the [`package-and-qa` build]. The docker image generated will be used by the AppSec engineer to validate the security vulnerability has been remediated.
-  - [ ] Merge request _must_ close the corresponding security issue.
 - [ ] For a backport MR targeting a versioned stable branch (`X-Y-stable-ee`)
   - [ ] Ensure it's approved by a maintainer.
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

app/assets/javascripts/environments/components/environment_actions.vue

 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { __, s__, sprintf } from '~/locale';
 import { formatTime } from '~/lib/utils/datetime_utility';
-import Icon from '~/vue_shared/components/icon.vue';
 import eventHub from '../event_hub';
 import tooltip from '../../vue_shared/directives/tooltip';
 
@@ -11,7 +10,7 @@ export default {
     tooltip,
   },
   components: {
-    Icon,
+    GlIcon,
     GlLoadingIcon,
   },
   props: {
@@ -80,8 +79,8 @@ export default {
       data-toggle="dropdown"
     >
       <span>
-        <icon name="play" />
-        <icon name="chevron-down" />
+        <gl-icon name="play" />
+        <gl-icon name="chevron-down" />
         <gl-loading-icon v-if="isLoading" />
       </span>
     </button>
@@ -97,7 +96,7 @@ export default {
         >
           <span class="flex-fill">{{ action.name }}</span>
           <span v-if="action.scheduledAt" class="text-secondary">
-            <icon name="clock" />
+            <gl-icon name="clock" />
             {{ remainingTime(action) }}
           </span>
         </button>

app/assets/javascripts/environments/components/environment_delete.vue

@@ -5,15 +5,14 @@
  */
 
 import $ from 'jquery';
-import { GlTooltipDirective } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import eventHub from '../event_hub';
 import LoadingButton from '../../vue_shared/components/loading_button.vue';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     LoadingButton,
   },
   directives: {
@@ -65,6 +64,6 @@ export default {
     data-target="#delete-environment-modal"
     @click="onClick"
   >
-    <icon name="remove" />
+    <gl-icon name="remove" />
   </loading-button>
 </template>

app/assets/javascripts/environments/components/environment_item.vue

 <script>
 /* eslint-disable @gitlab/vue-require-i18n-strings */
 import { isEmpty } from 'lodash';
-import { GlTooltipDirective } from '@gitlab/ui';
+import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import CommitComponent from '~/vue_shared/components/commit.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 import eventHub from '../event_hub';
 import ActionsComponent from './environment_actions.vue';
@@ -30,7 +29,7 @@ export default {
     ActionsComponent,
     CommitComponent,
     ExternalUrlComponent,
-    Icon,
+    GlIcon,
     MonitoringButtonComponent,
     PinComponent,
     DeleteComponent,
@@ -535,7 +534,7 @@ export default {
       </div>
 
       <span v-if="shouldRenderDeployBoard" class="deploy-board-icon" @click="toggleDeployBoard">
-        <icon :name="deployIconName" />
+        <gl-icon :name="deployIconName" />
       </span>
 
       <span
@@ -560,9 +559,9 @@ export default {
         role="button"
         @click="onClickFolder"
       >
-        <icon :name="folderIconName" class="folder-icon" />
+        <gl-icon :name="folderIconName" class="folder-icon" />
 
-        <icon name="folder" class="folder-icon" />
+        <gl-icon name="folder" class="folder-icon" />
 
         <span> {{ model.folderName }} </span>
 

app/assets/javascripts/environments/components/environment_monitoring.vue

 <script>
-import { GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui';
+import { GlDeprecatedButton, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 /**
  * Renders the Monitoring (Metrics) link in environments table.
  */
-import Icon from '~/vue_shared/components/icon.vue';
-
 export default {
   components: {
-    Icon,
+    GlIcon,
     GlDeprecatedButton,
   },
   directives: {
@@ -37,6 +35,6 @@ export default {
     rel="noopener noreferrer nofollow"
     variant="default"
   >
-    <icon name="chart" />
+    <gl-icon name="chart" />
   </gl-deprecated-button>
 </template>

app/assets/javascripts/environments/components/environment_pin.vue

@@ -3,14 +3,13 @@
  * Renders a prevent auto-stop button.
  * Used in environments table.
  */
-import { GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlDeprecatedButton, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 import eventHub from '../event_hub';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     GlDeprecatedButton,
   },
   directives: {
@@ -37,6 +36,6 @@ export default {
     :aria-label="$options.title"
     @click="onPinClick"
   >
-    <icon name="thumbtack" />
+    <gl-icon name="thumbtack" />
   </gl-deprecated-button>
 </template>

app/assets/javascripts/environments/components/environment_rollback.vue

@@ -10,14 +10,14 @@ import {
   GlLoadingIcon,
   GlModalDirective,
   GlDeprecatedButton,
+  GlIcon,
 } from '@gitlab/ui';
 import { s__ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import eventHub from '../event_hub';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     GlLoadingIcon,
     GlDeprecatedButton,
   },
@@ -81,7 +81,7 @@ export default {
     class="d-none d-md-block text-secondary"
     @click="onClick"
   >
-    <icon v-if="isLastDeployment" name="repeat" /> <icon v-else name="redo" />
+    <gl-icon v-if="isLastDeployment" name="repeat" /> <gl-icon v-else name="redo" />
     <gl-loading-icon v-if="isLoading" />
   </gl-deprecated-button>
 </template>

app/assets/javascripts/environments/components/environment_terminal_button.vue

@@ -3,13 +3,12 @@
  * Renders a terminal button to open a web terminal.
  * Used in environments table.
  */
-import { GlTooltipDirective } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -42,6 +41,6 @@ export default {
     :class="{ disabled: disabled }"
     class="btn terminal-button d-none d-sm-none d-md-block text-secondary"
   >
-    <icon name="terminal" />
+    <gl-icon name="terminal" />
   </a>
 </template>

app/assets/javascripts/error_tracking/components/error_details.vue

@@ -11,10 +11,10 @@ import {
   GlDeprecatedDropdown,
   GlDeprecatedDropdownItem,
   GlDeprecatedDropdownDivider,
+  GlIcon,
 } from '@gitlab/ui';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { __, sprintf, n__ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 import Stacktrace from './stacktrace.vue';
 import TrackEventDirective from '~/vue_shared/directives/track_event';
@@ -38,7 +38,7 @@ export default {
     GlLink,
     GlLoadingIcon,
     TooltipOnTruncate,
-    Icon,
+    GlIcon,
     Stacktrace,
     GlBadge,
     GlAlert,
@@ -397,7 +397,7 @@ export default {
               data-testid="external-url-link"
             >
               <span class="text-truncate">{{ error.externalUrl }}</span>
-              <icon name="external-link" class="ml-1 flex-shrink-0" />
+              <gl-icon name="external-link" class="ml-1 flex-shrink-0" />
             </gl-link>
           </li>
           <li v-if="error.firstReleaseVersion">

app/assets/javascripts/error_tracking/components/stacktrace_entry.vue

 <script>
-import { GlTooltip, GlSprintf } from '@gitlab/ui';
+import { GlTooltip, GlSprintf, GlIcon } from '@gitlab/ui';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
     ClipboardButton,
     FileIcon,
-    Icon,
+    GlIcon,
     GlSprintf,
   },
   directives: {
@@ -80,7 +79,7 @@ export default {
     <div ref="header" class="file-title file-title-flex-parent">
       <div class="file-header-content d-flex align-content-center">
         <div v-if="hasCode" class="d-inline-block cursor-pointer" @click="toggle()">
-          <icon :name="collapseIcon" :size="16" aria-hidden="true" class="gl-mr-2" />
+          <gl-icon :name="collapseIcon" :size="16" aria-hidden="true" class="gl-mr-2" />
         </div>
         <file-icon :file-name="filePath" :size="18" aria-hidden="true" css-classes="gl-mr-2" />
         <strong

app/assets/javascripts/error_tracking_settings/components/error_tracking_form.vue

 <script>
 import { mapActions, mapState } from 'vuex';
-import { GlFormInput } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlFormInput, GlIcon } from '@gitlab/ui';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
 
 export default {
-  components: { GlFormInput, Icon, LoadingButton },
+  components: { GlFormInput, GlIcon, LoadingButton },
   computed: {
     ...mapState(['apiHost', 'connectError', 'connectSuccessful', 'isLoadingProjects', 'token']),
     tokenInputState() {
@@ -64,7 +63,7 @@ export default {
             :loading="isLoadingProjects"
             @click="fetchProjects"
           />
-          <icon
+          <gl-icon
             v-show="connectSuccessful"
             class="js-error-tracking-connect-success gl-ml-2 text-success align-middle"
             :aria-label="__('Projects Successfully Retrieved')"

app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue

 <script>
 import { debounce } from 'lodash';
 import { mapActions } from 'vuex';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import eventHub from '../event_hub';
 import frequentItemsMixin from './frequent_items_mixin';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
   },
   mixins: [frequentItemsMixin],
   data() {
@@ -49,6 +49,6 @@ export default {
       type="search"
       class="form-control"
     />
-    <icon v-if="!searchQuery" name="search" class="search-icon" />
+    <gl-icon v-if="!searchQuery" name="search" class="search-icon" />
   </div>
 </template>

app/assets/javascripts/grafana_integration/components/grafana_integration.vue

 <script>
-import { GlButton, GlFormGroup, GlFormInput, GlFormCheckbox } from '@gitlab/ui';
+import { GlButton, GlFormGroup, GlFormInput, GlFormCheckbox, GlIcon } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
@@ -9,7 +8,7 @@ export default {
     GlFormCheckbox,
     GlFormGroup,
     GlFormInput,
-    Icon,
+    GlIcon,
   },
   data() {
     return { placeholderUrl: 'https://my-url.grafana.net/' };
@@ -89,7 +88,7 @@ export default {
               rel="noopener noreferrer"
             >
               {{ __('More information') }}
-              <icon name="external-link" class="vertical-align-middle" />
+              <gl-icon name="external-link" class="vertical-align-middle" />
             </a>
           </p>
         </gl-form-group>

app/assets/javascripts/groups/components/item_actions.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
-import icon from '~/vue_shared/components/icon.vue';
 import eventHub from '../event_hub';
 import { COMMON_STR } from '../constants';
 
 export default {
   components: {
-    icon,
+    GlIcon,
   },
   directives: {
     tooltip,
@@ -56,7 +56,7 @@ export default {
       class="leave-group btn btn-xs no-expand gl-text-gray-500 gl-ml-5"
       @click.prevent="onLeaveGroup"
     >
-      <icon name="leave" class="position-top-0" />
+      <gl-icon name="leave" class="position-top-0" />
     </a>
     <a
       v-if="group.canEdit"
@@ -68,7 +68,7 @@ export default {
       data-placement="bottom"
       class="edit-group btn btn-xs no-expand gl-text-gray-500 gl-ml-5"
     >
-      <icon name="settings" class="position-top-0 align-middle" />
+      <gl-icon name="settings" class="position-top-0 align-middle" />
     </a>
   </div>
 </template>

app/assets/javascripts/groups/components/item_caret.vue

 <script>
-import icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
-    icon,
+    GlIcon,
   },
   props: {
     isGroupOpen: {
@@ -21,5 +21,5 @@ export default {
 </script>
 
 <template>
-  <span class="folder-caret gl-mr-2"> <icon :size="10" :name="iconClass" /> </span>
+  <span class="folder-caret gl-mr-2"> <gl-icon :size="10" :name="iconClass" /> </span>
 </template>

app/assets/javascripts/groups/components/item_stats_value.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
-import icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
-    icon,
+    GlIcon,
   },
   directives: {
     tooltip,
@@ -57,6 +57,6 @@ export default {
     :title="title"
     data-container="body"
   >
-    <icon :name="iconName" /> <span v-if="isValuePresent" class="stat-value"> {{ value }} </span>
+    <gl-icon :name="iconName" /> <span v-if="isValuePresent" class="stat-value"> {{ value }} </span>
   </span>
 </template>

app/assets/javascripts/groups/components/item_type_icon.vue

 <script>
-import icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import { ITEM_TYPE } from '../constants';
 
 export default {
   components: {
-    icon,
+    GlIcon,
   },
   props: {
     itemType: {
@@ -29,5 +29,5 @@ export default {
 </script>
 
 <template>
-  <span class="item-type-icon"> <icon :name="iconClass" /> </span>
+  <span class="item-type-icon"> <gl-icon :name="iconClass" /> </span>
 </template>

app/assets/javascripts/ide/components/activity_bar.vue

 <script>
 import $ from 'jquery';
 import { mapActions, mapState } from 'vuex';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
 import { leftSidebarViews } from '../constants';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
   },
   directives: {
     tooltip,
@@ -48,7 +48,7 @@ export default {
           class="ide-sidebar-link js-ide-edit-mode"
           @click.prevent="changedActivityView($event, $options.leftSidebarViews.edit.name)"
         >
-          <icon name="code" />
+          <gl-icon name="code" />
         </button>
       </li>
       <li>
@@ -65,7 +65,7 @@ export default {
           class="ide-sidebar-link js-ide-review-mode"
           @click.prevent="changedActivityView($event, $options.leftSidebarViews.review.name)"
         >
-          <icon name="file-modified" />
+          <gl-icon name="file-modified" />
         </button>
       </li>
       <li>
@@ -82,7 +82,7 @@ export default {
           class="ide-sidebar-link js-ide-commit-mode qa-commit-mode-tab"
           @click.prevent="changedActivityView($event, $options.leftSidebarViews.commit.name)"
         >
-          <icon name="commit" />
+          <gl-icon name="commit" />
         </button>
       </li>
     </ul>

app/assets/javascripts/ide/components/branches/item.vue

 <script>
 /* eslint-disable @gitlab/vue-require-i18n-strings */
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import Timeago from '~/vue_shared/components/time_ago_tooltip.vue';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     Timeago,
   },
   props: {
@@ -34,7 +34,7 @@ export default {
 <template>
   <a :href="branchHref" class="btn-link d-flex align-items-center">
     <span class="d-flex gl-mr-3 ide-search-list-current-icon">
-      <icon v-if="isActive" :size="18" name="mobile-issue-close" />
+      <gl-icon v-if="isActive" :size="18" name="mobile-issue-close" />
     </span>
     <span>
       <strong> {{ item.name }} </strong>

app/assets/javascripts/ide/components/branches/search_list.vue

 <script>
 import { mapActions, mapState } from 'vuex';
 import { debounce } from 'lodash';
-import { GlLoadingIcon } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import Item from './item.vue';
 
 export default {
   components: {
     Item,
-    Icon,
+    GlIcon,
     GlLoadingIcon,
   },
   data() {
@@ -67,7 +66,7 @@ export default {
         class="form-control dropdown-input-field"
         @input="searchBranches"
       />
-      <icon :size="18" name="search" class="ml-3 input-icon" />
+      <gl-icon :size="18" name="search" class="ml-3 input-icon" />
     </label>
     <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
       <gl-loading-icon

app/assets/javascripts/ide/components/commit_sidebar/list.vue

 <script>
 import { mapActions } from 'vuex';
-import { GlModal } from '@gitlab/ui';
+import { GlModal, GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
 import ListItem from './list_item.vue';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     ListItem,
     GlModal,
   },
@@ -74,7 +73,7 @@ export default {
   <div class="ide-commit-list-container">
     <header class="multi-file-commit-panel-header d-flex mb-0">
       <div class="d-flex align-items-center flex-fill">
-        <icon v-once :name="iconName" :size="18" class="gl-mr-3" />
+        <gl-icon v-once :name="iconName" :size="18" class="gl-mr-3" />
         <strong> {{ titleText }} </strong>
         <div class="d-flex ml-auto">
           <button
@@ -93,7 +92,7 @@ export default {
             data-boundary="viewport"
             @click="openDiscardModal"
           >
-            <icon :size="16" name="remove-all" class="ml-auto mr-auto position-top-0" />
+            <gl-icon :size="16" name="remove-all" class="ml-auto mr-auto position-top-0" />
           </button>
         </div>
       </div>

app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue

 <script>
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
 import { sprintf, n__, __ } from '~/locale';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
   },
   directives: {
     tooltip,
@@ -77,7 +77,7 @@ export default {
       data-placement="left"
       class="gl-mb-5"
     >
-      <icon v-once :name="iconName" :size="18" />
+      <gl-icon v-once :name="iconName" :size="18" />
     </div>
     <div
       v-tooltip
@@ -86,7 +86,7 @@ export default {
       data-placement="left"
       class="gl-mb-3"
     >
-      <icon :name="additionIconName" :size="18" :class="addedFilesIconClass" />
+      <gl-icon :name="additionIconName" :size="18" :class="addedFilesIconClass" />
     </div>
     {{ addedFilesLength }}
     <div
@@ -96,7 +96,7 @@ export default {
       data-placement="left"
       class="gl-mt-3 gl-mb-3"
     >
-      <icon :name="modifiedIconName" :size="18" :class="modifiedFilesClass" />
+      <gl-icon :name="modifiedIconName" :size="18" :class="modifiedFilesClass" />
     </div>
     {{ modifiedFilesLength }}
   </div>

app/assets/javascripts/ide/components/commit_sidebar/list_item.vue

 <script>
 import { mapActions } from 'vuex';
+import { GlIcon } from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
-import Icon from '~/vue_shared/components/icon.vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
 import { viewerTypes } from '../../constants';
 import getCommitIconMap from '../../commit_icon';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     FileIcon,
   },
   directives: {
@@ -95,7 +95,7 @@ export default {
       </span>
       <div class="ml-auto d-flex align-items-center">
         <div class="d-flex align-items-center ide-commit-list-changed-icon">
-          <icon :name="iconName" :size="16" :class="iconClass" />
+          <gl-icon :name="iconName" :size="16" :class="iconClass" />
         </div>
       </div>
     </div>

app/assets/javascripts/ide/components/commit_sidebar/message_field.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '../../../locale';
-import Icon from '../../../vue_shared/components/icon.vue';
 import popover from '../../../vue_shared/directives/popover';
 import { MAX_TITLE_LENGTH, MAX_BODY_LENGTH } from '../../constants';
 
@@ -9,7 +9,7 @@ export default {
     popover,
   },
   components: {
-    Icon,
+    GlIcon,
   },
   props: {
     text: {
@@ -84,7 +84,7 @@ export default {
           <li>
             {{ __('Commit Message') }}
             <span v-popover="$options.popoverOptions" class="form-text text-muted gl-ml-3">
-              <icon name="question" />
+              <gl-icon name="question" />
             </span>
           </li>
         </ul>

app/assets/javascripts/ide/components/file_row_extra.vue

 <script>
 import { mapGetters } from 'vuex';
+import { GlIcon } from '@gitlab/ui';
 import { n__ } from '~/locale';
 import tooltip from '~/vue_shared/directives/tooltip';
-import Icon from '~/vue_shared/components/icon.vue';
 import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
 import NewDropdown from './new_dropdown/index.vue';
 import MrFileIcon from './mr_file_icon.vue';
@@ -13,7 +13,7 @@ export default {
     tooltip,
   },
   components: {
-    Icon,
+    GlIcon,
     NewDropdown,
     ChangedFileIcon,
     MrFileIcon,
@@ -69,7 +69,7 @@ export default {
     <mr-file-icon v-if="file.mrChange" />
     <span v-if="showTreeChangesCount" class="ide-tree-changes">
       {{ changesCount }}
-      <icon
+      <gl-icon
         v-tooltip
         :title="folderChangesTooltip"
         :size="12"

app/assets/javascripts/ide/components/ide_status_bar.vue

 <script>
 /* eslint-disable @gitlab/vue-require-i18n-strings */
 import { mapActions, mapState, mapGetters } from 'vuex';
+import { GlIcon } from '@gitlab/ui';
 import IdeStatusList from './ide_status_list.vue';
 import IdeStatusMr from './ide_status_mr.vue';
-import icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
 import timeAgoMixin from '~/vue_shared/mixins/timeago';
 import CiIcon from '../../vue_shared/components/ci_icon.vue';
@@ -12,7 +12,7 @@ import { rightSidebarViews } from '../constants';
 
 export default {
   components: {
-    icon,
+    GlIcon,
     userAvatarImage,
     CiIcon,
     IdeStatusList,
@@ -97,7 +97,7 @@ export default {
         {{ latestPipeline.details.status.text }} for
       </span>
 
-      <icon name="commit" />
+      <gl-icon name="commit" />
       <a
         v-tooltip
         :title="lastCommit.message"

app/assets/javascripts/ide/components/jobs/detail.vue

 <script>
 import { mapActions, mapState } from 'vuex';
 import { throttle } from 'lodash';
+import { GlIcon } from '@gitlab/ui';
 import { __ } from '../../../locale';
 import tooltip from '../../../vue_shared/directives/tooltip';
-import Icon from '../../../vue_shared/components/icon.vue';
 import ScrollButton from './detail/scroll_button.vue';
 import JobDescription from './detail/description.vue';
 
@@ -17,7 +17,7 @@ export default {
     tooltip,
   },
   components: {
-    Icon,
+    GlIcon,
     ScrollButton,
     JobDescription,
   },
@@ -76,7 +76,7 @@ export default {
   <div class="ide-pipeline build-page d-flex flex-column flex-fill">
     <header class="ide-job-header d-flex align-items-center">
       <button class="btn btn-default btn-sm d-flex" @click="setDetailJob(null)">
-        <icon name="chevron-left" /> {{ __('View jobs') }}
+        <gl-icon name="chevron-left" /> {{ __('View jobs') }}
       </button>
     </header>
     <div class="top-bar d-flex border-left-0 mr-3">

app/assets/javascripts/ide/components/jobs/detail/description.vue

 <script>
-import Icon from '../../../../vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import CiIcon from '../../../../vue_shared/components/ci_icon.vue';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     CiIcon,
   },
   props: {
@@ -27,7 +27,7 @@ export default {
     <span class="gl-ml-3">
       {{ job.name }}
       <a :href="job.path" target="_blank" class="ide-external-link position-relative">
-        {{ jobId }} <icon :size="12" name="external-link" />
+        {{ jobId }} <gl-icon :size="12" name="external-link" />
       </a>
     </span>
   </div>

app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import { __ } from '../../../../locale';
-import Icon from '../../../../vue_shared/components/icon.vue';
 import tooltip from '../../../../vue_shared/directives/tooltip';
 
 const directions = {
@@ -13,7 +13,7 @@ export default {
     tooltip,
   },
   components: {
-    Icon,
+    GlIcon,
   },
   props: {
     direction: {
@@ -58,7 +58,7 @@ export default {
       type="button"
       @click="clickedScroll"
     >
-      <icon :name="iconName" />
+      <gl-icon :name="iconName" />
     </button>
   </div>
 </template>

app/assets/javascripts/ide/components/jobs/stage.vue

 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import tooltip from '../../../vue_shared/directives/tooltip';
-import Icon from '../../../vue_shared/components/icon.vue';
 import CiIcon from '../../../vue_shared/components/ci_icon.vue';
 import Item from './item.vue';
 
@@ -10,7 +9,7 @@ export default {
     tooltip,
   },
   components: {
-    Icon,
+    GlIcon,
     CiIcon,
     Item,
     GlLoadingIcon,
@@ -78,7 +77,7 @@ export default {
       <div v-if="!stage.isLoading || stage.jobs.length" class="gl-mr-3 gl-ml-2">
         <span class="badge badge-pill"> {{ jobsCount }} </span>
       </div>
-      <icon :name="collapseIcon" class="ide-stage-collapse-icon" />
+      <gl-icon :name="collapseIcon" class="ide-stage-collapse-icon" />
     </div>
     <div v-show="!stage.isCollapsed" ref="jobList" class="card-body p-0">
       <gl-loading-icon v-if="showLoadingIcon" />

app/assets/javascripts/ide/components/merge_requests/item.vue

 <script>
-import Icon from '../../../vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
   },
   props: {
     item: {
@@ -41,7 +41,7 @@ export default {
 <template>
   <a :href="mergeRequestHref" class="btn-link d-flex align-items-center">
     <span class="d-flex gl-mr-3 ide-search-list-current-icon">
-      <icon v-if="isActive" :size="18" name="mobile-issue-close" />
+      <gl-icon v-if="isActive" :size="18" name="mobile-issue-close" />
     </span>
     <span>
       <strong> {{ item.title }} </strong>

app/assets/javascripts/ide/components/merge_requests/list.vue

 <script>
 import { mapActions, mapState } from 'vuex';
 import { debounce } from 'lodash';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import Item from './item.vue';
 import TokenedInput from '../shared/tokened_input.vue';
 
@@ -16,7 +15,7 @@ export default {
   components: {
     TokenedInput,
     Item,
-    Icon,
+    GlIcon,
     GlLoadingIcon,
   },
   data() {
@@ -85,7 +84,7 @@ export default {
         @input="searchMergeRequests"
         @removeToken="setSearchType(null)"
       />
-      <icon :size="18" name="search" class="ml-3 input-icon" />
+      <gl-icon :size="18" name="search" class="ml-3 input-icon" />
     </label>
     <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
       <gl-loading-icon
@@ -103,7 +102,7 @@ export default {
                 @click.stop="setSearchType(searchType)"
               >
                 <span class="d-flex gl-mr-3 ide-search-list-current-icon">
-                  <icon :size="18" name="search" />
+                  <gl-icon :size="18" name="search" />
                 </span>
                 <span>{{ searchType.label }}</span>
               </button>

app/assets/javascripts/ide/components/mr_file_icon.vue

 <script>
-import icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
 
 export default {
   components: {
-    icon,
+    GlIcon,
   },
   directives: {
     tooltip,
@@ -13,7 +13,7 @@ export default {
 </script>
 
 <template>
-  <icon
+  <gl-icon
     v-tooltip
     :title="__('Part of merge request changes')"
     :size="12"

app/assets/javascripts/ide/components/nav_dropdown_button.vue

 <script>
 import { mapState } from 'vuex';
+import { GlIcon } from '@gitlab/ui';
 import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 
 const EMPTY_LABEL = '-';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     DropdownButton,
   },
   props: {
@@ -33,10 +33,10 @@ export default {
   <dropdown-button>
     <span class="row flex-nowrap">
       <span class="col-auto flex-fill text-truncate">
-        <icon :size="16" :aria-label="__('Current Branch')" name="branch" /> {{ branchLabel }}
+        <gl-icon :size="16" :aria-label="__('Current Branch')" name="branch" /> {{ branchLabel }}
       </span>
       <span v-if="showMergeRequests" class="col-5 pl-0 text-truncate">
-        <icon :size="16" :aria-label="__('Merge Request')" name="merge-request" />
+        <gl-icon :size="16" :aria-label="__('Merge Request')" name="merge-request" />
         {{ mergeRequestLabel }}
       </span>
     </span>

app/assets/javascripts/ide/components/new_dropdown/button.vue

 <script>
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
 
 export default {
@@ -7,7 +7,7 @@ export default {
     tooltip,
   },
   components: {
-    Icon,
+    GlIcon,
   },
   props: {
     label: {
@@ -52,7 +52,7 @@ export default {
     class="btn-blank"
     @click.stop.prevent="clicked"
   >
-    <icon :name="icon" :class="iconClasses" />
+    <gl-icon :name="icon" :class="iconClasses" />
     <template v-if="showLabel">
       {{ label }}
     </template>

app/assets/javascripts/ide/components/new_dropdown/index.vue

 <script>
 import { mapActions } from 'vuex';
-import icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import upload from './upload.vue';
 import ItemButton from './button.vue';
 import { modalTypes } from '../../constants';
@@ -8,7 +8,7 @@ import NewModal from './modal.vue';
 
 export default {
   components: {
-    icon,
+    GlIcon,
     upload,
     ItemButton,
     NewModal,
@@ -67,7 +67,7 @@ export default {
         data-qa-selector="dropdown_button"
         @click.stop="openDropdown()"
       >
-        <icon name="ellipsis_v" /> <icon name="chevron-down" />
+        <gl-icon name="ellipsis_v" /> <gl-icon name="chevron-down" />
       </button>
       <ul ref="dropdownMenu" class="dropdown-menu dropdown-menu-right">
         <template v-if="type === 'tree'">

app/assets/javascripts/ide/components/panes/collapsible_sidebar.vue

 <script>
 import { mapActions, mapState } from 'vuex';
 import tooltip from '~/vue_shared/directives/tooltip';
-import Icon from '~/vue_shared/components/icon.vue';
 import IdeSidebarNav from '../ide_sidebar_nav.vue';
 
 export default {
@@ -10,7 +9,6 @@ export default {
     tooltip,
   },
   components: {
-    Icon,
     IdeSidebarNav,
   },
   props: {

app/assets/javascripts/ide/components/pipelines/list.vue

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { escape } from 'lodash';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { sprintf, __ } from '../../../locale';
-import Icon from '../../../vue_shared/components/icon.vue';
 import CiIcon from '../../../vue_shared/components/ci_icon.vue';
 import Tabs from '../../../vue_shared/components/tabs/tabs';
 import Tab from '../../../vue_shared/components/tabs/tab.vue';
@@ -14,7 +13,7 @@ import IDEServices from '~/ide/services';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     CiIcon,
     Tabs,
     Tab,
@@ -70,7 +69,7 @@ export default {
             target="_blank"
             class="ide-external-link position-relative"
           >
-            #{{ latestPipeline.id }} <icon :size="12" name="external-link" />
+            #{{ latestPipeline.id }} <gl-icon :size="12" name="external-link" />
           </a>
         </span>
       </header>

app/assets/javascripts/ide/components/preview/navigator.vue

 <script>
 import { listen } from 'codesandbox-api';
-import { GlLoadingIcon } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     GlLoadingIcon,
   },
   props: {
@@ -97,7 +96,7 @@ export default {
       class="ide-navigator-btn d-flex align-items-center d-transparent border-0 bg-transparent"
       @click="back"
     >
-      <icon :size="24" name="chevron-left" class="m-auto" />
+      <gl-icon :size="24" name="chevron-left" class="m-auto" />
     </button>
     <button
       :aria-label="s__('IDE|Back')"
@@ -109,7 +108,7 @@ export default {
       class="ide-navigator-btn d-flex align-items-center d-transparent border-0 bg-transparent"
       @click="forward"
     >
-      <icon :size="24" name="chevron-right" class="m-auto" />
+      <gl-icon :size="24" name="chevron-right" class="m-auto" />
     </button>
     <button
       :aria-label="s__('IDE|Refresh preview')"
@@ -117,7 +116,7 @@ export default {
       class="ide-navigator-btn d-flex align-items-center d-transparent border-0 bg-transparent"
       @click="refresh"
     >
-      <icon :size="18" name="retry" class="m-auto" />
+      <gl-icon :size="18" name="retry" class="m-auto" />
     </button>
     <div class="position-relative w-100 gl-ml-2">
       <input

app/assets/javascripts/ide/components/repo_file_status_icon.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';
 import '~/lib/utils/datetime_utility';
 
 export default {
   components: {
-    icon,
+    GlIcon,
   },
   directives: {
     tooltip,
@@ -29,6 +29,6 @@ export default {
 
 <template>
   <span v-if="file.file_lock" v-tooltip :title="lockTooltip" data-container="body">
-    <icon name="lock" class="file-status-icon" />
+    <gl-icon name="lock" class="file-status-icon" />
   </span>
 </template>

app/assets/javascripts/ide/components/repo_tab.vue

 <script>
 import { mapActions } from 'vuex';
+import { GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 
 import FileIcon from '~/vue_shared/components/file_icon.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
 import FileStatusIcon from './repo_file_status_icon.vue';
 
@@ -11,7 +11,7 @@ export default {
   components: {
     FileStatusIcon,
     FileIcon,
-    Icon,
+    GlIcon,
     ChangedFileIcon,
   },
   props: {
@@ -91,7 +91,7 @@ export default {
       class="multi-file-tab-close"
       @click.stop.prevent="closeFile(tab)"
     >
-      <icon v-if="!showChangedIcon" :size="12" name="close" />
+      <gl-icon v-if="!showChangedIcon" :size="12" name="close" />
       <changed-file-icon v-else :file="tab" />
     </button>
   </li>

app/assets/javascripts/ide/components/shared/tokened_input.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
   },
   props: {
     placeholder: {
@@ -81,7 +81,7 @@ export default {
           >
             <div class="value-container rounded">
               <div class="value">{{ token.label }}</div>
-              <div class="remove-token inverted"><icon :size="10" name="close" /></div>
+              <div class="remove-token inverted"><gl-icon :size="10" name="close" /></div>
             </div>
           </button>
         </div>

app/assets/javascripts/ide/components/terminal_sync/terminal_sync_status.vue

 <script>
 import { throttle } from 'lodash';
-import { GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui';
+import { GlTooltipDirective, GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { mapState } from 'vuex';
-import Icon from '~/vue_shared/components/icon.vue';
 import {
   MSG_TERMINAL_SYNC_CONNECTING,
   MSG_TERMINAL_SYNC_UPLOADING,
@@ -11,7 +10,7 @@ import {
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     GlLoadingIcon,
   },
   directives: {
@@ -70,7 +69,7 @@ export default {
     <span>{{ __('Terminal') }}:</span>
     <span class="square s16 d-flex-center ml-1" :aria-label="status.text">
       <gl-loading-icon v-if="isLoading" inline size="sm" class="d-flex-center" />
-      <icon v-else-if="status.icon" :name="status.icon" :size="16" />
+      <gl-icon v-else-if="status.icon" :name="status.icon" :size="16" />
     </span>
   </div>
 </template>

app/assets/javascripts/issuable_suggestions/components/app.vue

 <script>
-import { GlTooltipDirective } from '@gitlab/ui';
+import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import Suggestion from './item.vue';
 import query from '../queries/issues.query.graphql';
 
 export default {
   components: {
     Suggestion,
-    Icon,
+    GlIcon,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -70,7 +69,7 @@ export default {
   <div v-show="showSuggestions" class="form-group row issuable-suggestions">
     <div v-once class="col-form-label col-sm-2 pt-0">
       {{ __('Similar issues') }}
-      <icon
+      <gl-icon
         v-gl-tooltip.bottom
         :title="$options.helpText"
         :aria-label="$options.helpText"

app/assets/javascripts/issuable_suggestions/components/item.vue

 <script>
 /* eslint-disable @gitlab/vue-require-i18n-strings */
 import { uniqueId } from 'lodash';
-import { GlLink, GlTooltip, GlTooltipDirective } from '@gitlab/ui';
+import { GlLink, GlTooltip, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import timeago from '~/vue_shared/mixins/timeago';
@@ -12,7 +11,7 @@ export default {
   components: {
     GlTooltip,
     GlLink,
-    Icon,
+    GlIcon,
     UserAvatarImage,
     TimeagoTooltip,
   },
@@ -68,7 +67,7 @@ export default {
 <template>
   <div class="suggestion-item">
     <div class="d-flex align-items-center">
-      <icon
+      <gl-icon
         v-if="suggestion.confidential"
         v-gl-tooltip.bottom
         :title="__('Confidential')"
@@ -84,7 +83,7 @@ export default {
       </gl-link>
     </div>
     <div class="text-secondary suggestion-footer">
-      <icon
+      <gl-icon
         ref="state"
         :name="stateIcon"
         :class="{
@@ -134,7 +133,7 @@ export default {
           :title="tooltipTitle"
           class="suggestion-help-hover gl-ml-3 text-tertiary"
         >
-          <icon :name="icon" /> {{ count }}
+          <gl-icon :name="icon" /> {{ count }}
         </span>
       </span>
     </div>

app/assets/javascripts/jobs/components/job_app.vue

 <script>
 import { throttle, isEmpty } from 'lodash';
 import { mapGetters, mapState, mapActions } from 'vuex';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
 import { polyfillSticky } from '~/lib/utils/sticky';
 import CiHeader from '~/vue_shared/components/header_ci_component.vue';
 import Callout from '~/vue_shared/components/callout.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 import EmptyState from './empty_state.vue';
 import EnvironmentsBlock from './environments_block.vue';
 import ErasedBlock from './erased_block.vue';
@@ -27,7 +26,7 @@ export default {
     EmptyState,
     EnvironmentsBlock,
     ErasedBlock,
-    Icon,
+    GlIcon,
     Log,
     LogTopBar,
     StuckBlock,
@@ -266,7 +265,7 @@ export default {
           :class="{ 'sticky-top border-bottom-0': hasTrace }"
           data-testid="archived-job"
         >
-          <icon name="lock" class="align-text-bottom" />
+          <gl-icon name="lock" class="align-text-bottom" />
           {{ __('This job is archived. Only the complete pipeline can be retried.') }}
         </div>
         <!-- job log -->

app/assets/javascripts/jobs/components/job_container_item.vue

 <script>
-import { GlLink } from '@gitlab/ui';
+import { GlLink, GlIcon } from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 import delayedJobMixin from '~/jobs/mixins/delayed_job_mixin';
 import { sprintf } from '~/locale';
 
 export default {
   components: {
     CiIcon,
-    Icon,
+    GlIcon,
     GlLink,
   },
   directives: {
@@ -56,7 +55,7 @@ export default {
       data-boundary="viewport"
       class="js-job-link d-flex"
     >
-      <icon
+      <gl-icon
         v-if="isActive"
         name="arrow-right"
         class="js-arrow-right icon-arrow-right position-absolute d-block"
@@ -66,7 +65,7 @@ export default {
 
       <span class="text-truncate w-100">{{ job.name ? job.name : job.id }}</span>
 
-      <icon v-if="job.retried" name="retry" class="js-retry-icon" />
+      <gl-icon v-if="job.retried" name="retry" class="js-retry-icon" />
     </gl-link>
   </div>
 </template>

app/assets/javascripts/jobs/components/job_log_controllers.vue

 <script>
-import { GlTooltipDirective, GlLink, GlDeprecatedButton } from '@gitlab/ui';
+import { GlTooltipDirective, GlLink, GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 import { polyfillSticky } from '~/lib/utils/sticky';
-import Icon from '~/vue_shared/components/icon.vue';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import { __, sprintf } from '~/locale';
 import scrollDown from '../svg/scroll_down.svg';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     GlLink,
     GlDeprecatedButton,
   },
@@ -95,7 +94,7 @@ export default {
         class="controllers-buttons"
         data-testid="job-raw-link-controller"
       >
-        <icon name="doc-text" />
+        <gl-icon name="doc-text" />
       </gl-link>
 
       <gl-link
@@ -108,7 +107,7 @@ export default {
         data-testid="job-log-erase-link"
         data-method="post"
       >
-        <icon name="remove" />
+        <gl-icon name="remove" />
       </gl-link>
       <!-- eo links -->
 
@@ -121,7 +120,7 @@ export default {
           data-testid="job-controller-scroll-top"
           @click="handleScrollToTop"
         >
-          <icon name="scroll_up" />
+          <gl-icon name="scroll_up" />
         </gl-deprecated-button>
       </div>
 

app/assets/javascripts/jobs/components/log/line_header.vue

 <script>
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import LineNumber from './line_number.vue';
 import DurationBadge from './duration_badge.vue';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     LineNumber,
     DurationBadge,
   },
@@ -47,7 +47,7 @@ export default {
     role="button"
     @click="handleOnClick"
   >
-    <icon :name="iconName" class="arrow position-absolute" />
+    <gl-icon :name="iconName" class="arrow position-absolute" />
     <line-number :line-number="line.lineNumber" :path="path" />
     <span
       v-for="(content, i) in line.content"

app/assets/javascripts/jobs/components/manual_variables_form.vue

 <script>
 import { uniqueId } from 'lodash';
 import { mapActions } from 'vuex';
-import { GlDeprecatedButton } from '@gitlab/ui';
+import { GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   name: 'ManualVariablesForm',
   components: {
     GlDeprecatedButton,
-    Icon,
+    GlIcon,
   },
   props: {
     action: {
@@ -141,7 +140,7 @@ export default {
               class="btn-transparent btn-blank w-25"
               @click="deleteVariable(variable.id)"
             >
-              <icon name="clear" />
+              <gl-icon name="clear" />
             </gl-deprecated-button>
           </div>
         </div>

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

 <script>
 import { isEmpty } from 'lodash';
 import { mapActions, mapState } from 'vuex';
-import { GlLink, GlDeprecatedButton } from '@gitlab/ui';
+import { GlLink, GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
-import Icon from '~/vue_shared/components/icon.vue';
 import DetailRow from './sidebar_detail_row.vue';
 import ArtifactsBlock from './artifacts_block.vue';
 import TriggerBlock from './trigger_block.vue';
@@ -19,7 +18,7 @@ export default {
     ArtifactsBlock,
     CommitBlock,
     DetailRow,
-    Icon,
+    GlIcon,
     TriggerBlock,
     StagesDropdown,
     JobsContainer,
@@ -157,7 +156,7 @@ export default {
             class="js-terminal-link btn btn-primary btn-inverted visible-md-block visible-lg-block float-left"
             target="_blank"
           >
-            {{ __('Debug') }} <icon name="external-link" :size="14" />
+            {{ __('Debug') }} <gl-icon name="external-link" :size="14" />
           </gl-link>
         </div>
 

app/assets/javascripts/monitoring/components/alert_widget_form.vue

@@ -11,12 +11,12 @@ import {
   GlNewDropdownItem as GlDropdownItem,
   GlModal,
   GlTooltipDirective,
+  GlIcon,
 } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import Translate from '~/vue_shared/translate';
 import TrackEventDirective from '~/vue_shared/directives/track_event';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import Icon from '~/vue_shared/components/icon.vue';
 import { alertsValidator, queriesValidator } from '../validators';
 import { OPERATORS } from '../constants';
 
@@ -44,7 +44,7 @@ export default {
     GlDropdownItem,
     GlModal,
     GlLink,
-    Icon,
+    GlIcon,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -242,7 +242,7 @@ export default {
         <template #description>
           <div class="d-flex align-items-center">
             {{ __('Single or combined queries') }}
-            <icon
+            <gl-icon
               v-gl-tooltip="$options.alertQueryText.descriptionTooltip"
               name="question"
               class="gl-ml-2"

app/assets/javascripts/monitoring/components/charts/time_series.vue

 <script>
 import { isEmpty, omit, throttle } from 'lodash';
-import { GlLink, GlTooltip, GlResizeObserverDirective } from '@gitlab/ui';
+import { GlLink, GlTooltip, GlResizeObserverDirective, GlIcon } from '@gitlab/ui';
 import { GlAreaChart, GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
 import { s__ } from '~/locale';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
-import Icon from '~/vue_shared/components/icon.vue';
 import { panelTypes, chartHeight, lineTypes, lineWidths, legendLayoutTypes } from '../../constants';
 import { getYAxisOptions, getTimeAxisOptions, getChartGrid, getTooltipFormatter } from './options';
 import { annotationsYAxis, generateAnnotationsSeries } from './annotations';
@@ -27,7 +26,7 @@ export default {
     GlTooltip,
     GlChartSeriesLabel,
     GlLink,
-    Icon,
+    GlIcon,
   },
   directives: {
     GlResizeObserverDirective,
@@ -407,7 +406,7 @@ export default {
           {{ __('Deployed') }}
         </template>
         <div slot="tooltipContent" class="d-flex align-items-center">
-          <icon name="commit" class="mr-2" />
+          <gl-icon name="commit" class="mr-2" />
           <gl-link :href="tooltip.commitUrl">{{ tooltip.sha }}</gl-link>
         </div>
       </template>

app/assets/javascripts/monitoring/components/dashboard.vue

@@ -2,7 +2,7 @@
 import { mapActions, mapState, mapGetters } from 'vuex';
 import VueDraggable from 'vuedraggable';
 import Mousetrap from 'mousetrap';
-import { GlButton, GlModalDirective, GlTooltipDirective } from '@gitlab/ui';
+import { GlButton, GlModalDirective, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import DashboardHeader from './dashboard_header.vue';
 import DashboardPanel from './dashboard_panel.vue';
 import { s__ } from '~/locale';
@@ -10,7 +10,6 @@ import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { ESC_KEY } from '~/lib/utils/keys';
 import { mergeUrlParams, updateHistory } from '~/lib/utils/url_utility';
 import invalidUrl from '~/lib/utils/invalid_url';
-import Icon from '~/vue_shared/components/icon.vue';
 
 import GraphGroup from './graph_group.vue';
 import EmptyState from './empty_state.vue';
@@ -33,7 +32,7 @@ export default {
     VueDraggable,
     DashboardHeader,
     DashboardPanel,
-    Icon,
+    GlIcon,
     GlButton,
     GraphGroup,
     EmptyState,
@@ -473,7 +472,7 @@ export default {
                   @click="removePanel(groupData.key, groupData.panels, graphIndex)"
                 >
                   <a class="mx-2 p-2 draggable-remove-link" :aria-label="__('Remove')">
-                    <icon name="close" />
+                    <gl-icon name="close" />
                   </a>
                 </div>
 

app/assets/javascripts/monitoring/components/dashboard_header.vue

@@ -10,10 +10,10 @@ import {
   GlSearchBoxByType,
   GlModalDirective,
   GlTooltipDirective,
+  GlIcon,
 } from '@gitlab/ui';
 import { mergeUrlParams, redirectTo } from '~/lib/utils/url_utility';
 import invalidUrl from '~/lib/utils/invalid_url';
-import Icon from '~/vue_shared/components/icon.vue';
 import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
 
 import DashboardsDropdown from './dashboards_dropdown.vue';
@@ -26,7 +26,7 @@ import { timezones } from '../format_date';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     GlButton,
     GlNewDropdown,
     GlLoadingIcon,
@@ -260,7 +260,7 @@ export default {
           target="_blank"
           rel="noopener noreferrer"
         >
-          {{ __('View full dashboard') }} <icon name="external-link" />
+          {{ __('View full dashboard') }} <gl-icon name="external-link" />
         </gl-button>
       </div>
 

app/assets/javascripts/notes/components/discussion_counter.vue

 <script>
 import { mapGetters, mapActions } from 'vuex';
-import { GlTooltipDirective } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import discussionNavigation from '../mixins/discussion_navigation';
 
 export default {
@@ -9,7 +8,7 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   components: {
-    Icon,
+    GlIcon,
   },
   mixins: [discussionNavigation],
   computed: {
@@ -60,7 +59,7 @@ export default {
           :class="{ 'line-resolve-btn is-active': allResolved, 'line-resolve-text': !allResolved }"
         >
           <template v-if="allResolved">
-            <icon name="check-circle-filled" />
+            <gl-icon name="check-circle-filled" />
             {{ __('All threads resolved') }}
           </template>
           <template v-else>
@@ -79,7 +78,7 @@ export default {
           :title="s__('Resolve all threads in new issue')"
           class="new-issue-for-discussion btn btn-default discussion-create-issue-btn"
         >
-          <icon name="issue-new" />
+          <gl-icon name="issue-new" />
         </a>
       </div>
       <div v-if="isLoggedIn && !allResolved" class="btn-group btn-group-sm" role="group">
@@ -92,7 +91,7 @@ export default {
           data-track-property="click_next_unresolved_thread_top"
           @click="jumpToNextDiscussion"
         >
-          <icon name="comment-next" />
+          <gl-icon name="comment-next" />
         </button>
       </div>
       <div class="btn-group btn-group-sm" role="group">
@@ -102,7 +101,7 @@ export default {
           class="btn btn-default toggle-all-discussions-btn"
           @click="handleExpandDiscussions"
         >
-          <icon :name="allExpanded ? 'angle-up' : 'angle-down'" />
+          <gl-icon :name="allExpanded ? 'angle-up' : 'angle-down'" />
         </button>
       </div>
     </div>

app/assets/javascripts/notes/components/discussion_filter.vue

 <script>
 import $ from 'jquery';
 import { mapGetters, mapActions } from 'vuex';
+import { GlIcon } from '@gitlab/ui';
 import { getLocationHash, doesHashExistInUrl } from '../../lib/utils/url_utility';
-import Icon from '~/vue_shared/components/icon.vue';
 import {
   DISCUSSION_FILTERS_DEFAULT_VALUE,
   HISTORY_ONLY_FILTER_VALUE,
@@ -14,7 +14,7 @@ import notesEventHub from '../event_hub';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
   },
   props: {
     filters: {
@@ -120,7 +120,7 @@ export default {
       data-toggle="dropdown"
       aria-expanded="false"
     >
-      {{ currentFilter.title }} <icon name="chevron-down" />
+      {{ currentFilter.title }} <gl-icon name="chevron-down" />
     </button>
     <div
       ref="dropdownMenu"

app/assets/javascripts/notes/components/discussion_filter_note.vue

 <script>
-import { GlButton } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlButton, GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 
 import notesEventHub from '../event_hub';
@@ -8,7 +7,7 @@ import notesEventHub from '../event_hub';
 export default {
   components: {
     GlButton,
-    Icon,
+    GlIcon,
   },
   computed: {
     timelineContent() {
@@ -35,7 +34,7 @@ export default {
 <template>
   <li class="timeline-entry note note-wrapper discussion-filter-note js-discussion-filter-note">
     <div class="timeline-icon d-none d-lg-flex">
-      <icon name="comment" />
+      <gl-icon name="comment" />
     </div>
     <div class="timeline-content">
       <div ref="timelineContent" v-html="timelineContent"></div>

app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue

 <script>
-import { GlTooltipDirective } from '@gitlab/ui';
-import icon from '~/vue_shared/components/icon.vue';
+import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import discussionNavigation from '../mixins/discussion_navigation';
 
 export default {
   name: 'JumpToNextDiscussionButton',
   components: {
-    icon,
+    GlIcon,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -33,7 +32,7 @@ export default {
       data-track-property="click_next_unresolved_thread"
       @click="jumpToNextRelativeDiscussion(fromDiscussionId)"
     >
-      <icon name="comment-next" />
+      <gl-icon name="comment-next" />
     </button>
   </div>
 </template>

app/assets/javascripts/notes/components/discussion_locked_widget.vue

 <script>
-import { GlLink } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlLink, GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import Issuable from '~/vue_shared/mixins/issuable';
 import issuableStateMixin from '../mixins/issuable_state';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     GlLink,
   },
   mixins: [Issuable, issuableStateMixin],
@@ -28,7 +27,7 @@ export default {
 <template>
   <div class="disabled-comment text-center">
     <span class="issuable-note-warning inline">
-      <icon :size="16" name="lock" class="icon" />
+      <gl-icon :size="16" name="lock" class="icon" />
       <span v-if="isProjectArchived">
         {{ projectArchivedWarning }}
         <gl-link :href="archivedProjectDocsPath" target="_blank" class="learn-more">

app/assets/javascripts/notes/components/note_actions.vue

 <script>
 import { mapGetters } from 'vuex';
-import { GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlLoadingIcon, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 import resolvedStatusMixin from '~/batch_comments/mixins/resolved_status';
-import Icon from '~/vue_shared/components/icon.vue';
 import ReplyButton from './note_actions/reply_button.vue';
 import eventHub from '~/sidebar/event_hub';
 import Api from '~/api';
@@ -12,7 +11,7 @@ import { deprecatedCreateFlash as flash } from '~/flash';
 export default {
   name: 'NoteActions',
   components: {
-    Icon,
+    GlIcon,
     ReplyButton,
     GlLoadingIcon,
   },
@@ -189,7 +188,7 @@ export default {
         @click="onResolve"
       >
         <template v-if="!isResolving">
-          <icon :name="isResolved ? 'check-circle-filled' : 'check-circle'" />
+          <gl-icon :name="isResolved ? 'check-circle-filled' : 'check-circle'" />
         </template>
         <gl-loading-icon v-else inline />
       </button>
@@ -203,9 +202,9 @@ export default {
         title="Add reaction"
         data-position="right"
       >
-        <icon class="link-highlight award-control-icon-neutral" name="slight-smile" />
-        <icon class="link-highlight award-control-icon-positive" name="smiley" />
-        <icon class="link-highlight award-control-icon-super-positive" name="smiley" />
+        <gl-icon class="link-highlight award-control-icon-neutral" name="slight-smile" />
+        <gl-icon class="link-highlight award-control-icon-positive" name="smiley" />
+        <gl-icon class="link-highlight award-control-icon-super-positive" name="smiley" />
       </a>
     </div>
     <reply-button
@@ -222,7 +221,7 @@ export default {
         class="note-action-button js-note-edit btn btn-transparent qa-note-edit-button"
         @click="onEdit"
       >
-        <icon name="pencil" class="link-highlight" />
+        <gl-icon name="pencil" class="link-highlight" />
       </button>
     </div>
     <div v-if="showDeleteAction" class="note-actions-item">
@@ -233,7 +232,7 @@ export default {
         class="note-action-button js-note-delete btn btn-transparent"
         @click="onDelete"
       >
-        <icon name="remove" class="link-highlight" />
+        <gl-icon name="remove" class="link-highlight" />
       </button>
     </div>
     <div v-else-if="shouldShowActionsDropdown" class="dropdown more-actions note-actions-item">
@@ -245,7 +244,7 @@ export default {
         data-toggle="dropdown"
         @click="closeTooltip"
       >
-        <icon class="icon" name="ellipsis_v" />
+        <gl-icon class="icon" name="ellipsis_v" />
       </button>
       <ul class="dropdown-menu more-actions-dropdown dropdown-open-left">
         <li v-if="canReportAsAbuse">

app/assets/javascripts/notes/components/note_actions/reply_button.vue

 <script>
-import { GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlTooltipDirective, GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 
 export default {
   name: 'ReplyButton',
   components: {
-    Icon,
+    GlIcon,
     GlDeprecatedButton,
   },
   directives: {
@@ -26,7 +25,7 @@ export default {
       :title="__('Reply to comment')"
       @click="$emit('startReplying')"
     >
-      <icon name="comment" class="link-highlight" />
+      <gl-icon name="comment" class="link-highlight" />
     </gl-deprecated-button>
   </div>
 </template>

app/assets/javascripts/notes/components/noteable_discussion.vue

 <script>
 import { mapActions, mapGetters } from 'vuex';
-import { GlTooltipDirective } from '@gitlab/ui';
+import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import diffLineNoteFormMixin from '~/notes/mixins/diff_line_note_form';
 import { s__, __ } from '~/locale';
 import { clearDraft, getDiscussionReplyKey } from '~/lib/utils/autosave';
-import icon from '~/vue_shared/components/icon.vue';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
 import DraftNote from '~/batch_comments/components/draft_note.vue';
 import { deprecatedCreateFlash as Flash } from '../../flash';
@@ -22,7 +21,7 @@ import DiscussionActions from './discussion_actions.vue';
 export default {
   name: 'NoteableDiscussion',
   components: {
-    icon,
+    GlIcon,
     userAvatarLink,
     diffDiscussionHeader,
     noteSignedOutWidget,

app/assets/javascripts/notes/components/toggle_replies_widget.vue

 <script>
 import { uniqBy } from 'lodash';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     UserAvatarLink,
     TimeAgoTooltip,
   },
@@ -44,7 +44,7 @@ export default {
 <template>
   <li :class="className" class="replies-toggle js-toggle-replies">
     <template v-if="collapsed">
-      <icon name="chevron-right" @click.native="toggle" />
+      <gl-icon name="chevron-right" @click.native="toggle" />
       <div>
         <user-avatar-link
           v-for="author in uniqueAuthors"
@@ -71,7 +71,7 @@ export default {
       class="collapse-replies-btn js-collapse-replies qa-collapse-replies"
       @click="toggle"
     >
-      <icon name="chevron-down" /> {{ s__('Notes|Collapse replies') }}
+      <gl-icon name="chevron-down" /> {{ s__('Notes|Collapse replies') }}
     </span>
   </li>
 </template>

app/assets/javascripts/performance_bar/components/detailed_metric.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import RequestWarning from './request_warning.vue';
 
 import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
     RequestWarning,
     GlModal: DeprecatedModal2,
-    Icon,
+    GlIcon,
   },
   props: {
     currentRequest: {
@@ -104,7 +104,7 @@ export default {
                     type="button"
                     :aria-label="__('Toggle backtrace')"
                   >
-                    <icon :size="12" name="ellipsis_h" />
+                    <gl-icon :size="12" name="ellipsis_h" />
                   </button>
                 </div>
                 <pre v-if="item.backtrace" class="backtrace-row js-toggle-content mt-2">{{

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>