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