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