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">