Utilize GitLab UI icon component: ee/

This replaces all the usages of ~/vue_shared/components/icon.vue with
the corresponding GitLab UI component for all remaining ee/ components.

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

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

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

ee/app/assets/javascripts/analytics/productivity_analytics/components/app.vue

@@ -7,11 +7,11 @@ import {
   GlDeprecatedDropdownItem,
   GlDeprecatedButton,
   GlTooltipDirective,
+  GlIcon,
 } from '@gitlab/ui';
 import dateFormat from 'dateformat';
 import { GlColumnChart } from '@gitlab/ui/dist/charts';
 import featureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import Icon from '~/vue_shared/components/icon.vue';
 import { beginOfDayTime, endOfDayTime } from '~/lib/utils/datetime_utility';
 import MetricChart from './metric_chart.vue';
 import Scatterplot from '../../shared/components/scatterplot.vue';
@@ -28,7 +28,7 @@ export default {
     GlDeprecatedDropdownItem,
     GlColumnChart,
     GlDeprecatedButton,
-    Icon,
+    GlIcon,
     MetricChart,
     Scatterplot,
     MergeRequestTable,
@@ -313,7 +313,7 @@ export default {
                     @click="setSortField(metric.key)"
                   >
                     <span class="d-flex">
-                      <icon
+                      <gl-icon
                         class="flex-shrink-0 gl-mr-2"
                         :class="{
                           invisible: !isSelectedSortField(metric.key),
@@ -329,7 +329,7 @@ export default {
                   :title="sortTooltipTitle"
                   @click="toggleSortOrder"
                 >
-                  <icon :name="sortIcon" />
+                  <gl-icon :name="sortIcon" />
                 </gl-deprecated-button>
               </div>
             </div>

ee/app/assets/javascripts/analytics/productivity_analytics/components/metric_chart.vue

 <script>
 import { isEmpty } from 'lodash';
-import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlLoadingIcon, GlAlert } from '@gitlab/ui';
+import {
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownItem,
+  GlLoadingIcon,
+  GlAlert,
+  GlIcon,
+} from '@gitlab/ui';
 import { s__ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import httpStatusCodes from '~/lib/utils/http_status';
 
 export default {
@@ -12,7 +17,7 @@ export default {
     GlDeprecatedDropdownItem,
     GlLoadingIcon,
     GlAlert,
-    Icon,
+    GlIcon,
   },
   props: {
     title: {
@@ -106,7 +111,7 @@ export default {
             @click="$emit('metricTypeChange', metric.key)"
           >
             <span class="d-flex">
-              <icon
+              <gl-icon
                 :title="s__('MetricChart|Selected')"
                 class="flex-shrink-0 gl-mr-2"
                 :class="{

ee/app/assets/javascripts/analytics/productivity_analytics/components/mr_table.vue

 <script>
-import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlIcon } from '@gitlab/ui';
 import MergeRequestTableRow from './mr_table_row.vue';
 import Pagination from '~/vue_shared/components/pagination_links.vue';
 
@@ -8,7 +7,7 @@ export default {
   components: {
     GlDeprecatedDropdown,
     GlDeprecatedDropdownItem,
-    Icon,
+    GlIcon,
     MergeRequestTableRow,
     Pagination,
   },
@@ -79,7 +78,7 @@ export default {
                   @click="$emit('columnMetricChange', option.key)"
                 >
                   <span class="d-flex">
-                    <icon
+                    <gl-icon
                       class="flex-shrink-0 gl-mr-2"
                       :class="{
                         invisible: !isSelectedMetric(option.key),

ee/app/assets/javascripts/approvals/components/approvers_list_item.vue

 <script>
-import { GlDeprecatedButton } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 import Avatar from '~/vue_shared/components/project_avatar/default.vue';
 import HiddenGroupsItem from './hidden_groups_item.vue';
 import { TYPE_USER, TYPE_GROUP, TYPE_HIDDEN_GROUPS } from '../constants';
@@ -10,7 +9,7 @@ const types = [TYPE_USER, TYPE_GROUP, TYPE_HIDDEN_GROUPS];
 export default {
   components: {
     GlDeprecatedButton,
-    Icon,
+    GlIcon,
     Avatar,
     HiddenGroupsItem,
   },
@@ -43,7 +42,7 @@ export default {
         <avatar :project="approver" :size="24" /><span>{{ displayName }}</span>
       </template>
       <gl-deprecated-button variant="none" class="ml-auto" @click="$emit('remove', approver)">
-        <icon name="remove" :aria-label="__('Remove')" />
+        <gl-icon name="remove" :aria-label="__('Remove')" />
       </gl-deprecated-button>
     </li>
   </transition>

ee/app/assets/javascripts/approvals/components/empty_rule_name.vue

 <script>
-import { GlPopover, GlLink } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlPopover, GlLink, GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     GlPopover,
     GlLink,
   },
@@ -22,7 +21,7 @@ export default {
   <div class="d-flex align-items-center">
     <span class="mt-n1">{{ __('Any eligible user') }}</span>
     <span id="popovercontainer" class="ml-2 align-self-end">
-      <icon
+      <gl-icon
         id="pop-approver"
         tabindex="0"
         name="question"

ee/app/assets/javascripts/approvals/components/rule_controls.vue

 <script>
 import { mapState, mapActions } from 'vuex';
-import { GlButton } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlButton, GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
     GlButton,
-    Icon,
+    GlIcon,
   },
   props: {
     rule: {
@@ -34,7 +33,7 @@ export default {
       category="primary"
       @click="requestDeleteRule(rule)"
     >
-      <icon name="remove" :aria-label="__('Remove')" />
+      <gl-icon name="remove" :aria-label="__('Remove')" />
     </gl-button>
   </div>
 </template>

ee/app/assets/javascripts/billings/components/subscription_table_row.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import { dateInWords } from '~/lib/utils/datetime_utility';
-import Icon from '~/vue_shared/components/icon.vue';
 import Popover from '~/vue_shared/components/help_popover.vue';
 
 export default {
   name: 'SubscriptionTableRow',
   components: {
-    Icon,
+    GlIcon,
     Popover,
   },
   props: {
@@ -54,7 +54,7 @@ export default {
   <div class="grid-row d-flex flex-grow-1 flex-column flex-sm-column flex-md-column flex-lg-row">
     <div class="grid-cell header-cell">
       <span class="icon-wrapper">
-        <icon v-if="header.icon" class="gl-mr-3" :name="header.icon" aria-hidden="true" />
+        <gl-icon v-if="header.icon" class="gl-mr-3" :name="header.icon" aria-hidden="true" />
         {{ header.title }}
       </span>
     </div>

ee/app/assets/javascripts/clusters/components/environments.vue

 <script>
-import { GlTable, GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
+import { GlTable, GlEmptyState, GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 
 export default {
   components: {
     GlEmptyState,
     GlTable,
-    Icon,
+    GlIcon,
     TimeAgo,
     GlLoadingIcon,
     deploymentInstance: () => import('ee_component/vue_shared/components/deployment_instance.vue'),
@@ -153,7 +152,7 @@ export default {
 
         <!-- Empty state -->
         <div v-else class="deployments-empty d-flex">
-          <icon
+          <gl-icon
             name="warning"
             :size="18"
             class="cluster-deployments-warning mr-2 align-self-center flex-shrink-0"

ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment.vue

 <script>
 import { escape, isEmpty } from 'lodash';
-import { GlTooltipDirective, GlLink, GlDeprecatedBadge as GlBadge } from '@gitlab/ui';
+import { GlTooltipDirective, GlLink, GlDeprecatedBadge as GlBadge, GlIcon } from '@gitlab/ui';
 import Alerts from 'ee/vue_shared/dashboards/components/alerts.vue';
 import TimeAgo from 'ee/vue_shared/dashboards/components/time_ago.vue';
 import { STATUS_FAILED } from 'ee/vue_shared/dashboards/constants';
 import ProjectPipeline from 'ee/vue_shared/dashboards/components/project_pipeline.vue';
 import { s__, __, sprintf } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import Commit from '~/vue_shared/components/commit.vue';
@@ -22,7 +21,7 @@ export default {
     Alerts,
     ProjectPipeline,
     TimeAgo,
-    Icon,
+    GlIcon,
   },
   directives: {
     'gl-tooltip': GlTooltipDirective,
@@ -139,7 +138,7 @@ export default {
 
         <div class="col-10 col-sm-7 pr-0 pl-5 align-self-center align-middle ci-table">
           <div class="branch-commit">
-            <icon name="work" />
+            <gl-icon name="work" />
             <gl-link
               v-if="deployable"
               v-gl-tooltip="jobTooltip"

ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment_header.vue

 <script>
-import { GlLink, GlDeprecatedBadge as GlBadge, GlTooltipDirective } from '@gitlab/ui';
+import { GlLink, GlDeprecatedBadge as GlBadge, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import ReviewAppLink from '~/vue_merge_request_widget/components/review_app_link.vue';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     ReviewAppLink,
     GlBadge,
     GlLink,
@@ -64,7 +63,7 @@ export default {
         environment.size
       }}</gl-badge>
     </div>
-    <icon
+    <gl-icon
       v-if="environment.within_folder"
       v-gl-tooltip
       :title="$options.tooltips.information"

ee/app/assets/javascripts/environments_dashboard/components/dashboard/project_header.vue

 <script>
-import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
+import { GlTooltipDirective, GlLink, GlButton, GlIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     ProjectAvatar,
     GlLink,
     GlButton,
@@ -54,7 +53,7 @@ export default {
         data-toggle="dropdown"
         :title="$options.moreActionsText"
       >
-        <icon name="ellipsis_v" class="text-secondary" />
+        <gl-icon name="ellipsis_v" class="text-secondary" />
       </button>
       <ul class="dropdown-menu dropdown-menu-right">
         <li>

ee/app/assets/javascripts/epic/components/sidebar_items/sidebar_date_picker.vue

 <script>
 import { uniqueId } from 'lodash';
-import { GlLoadingIcon, GlButton } from '@gitlab/ui';
+import { GlLoadingIcon, GlButton, GlIcon } from '@gitlab/ui';
 
 import { __, s__ } from '~/locale';
 import { dateInWords } from '~/lib/utils/datetime_utility';
 
 import tooltip from '~/vue_shared/directives/tooltip';
 import popover from '~/vue_shared/directives/popover';
-import Icon from '~/vue_shared/components/icon.vue';
 import DatePicker from '~/vue_shared/components/pikaday.vue';
 import CollapsedCalendarIcon from '~/vue_shared/components/sidebar/collapsed_calendar_icon.vue';
 import ToggleSidebar from '~/vue_shared/components/sidebar/toggle_sidebar.vue';
@@ -21,7 +20,7 @@ export default {
     popover,
   },
   components: {
-    Icon,
+    GlIcon,
     DatePicker,
     CollapsedCalendarIcon,
     ToggleSidebar,
@@ -200,7 +199,12 @@ export default {
       {{ label }}
       <gl-loading-icon v-if="dateSaveInProgress" :inline="true" />
       <div class="float-right d-flex">
-        <icon v-popover="popoverOptions" name="question-o" class="help-icon gl-mr-2" tabindex="0" />
+        <gl-icon
+          v-popover="popoverOptions"
+          name="question-o"
+          class="help-icon gl-mr-2"
+          tabindex="0"
+        />
         <gl-button
           v-show="canUpdate && !editing"
           ref="editButton"
@@ -241,7 +245,7 @@ export default {
         <span v-else class="d-flex value-content gl-ml-1">
           <template v-if="dateFixed">
             <span>{{ dateFixedWords }}</span>
-            <icon
+            <gl-icon
               v-if="isDateInvalid && selectedDateIsFixed"
               v-popover="dateInvalidPopoverOptions"
               name="warning"
@@ -280,7 +284,7 @@ export default {
         />
         <span class="gl-ml-2">{{ __('Inherited:') }}</span>
         <span class="value-content gl-ml-1">{{ dateFromMilestonesWords }}</span>
-        <icon
+        <gl-icon
           v-if="isDateInvalid && !selectedDateIsFixed"
           v-popover="dateInvalidPopoverOptions"
           name="warning"

ee/app/assets/javascripts/feature_flags/components/configure_feature_flags_modal.vue

@@ -7,10 +7,10 @@ import {
   GlLoadingIcon,
   GlSprintf,
   GlLink,
+  GlIcon,
 } from '@gitlab/ui';
 import { s__, __, sprintf } from '~/locale';
 import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 import Callout from '~/vue_shared/components/callout.vue';
 
 export default {
@@ -30,7 +30,7 @@ export default {
     GlFormInput,
     GlModal,
     ModalCopyButton,
-    Icon,
+    GlIcon,
     Callout,
     GlLoadingIcon,
     GlSprintf,
@@ -217,7 +217,7 @@ export default {
       v-if="hasRotateError"
       class="text-danger d-flex align-items-center font-weight-normal mb-2"
     >
-      <icon name="warning" class="mr-1" />
+      <gl-icon name="warning" class="mr-1" />
       <span>{{ $options.instanceIdRegenerateError }}</span>
     </div>
     <callout

ee/app/assets/javascripts/feature_flags/components/environments_dropdown.vue

 <script>
 import { isEmpty } from 'lodash';
-import { GlLoadingIcon, GlDeprecatedButton } from '@gitlab/ui';
+import { GlLoadingIcon, GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 
 /**
@@ -31,7 +30,7 @@ export default {
   components: {
     GlDeprecatedButton,
     GlLoadingIcon,
-    Icon,
+    GlIcon,
   },
   props: {
     endpoint: {
@@ -172,7 +171,7 @@ export default {
 <template>
   <div>
     <div class="dropdown position-relative">
-      <icon name="search" class="seach-icon-input" />
+      <gl-icon name="search" class="seach-icon-input" />
 
       <input
         type="text"
@@ -189,7 +188,7 @@ export default {
         class="js-clear-search-input btn-transparent clear-search-input position-right-0"
         @click="clearInput"
       >
-        <icon name="clear" :aria-label="__('Clear input')" />
+        <gl-icon name="clear" :aria-label="__('Clear input')" />
       </gl-deprecated-button>
 
       <div

ee/app/assets/javascripts/geo_nodes/components/geo_node_header.vue

 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
-import icon from '~/vue_shared/components/icon.vue';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
 
 export default {
   components: {
-    icon,
+    GlIcon,
     GlLoadingIcon,
   },
   directives: {
@@ -42,7 +41,7 @@ export default {
             v-if="nodeDetailsLoading || node.nodeActionActive"
             class="node-details-loading gl-ml-3 inline"
           />
-          <icon
+          <gl-icon
             v-if="showNodeWarningIcon"
             v-tooltip
             class="ml-2 text-warning-500"

ee/app/assets/javascripts/geo_nodes/components/geo_node_sync_settings.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import { sprintf, s__, __ } from '~/locale';
 import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
 import tooltip from '~/vue_shared/directives/tooltip';
-import icon from '~/vue_shared/components/icon.vue';
-
 import { TIME_DIFF } from '../constants';
 
 export default {
@@ -11,7 +10,7 @@ export default {
     tooltip,
   },
   components: {
-    icon,
+    GlIcon,
   },
   props: {
     syncStatusUnavailable: {
@@ -122,7 +121,7 @@ export default {
       data-placement="bottom"
     >
       <strong data-testid="syncType">{{ syncType }}</strong>
-      <icon name="retry" class="ml-2" />
+      <gl-icon name="retry" class="ml-2" />
       <span v-if="!eventTimestampEmpty" class="ml-2">
         {{ syncStatusEventInfo }}
       </span>

ee/app/assets/javascripts/geo_nodes/components/node_detail_sections/section_reveal_button.vue

 <script>
-import icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
-    icon,
+    GlIcon,
   },
   props: {
     buttonTitle: {
@@ -32,7 +32,7 @@ export default {
 
 <template>
   <button class="btn-link d-flex align-items-center" type="button" @click="onClickButton">
-    <icon :size="16" :name="toggleButtonIcon" />
+    <gl-icon :size="16" :name="toggleButtonIcon" />
     <span class="gl-ml-3">{{ buttonTitle }}</span>
   </button>
 </template>

ee/app/assets/javascripts/geo_replicable/components/geo_replicable_status.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import { STATUS_ICON_NAMES, STATUS_ICON_CLASS, DEFAULT_STATUS } from '../constants';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   name: 'GeoReplicableStatus',
   components: {
-    Icon,
+    GlIcon,
   },
   props: {
     status: {
@@ -40,7 +40,7 @@ export default {
 <template>
   <div>
     <span class="d-flex align-items-center text-capitalize">
-      <icon :name="icon.name" :class="icon.cssClass" class="mr-2" />
+      <gl-icon :name="icon.name" :class="icon.cssClass" class="mr-2" />
       {{ status }}
     </span>
   </div>

ee/app/assets/javascripts/group_member_contributions/components/table_header.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
   },
   props: {
     columns: {
@@ -59,7 +59,7 @@ export default {
         class="header"
         @click="onColumnClick(column.name)"
       >
-        {{ column.text }} <icon :size="12" :name="getColumnSortIcon(column.name)" />
+        {{ column.text }} <gl-icon :size="12" :name="getColumnSortIcon(column.name)" />
       </th>
     </tr>
   </thead>

ee/app/assets/javascripts/licenses/components/cards/license_card_body.vue

 <script>
-import { GlLink } from '@gitlab/ui';
+import { GlLink, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import { Cell, HeaderCell, InfoCell, DateCell } from '../cells';
 
 export default {
   name: 'LicenseCardBody',
   components: {
-    Icon,
+    GlIcon,
     Cell,
     HeaderCell,
     InfoCell,
@@ -75,7 +74,7 @@ export default {
       v-if="isRemoving"
       class="p-5 d-flex justify-content-center align-items-center license-card-loading"
     >
-      <icon name="spinner" /><span class="ml-2">{{ __('Removing license…') }}</span>
+      <gl-icon name="spinner" /><span class="ml-2">{{ __('Removing license…') }}</span>
     </div>
 
     <div v-else class="license-table js-license-table">

ee/app/assets/javascripts/licenses/components/cells/header_cell.vue

 <script>
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import Cell from './cell.vue';
 
 export default {
   name: 'HeaderCell',
   components: {
-    Icon,
+    GlIcon,
     Cell,
   },
   props: {
@@ -24,7 +24,7 @@ export default {
 <template>
   <cell class="license-header-cell" :is-flexible="false">
     <template slot="title">
-      <icon class="icon" :name="icon" />
+      <gl-icon class="icon" :name="icon" />
       <span class="ml-2 font-weight-bold">{{ title }}</span>
     </template>
   </cell>

ee/app/assets/javascripts/licenses/components/cells/info_cell.vue

 <script>
-import { GlPopover } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlPopover, GlIcon } from '@gitlab/ui';
 import Cell from './cell.vue';
 
 export default {
   name: 'InfoCell',
   components: {
-    Icon,
+    GlIcon,
     GlPopover,
     Cell,
   },
@@ -44,7 +43,7 @@ export default {
       <span class="mr-2 text">{{ title }}</span>
 
       <button ref="popoverTarget" type="button" class="btn-link information-target">
-        <icon name="information" class="icon d-block" />
+        <gl-icon name="information" class="icon d-block" />
       </button>
 
       <gl-popover

ee/app/assets/javascripts/operations/components/dashboard/project_header.vue

 <script>
-import { GlDeprecatedButton, GlLink, GlTooltipDirective } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlDeprecatedButton, GlLink, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
 import { __ } from '~/locale';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     ProjectAvatar,
     GlDeprecatedButton,
     GlLink,
@@ -70,7 +69,7 @@ export default {
       :title="title"
       @click="onRemove"
     >
-      <icon name="remove" />
+      <gl-icon name="remove" />
     </gl-deprecated-button>
   </div>
 </template>

ee/app/assets/javascripts/related_items_tree/components/tree_item.vue

 <script>
 import { mapGetters, mapActions, mapState } from 'vuex';
 
-import { GlTooltipDirective, GlLoadingIcon, GlDeprecatedButton } from '@gitlab/ui';
+import { GlTooltipDirective, GlLoadingIcon, GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 
 import { __ } from '~/locale';
 
-import Icon from '~/vue_shared/components/icon.vue';
-
 import TreeItemBody from './tree_item_body.vue';
 
 import { ChildType } from '../constants';
@@ -14,7 +12,7 @@ import { ChildType } from '../constants';
 export default {
   ChildType,
   components: {
-    Icon,
+    GlIcon,
     TreeItemBody,
     GlLoadingIcon,
     GlDeprecatedButton,
@@ -96,7 +94,7 @@ export default {
         class="btn-svg btn-tree-item-chevron align-self-start"
         @click="handleChevronClick"
       >
-        <icon :name="chevronType" />
+        <gl-icon :name="chevronType" />
       </gl-deprecated-button>
       <gl-loading-icon v-if="childrenFetchInProgress" class="loading-icon" size="sm" />
       <tree-item-body

ee/app/assets/javascripts/roadmap/components/epic_item_timeline.vue

 <script>
-import { GlPopover, GlProgressBar } from '@gitlab/ui';
+import { GlPopover, GlProgressBar, GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import { generateKey } from '../utils/epic_utils';
 
 import CommonMixin from '../mixins/common_mixin';
@@ -23,7 +22,7 @@ export default {
   cellWidth: TIMELINE_CELL_MIN_WIDTH,
   components: {
     CurrentDayIndicator,
-    Icon,
+    GlIcon,
     GlPopover,
     GlProgressBar,
   },
@@ -185,7 +184,7 @@ export default {
               aria-hidden="true"
             />
             <div class="gl-font-sm d-flex align-items-center text-nowrap">
-              <icon class="gl-mr-1" :size="12" name="weight" />
+              <gl-icon class="gl-mr-1" :size="12" name="weight" />
               <p class="m-0" :aria-label="epicWeightPercentageText">{{ epicWeightPercentage }}%</p>
             </div>
           </div>

ee/app/assets/javascripts/security_dashboard/components/filter.vue

 <script>
-import { GlDeprecatedDropdown, GlSearchBoxByType } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlDeprecatedDropdown, GlSearchBoxByType, GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
     GlDeprecatedDropdown,
     GlSearchBoxByType,
-    Icon,
+    GlIcon,
   },
   props: {
     filter: {
@@ -83,7 +82,7 @@ export default {
           :aria-label="__('Close')"
           @click="closeDropdown"
         >
-          <icon name="close" aria-hidden="true" class="vertical-align-middle" />
+          <gl-icon name="close" aria-hidden="true" class="vertical-align-middle" />
         </button>
       </div>
 
@@ -108,7 +107,7 @@ export default {
           @click="clickFilter(option)"
         >
           <span class="d-flex">
-            <icon
+            <gl-icon
               v-if="isSelected(option)"
               class="flex-shrink-0 js-check"
               name="mobile-issue-close"

ee/app/assets/javascripts/security_dashboard/components/security_dashboard_table_row.vue

 <script>
 import { mapActions, mapState } from 'vuex';
-import { GlDeprecatedButton, GlFormCheckbox, GlSkeletonLoading, GlSprintf } from '@gitlab/ui';
+import {
+  GlDeprecatedButton,
+  GlFormCheckbox,
+  GlSkeletonLoading,
+  GlSprintf,
+  GlIcon,
+} from '@gitlab/ui';
 import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
 import convertReportType from 'ee/vue_shared/security_reports/store/utils/convert_report_type';
 import getPrimaryIdentifier from 'ee/vue_shared/security_reports/store/utils/get_primary_identifier';
-import Icon from '~/vue_shared/components/icon.vue';
 import VulnerabilityActionButtons from './vulnerability_action_buttons.vue';
 import VulnerabilityIssueLink from './vulnerability_issue_link.vue';
 import { DASHBOARD_TYPES } from '../store/constants';
@@ -16,7 +21,7 @@ export default {
     GlFormCheckbox,
     GlSkeletonLoading,
     GlSprintf,
-    Icon,
+    GlIcon,
     SeverityBadge,
     VulnerabilityActionButtons,
     VulnerabilityIssueLink,
@@ -131,7 +136,7 @@ export default {
             >{{ vulnerability.name }}</gl-deprecated-button
           >
           <template v-if="isDismissed">
-            <icon
+            <gl-icon
               v-show="vulnerability.dismissal_feedback.comment_details"
               name="comment"
               class="text-warning vertical-align-middle"

ee/app/assets/javascripts/security_dashboard/components/unscanned_projects.vue

 <script>
-import { GlDeprecatedBadge as GlBadge, GlTabs, GlTab, GlLink } from '@gitlab/ui';
+import { GlDeprecatedBadge as GlBadge, GlTabs, GlTab, GlLink, GlIcon } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
 
-import Icon from '~/vue_shared/components/icon.vue';
-
 import UnscannedProjectsTabContent from './unscanned_projects_tab_content.vue';
 
 export default {
-  components: { GlBadge, GlTabs, GlTab, GlLink, Icon, UnscannedProjectsTabContent },
+  components: { GlBadge, GlTabs, GlTab, GlLink, GlIcon, UnscannedProjectsTabContent },
   props: {
     endpoint: {
       type: String,
@@ -52,7 +50,7 @@ export default {
           :href="helpPath"
           :title="__('Project scanning help page')"
           target="_blank"
-          ><icon name="question" :size="12" class="align-top"
+          ><gl-icon name="question" :size="12" class="align-top"
         /></gl-link>
       </h4>
       <p class="text-secondary mb-0">

ee/app/assets/javascripts/security_dashboard/components/vulnerability_issue_link.vue

 <script>
-import { GlTooltipDirective } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
 
 export default {
   name: 'VulnerabilityIssueLink',
   components: {
-    Icon,
+    GlIcon,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -30,7 +29,7 @@ export default {
 
 <template>
   <div class="d-inline">
-    <icon
+    <gl-icon
       v-gl-tooltip
       name="issue-created"
       class="text-success vertical-align-middle"

ee/app/assets/javascripts/security_dashboard/components/vulnerability_severity.vue

@@ -6,10 +6,9 @@ import {
 } from 'ee/security_dashboard/store/modules/vulnerable_projects/constants';
 
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { GlLink, GlTooltipDirective } from '@gitlab/ui';
+import { GlLink, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 
 import { Accordion, AccordionItem } from 'ee/vue_shared/components/accordion';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   css: {
@@ -30,7 +29,7 @@ export default {
     },
   },
   accordionItemsContentMaxHeight: '445px',
-  components: { Accordion, AccordionItem, GlLink, Icon },
+  components: { Accordion, AccordionItem, GlLink, GlIcon },
   directives: {
     'gl-tooltip': GlTooltipDirective,
   },
@@ -82,7 +81,7 @@ export default {
           :href="helpPagePath"
           :aria-label="__('Project security status help page')"
           target="_blank"
-          ><icon name="question"
+          ><gl-icon name="question"
         /></gl-link>
       </h4>
       <p class="text-secondary gl-m-0">

ee/app/assets/javascripts/storage_counter/components/app.vue

 <script>
-import { GlLink, GlSprintf, GlModalDirective, GlButton } from '@gitlab/ui';
+import { GlLink, GlSprintf, GlModalDirective, GlButton, GlIcon } from '@gitlab/ui';
 import Project from './project.vue';
 import UsageGraph from './usage_graph.vue';
 import query from '../queries/storage.query.graphql';
 import TemporaryStorageIncreaseModal from './temporary_storage_increase_modal.vue';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import { parseBoolean } from '~/lib/utils/common_utils';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
@@ -14,7 +13,7 @@ export default {
     GlLink,
     GlButton,
     GlSprintf,
-    Icon,
+    GlIcon,
     UsageGraph,
     TemporaryStorageIncreaseModal,
   },
@@ -111,7 +110,7 @@ export default {
             target="_blank"
             :aria-label="s__('UsageQuota|Usage quotas help link')"
           >
-            <icon name="question" :size="12" />
+            <gl-icon name="question" :size="12" />
           </gl-link>
         </div>
         <div class="col-lg-6 text-lg-right">

ee/app/assets/javascripts/storage_counter/components/project.vue

 <script>
-import { GlDeprecatedButton, GlLink } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlDeprecatedButton, GlLink, GlIcon } from '@gitlab/ui';
 import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
 import { numberToHumanSize, isOdd } from '~/lib/utils/number_utils';
 import { s__ } from '~/locale';
@@ -8,7 +7,7 @@ import StorageRow from './storage_row.vue';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     GlDeprecatedButton,
     GlLink,
     ProjectAvatar,
@@ -93,7 +92,7 @@ export default {
             :aria-label="__('Toggle project')"
             @click="toggleProject"
           >
-            <icon :name="iconName" class="folder-icon" />
+            <gl-icon :name="iconName" class="folder-icon" />
           </gl-deprecated-button>
 
           <project-avatar :project="projectAvatar" :size="20" />

ee/app/assets/javascripts/subscriptions/new/components/checkout/step_header.vue

 <script>
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
   },
   props: {
     isFinished: {
@@ -19,7 +19,7 @@ export default {
 </script>
 <template>
   <div class="d-flex">
-    <icon
+    <gl-icon
       v-show="isFinished"
       class="checkmark gl-mr-3"
       :size="18"

ee/spec/frontend/analytics/productivity_analytics/components/__snapshots__/metric_chart_spec.js.snap

@@ -35,7 +35,7 @@ exports[`MetricChart component template when isLoading is false and chartData is
       <span
         class="d-flex"
       >
-        <icon-stub
+        <gl-icon-stub
           aria-label="Selected"
           class="flex-shrink-0 gl-mr-2 invisible"
           name="mobile-issue-close"
@@ -54,7 +54,7 @@ exports[`MetricChart component template when isLoading is false and chartData is
       <span
         class="d-flex"
       >
-        <icon-stub
+        <gl-icon-stub
           aria-label="Selected"
           class="flex-shrink-0 gl-mr-2 invisible"
           name="mobile-issue-close"

ee/spec/frontend/analytics/productivity_analytics/components/__snapshots__/mr_table_spec.js.snap

@@ -49,7 +49,7 @@ exports[`MergeRequestTable component matches the snapshot 1`] = `
                 <span
                   class="d-flex"
                 >
-                  <icon-stub
+                  <gl-icon-stub
                     class="flex-shrink-0 gl-mr-2 invisible"
                     name="mobile-issue-close"
                     size="16"
@@ -66,7 +66,7 @@ exports[`MergeRequestTable component matches the snapshot 1`] = `
                 <span
                   class="d-flex"
                 >
-                  <icon-stub
+                  <gl-icon-stub
                     class="flex-shrink-0 gl-mr-2"
                     name="mobile-issue-close"
                     size="16"
@@ -83,7 +83,7 @@ exports[`MergeRequestTable component matches the snapshot 1`] = `
                 <span
                   class="d-flex"
                 >
-                  <icon-stub
+                  <gl-icon-stub
                     class="flex-shrink-0 gl-mr-2 invisible"
                     name="mobile-issue-close"
                     size="16"

ee/spec/frontend/analytics/productivity_analytics/components/metric_chart_spec.js

 import { shallowMount } from '@vue/test-utils';
 import MetricChart from 'ee/analytics/productivity_analytics/components/metric_chart.vue';
-import { GlLoadingIcon, GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlAlert } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import {
+  GlLoadingIcon,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownItem,
+  GlAlert,
+  GlIcon,
+} from '@gitlab/ui';
 import httpStatusCodes from '~/lib/utils/http_status';
 
 describe('MetricChart component', () => {
@@ -155,7 +160,7 @@ describe('MetricChart component', () => {
               expect(
                 findMetricDropdownItems()
                   .at(0)
-                  .find(Icon)
+                  .find(GlIcon)
                   .classes(),
               ).toContain('invisible');
             });

ee/spec/frontend/approvals/components/rule_controls_spec.js

 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlIcon } from '@gitlab/ui';
 import MREditModule from 'ee/approvals/stores/modules/mr_edit';
 import { createStoreOptions } from 'ee/approvals/stores';
 import RuleControls from 'ee/approvals/components/rule_controls.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -12,7 +11,7 @@ localVue.use(Vuex);
 const TEST_RULE = { id: 10 };
 
 const findButtonLabel = button => {
-  const icon = button.find(Icon);
+  const icon = button.find(GlIcon);
   return icon.exists() ? icon.attributes('aria-label') : button.text();
 };
 const hasLabel = (button, label) => findButtonLabel(button) === label;

ee/spec/frontend/clusters/components/environments_spec.js

 import { mount } from '@vue/test-utils';
 import Environments from 'ee/clusters/components/environments.vue';
-import { GlTable, GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlTable, GlEmptyState, GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import environments from './mock_data';
 
 describe('Environments', () => {
@@ -102,7 +101,7 @@ describe('Environments', () => {
 
           if (status !== 'loading' && instances.length === 0) {
             const emptyState = tableRows.at(i).find('.deployments-empty');
-            const emptyStateIcon = emptyState.find(Icon);
+            const emptyStateIcon = emptyState.find(GlIcon);
 
             expect(emptyState.exists()).toBe(true);
             expect(emptyStateIcon.exists()).toBe(true);

ee/spec/frontend/environments_dashboard/components/__snapshots__/environment_header_spec.js.snap

@@ -132,7 +132,7 @@ exports[`Environment Header with environments grouped into a folder matches the
     </gl-badge-stub>
   </div>
    
-  <icon-stub
+  <gl-icon-stub
     class="dashboard-card-icon"
     name="information"
     size="16"

ee/spec/frontend/environments_dashboard/components/__snapshots__/environment_spec.js.snap

@@ -36,7 +36,7 @@ exports[`Environment matchs the snapshot 1`] = `
         <div
           class="branch-commit"
         >
-          <icon-stub
+          <gl-icon-stub
             name="work"
             size="16"
           />

ee/spec/frontend/environments_dashboard/components/__snapshots__/project_header_spec.js.snap

@@ -56,7 +56,7 @@ exports[`Project Header matches the snapshot 1`] = `
       title="More actions"
       type="button"
     >
-      <icon-stub
+      <gl-icon-stub
         class="text-secondary"
         name="ellipsis_v"
         size="16"

ee/spec/frontend/environments_dashboard/components/environment_header_spec.js

 import { shallowMount, mount } from '@vue/test-utils';
-import { GlLink, GlDeprecatedBadge as GlBadge } from '@gitlab/ui';
+import { GlLink, GlDeprecatedBadge as GlBadge, GlIcon } from '@gitlab/ui';
 import component from 'ee/environments_dashboard/components/dashboard/environment_header.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 import ReviewAppLink from '~/vue_merge_request_widget/components/review_app_link.vue';
 
 describe('Environment Header', () => {
@@ -69,8 +68,8 @@ describe('Environment Header', () => {
     });
 
     it('shows an icon stating the environment is one of many in a folder', () => {
-      expect(wrapper.find(Icon).attributes('name')).toBe('information');
-      expect(wrapper.find(Icon).attributes('title')).toMatch(/last updated environment/);
+      expect(wrapper.find(GlIcon).attributes('name')).toBe('information');
+      expect(wrapper.find(GlIcon).attributes('title')).toMatch(/last updated environment/);
     });
 
     it('matches the snapshot', () => {

ee/spec/frontend/epic/components/sidebar_items/__snapshots__/sidebar_date_picker_spec.js.snap

@@ -23,7 +23,7 @@ exports[`SidebarDatePicker renders expected template 1`] = `
     <div
       class="float-right d-flex"
     >
-      <icon-stub
+      <gl-icon-stub
         class="help-icon gl-mr-2"
         name="question-o"
         size="16"

ee/spec/frontend/epic/components/sidebar_items/sidebar_date_picker_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { TEST_HOST } from 'helpers/test_constants';
 import SidebarDatepicker from 'ee/epic/components/sidebar_items/sidebar_date_picker.vue';
 import { mockDatePickerProps } from '../../mock_data';
-import Icon from '~/vue_shared/components/icon.vue';
 import DatePicker from '~/vue_shared/components/pikaday.vue';
 import ToggleSidebar from '~/vue_shared/components/sidebar/toggle_sidebar.vue';
 import CollapsedCalendarIcon from '~/vue_shared/components/sidebar/collapsed_calendar_icon.vue';
@@ -29,7 +28,7 @@ describe('SidebarDatePicker', () => {
 
   const findIconByName = name =>
     wrapper
-      .findAll(Icon)
+      .findAll(GlIcon)
       .filter(w => w.props().name === name)
       .at(0);
   const findEditButton = () => wrapper.find({ ref: 'editButton' });

ee/spec/frontend/geo_replicable/components/geo_replicable_status_spec.js

@@ -8,7 +8,7 @@ import {
   STATUS_ICON_CLASS,
   DEFAULT_STATUS,
 } from 'ee/geo_replicable/constants';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import { MOCK_REPLICABLE_TYPE } from '../mock_data';
 
 const localVue = createLocalVue();
@@ -34,7 +34,7 @@ describe('GeoReplicableStatus', () => {
   });
 
   const findGeoReplicableStatusContainer = () => wrapper.find('div');
-  const findIcon = () => findGeoReplicableStatusContainer().find(Icon);
+  const findIcon = () => findGeoReplicableStatusContainer().find(GlIcon);
 
   describe('template', () => {
     beforeEach(() => {

ee/spec/frontend/licenses/components/cards/__snapshots__/license_card_body_spec.js.snap

@@ -202,7 +202,7 @@ exports[`LicenseCardBody renders a loading state if isRemoving 1`] = `
   <div
     class="p-5 d-flex justify-content-center align-items-center license-card-loading"
   >
-    <icon-stub
+    <gl-icon-stub
       name="spinner"
       size="16"
     />

ee/spec/frontend/licenses/components/cells/__snapshots__/header_cell_spec.js.snap

@@ -5,7 +5,7 @@ exports[`HeaderCell renders an inflexible cell with a title with an icon through
   class="license-header-cell"
 >
   <template>
-    <icon-stub
+    <gl-icon-stub
       class="icon"
       name="retry"
       size="16"

ee/spec/frontend/licenses/components/cells/__snapshots__/info_cell_spec.js.snap

@@ -17,7 +17,7 @@ exports[`InfoCell renders a number value 1`] = `
       class="btn-link information-target"
       type="button"
     >
-      <icon-stub
+      <gl-icon-stub
         class="icon d-block"
         name="information"
         size="16"
@@ -51,7 +51,7 @@ exports[`InfoCell renders a title and string value with an info popover through
       class="btn-link information-target"
       type="button"
     >
-      <icon-stub
+      <gl-icon-stub
         class="icon d-block"
         name="information"
         size="16"

ee/spec/frontend/related_items_tree/components/tree_item_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
-import { GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlDeprecatedButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
 
 import TreeItem from 'ee/related_items_tree/components/tree_item.vue';
 import TreeItemBody from 'ee/related_items_tree/components/tree_item_body.vue';
@@ -11,8 +11,6 @@ import * as epicUtils from 'ee/related_items_tree/utils/epic_utils';
 import { ChildType, treeItemChevronBtnClassName } from 'ee/related_items_tree/constants';
 import { PathIdSeparator } from 'ee/related_issues/constants';
 
-import Icon from '~/vue_shared/components/icon.vue';
-
 import { mockParentItem, mockQueryResponse, mockEpic1 } from '../mock_data';
 
 const mockItem = { ...mockEpic1, type: ChildType.Epic, pathIdSeparator: PathIdSeparator.Epic };
@@ -147,8 +145,8 @@ describe('RelatedItemsTree', () => {
       });
 
       it('renders expand/collapse icon', () => {
-        const expandedIcon = wrapperExpanded.find(Icon);
-        const collapsedIcon = wrapperCollapsed.find(Icon);
+        const expandedIcon = wrapperExpanded.find(GlIcon);
+        const collapsedIcon = wrapperCollapsed.find(GlIcon);
 
         expect(expandedIcon.isVisible()).toBe(true);
         expect(expandedIcon.props('name')).toBe('chevron-down');