Utilize GitLab UI icon component: vue_shared

This replaces all the usages of ~/vue_shared/components/icon.vue with
the corresponding GitLab UI component within the `vue_shared` directory.

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

app/assets/javascripts/vue_shared/components/changed_file_icon.vue

 <script>
-import { GlTooltipDirective } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import getCommitIconMap from '~/ide/commit_icon';
 import { __ } from '~/locale';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -81,7 +80,7 @@ export default {
     :class="{ 'ml-auto': isCentered }"
     class="file-changed-icon d-inline-block"
   >
-    <icon v-if="showIcon" :name="changedIcon" :size="size" :class="changedIconClass" />
+    <gl-icon v-if="showIcon" :name="changedIcon" :size="size" :class="changedIconClass" />
   </span>
 </template>
 

app/assets/javascripts/vue_shared/components/ci_icon.vue

 <script>
-import Icon from './icon.vue';
+import { GlIcon } from '@gitlab/ui';
 
 /**
  * Renders CI icon based on API response shared between all places where it is used.
@@ -28,7 +28,7 @@ const validSizes = [8, 12, 16, 18, 24, 32, 48, 72];
 
 export default {
   components: {
-    Icon,
+    GlIcon,
   },
   props: {
     status: {
@@ -66,5 +66,5 @@ export default {
 };
 </script>
 <template>
-  <span :class="cssClass"> <icon :name="icon" :size="size" :class="cssClasses" /> </span>
+  <span :class="cssClass"> <gl-icon :name="icon" :size="size" :class="cssClasses" /> </span>
 </template>

app/assets/javascripts/vue_shared/components/commit.vue

 <script>
 import { isString, isEmpty } from 'lodash';
-import { GlTooltipDirective, GlLink } from '@gitlab/ui';
+import { GlTooltipDirective, GlLink, GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 import UserAvatarLink from './user_avatar/user_avatar_link.vue';
-import Icon from './icon.vue';
 
 export default {
   directives: {
@@ -12,14 +11,14 @@ export default {
   },
   components: {
     UserAvatarLink,
-    Icon,
+    GlIcon,
     GlLink,
     TooltipOnTruncate,
   },
   props: {
     /**
      * Indicates the existence of a tag.
-     * Used to render the correct icon, if true will render `fa-tag` icon,
+     * Used to render the correct GlIcon, if true will render `tag` GlIcon,
      * if false will render a svg sprite fork icon
      */
     tag: {
@@ -141,9 +140,9 @@ export default {
   <div class="branch-commit cgray">
     <template v-if="shouldShowRefInfo">
       <div class="icon-container">
-        <icon v-if="tag" name="tag" />
-        <icon v-else-if="mergeRequestRef" name="git-merge" />
-        <icon v-else name="branch" />
+        <gl-icon v-if="tag" name="tag" />
+        <gl-icon v-else-if="mergeRequestRef" name="git-merge" />
+        <gl-icon v-else name="branch" />
       </div>
 
       <gl-link
@@ -163,7 +162,7 @@ export default {
         >{{ commitRef.name }}</gl-link
       >
     </template>
-    <icon name="commit" class="commit-icon js-commit-icon" />
+    <gl-icon name="commit" class="commit-icon js-commit-icon" />
 
     <gl-link :href="commitUrl" class="commit-sha mr-0">{{ shortSha }}</gl-link>
 

app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue

 <script>
-import { GlLink } from '@gitlab/ui';
-import Icon from '../../icon.vue';
+import { GlLink, GlIcon } from '@gitlab/ui';
 import { numberToHumanSize } from '../../../../lib/utils/number_utils';
 
 export default {
   components: {
     GlLink,
-    Icon,
+    GlIcon,
   },
   props: {
     path: {
@@ -52,7 +51,7 @@ export default {
         :download="fileName"
         target="_blank"
       >
-        <icon :size="16" name="download" class="float-left gl-mr-3" />
+        <gl-icon :size="16" name="download" class="float-left gl-mr-3" />
         {{ __('Download') }}
       </gl-link>
     </div>

app/assets/javascripts/vue_shared/components/droplab_dropdown_button.vue

 <script>
-import { GlDeprecatedButton } from '@gitlab/ui';
-import Icon from './icon.vue';
+import { GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     GlDeprecatedButton,
   },
   props: {
@@ -73,7 +72,7 @@ export default {
       data-display="static"
       data-toggle="dropdown"
     >
-      <icon name="chevron-down" :aria-label="__('toggle dropdown')" />
+      <gl-icon name="chevron-down" :aria-label="__('toggle dropdown')" />
     </button>
     <ul :class="dropdownClass" class="dropdown-menu dropdown-open-top">
       <template v-for="(action, index) in actions">

app/assets/javascripts/vue_shared/components/file_finder/item.vue

 <script>
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import FileIcon from '../file_icon.vue';
 import ChangedFileIcon from '../changed_file_icon.vue';
 
@@ -8,7 +8,7 @@ const MAX_PATH_LENGTH = 60;
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     ChangedFileIcon,
     FileIcon,
   },
@@ -103,10 +103,10 @@ export default {
     <span v-if="file.changed || file.tempFile" v-once class="diff-changed-stats">
       <span v-if="showDiffStats">
         <span class="cgreen bold">
-          <icon name="file-addition" class="align-text-top" /> {{ file.addedLines }}
+          <gl-icon name="file-addition" class="align-text-top" /> {{ file.addedLines }}
         </span>
         <span class="cred bold ml-1">
-          <icon name="file-deletion" class="align-text-top" /> {{ file.removedLines }}
+          <gl-icon name="file-deletion" class="align-text-top" /> {{ file.removedLines }}
         </span>
       </span>
       <changed-file-icon v-else :file="file" />

app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue

 <script>
 import $ from 'jquery';
-import { GlDeprecatedButton } from '@gitlab/ui';
+import { GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 /**
  * Renders a split dropdown with
  * an input that allows to search through the given
@@ -14,7 +13,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 export default {
   name: 'FilteredSearchDropdown',
   components: {
-    Icon,
+    GlIcon,
     GlDeprecatedButton,
   },
   props: {
@@ -117,7 +116,7 @@ export default {
         aria-expanded="false"
         :aria-label="__('Expand dropdown')"
       >
-        <icon name="angle-down" :size="12" />
+        <gl-icon name="angle-down" :size="12" />
       </button>
       <div class="dropdown-menu dropdown-menu-right">
         <div class="dropdown-input">
@@ -128,7 +127,7 @@ export default {
             :placeholder="__('Filter')"
             class="js-filtered-dropdown-input dropdown-input-field"
           />
-          <icon class="dropdown-input-search" name="search" />
+          <gl-icon class="dropdown-input-search" name="search" />
         </div>
 
         <div class="dropdown-content">

app/assets/javascripts/vue_shared/components/help_popover.vue

 <script>
 import $ from 'jquery';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import { inserted } from '~/feature_highlight/feature_highlight_helper';
 import { mouseenter, debouncedMouseleave, togglePopover } from '~/shared/popover';
 
@@ -11,7 +11,7 @@ import { mouseenter, debouncedMouseleave, togglePopover } from '~/shared/popover
 export default {
   name: 'HelpPopover',
   components: {
-    Icon,
+    GlIcon,
   },
   props: {
     options: {
@@ -44,6 +44,6 @@ export default {
 </script>
 <template>
   <button type="button" class="btn btn-blank btn-transparent btn-help" tabindex="0">
-    <icon name="question" />
+    <gl-icon name="question" />
   </button>
 </template>

app/assets/javascripts/vue_shared/components/issue/issue_milestone.vue

 <script>
-import { GlTooltip } from '@gitlab/ui';
+import { GlTooltip, GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import { timeFor, parsePikadayDate, dateInWords } from '~/lib/utils/datetime_utility';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     GlTooltip,
   },
   mixins: [timeagoMixin],
@@ -73,7 +72,7 @@ export default {
 </script>
 <template>
   <div ref="milestoneDetails" class="issue-milestone-details">
-    <icon :size="16" class="gl-mr-2" name="clock" />
+    <gl-icon :size="16" class="gl-mr-2" name="clock" />
     <span class="milestone-title d-inline-block">{{ milestone.title }}</span>
     <gl-tooltip :target="() => $refs.milestoneDetails" placement="bottom" class="js-item-milestone">
       <span class="bold">{{ __('Milestone') }}</span> <br />

app/assets/javascripts/vue_shared/components/markdown/field.vue

@@ -2,13 +2,13 @@
 import $ from 'jquery';
 import '~/behaviors/markdown/render_gfm';
 import { unescape } from 'lodash';
+import { GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import { stripHtml } from '~/lib/utils/text_utility';
 import { deprecatedCreateFlash as Flash } from '~/flash';
 import GLForm from '~/gl_form';
 import MarkdownHeader from './header.vue';
 import MarkdownToolbar from './toolbar.vue';
-import Icon from '../icon.vue';
 import GlMentions from '~/vue_shared/components/gl_mentions.vue';
 import Suggestions from '~/vue_shared/components/markdown/suggestions.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -19,7 +19,7 @@ export default {
     GlMentions,
     MarkdownHeader,
     MarkdownToolbar,
-    Icon,
+    GlIcon,
     Suggestions,
   },
   mixins: [glFeatureFlagsMixin()],
@@ -254,7 +254,7 @@ export default {
           href="#"
           :aria-label="__('Leave zen mode')"
         >
-          <icon :size="16" name="minimize" />
+          <gl-icon :size="16" name="minimize" />
         </a>
         <markdown-toolbar
           :markdown-docs-path="markdownDocsPath"

app/assets/javascripts/vue_shared/components/markdown/header.vue

 <script>
 import $ from 'jquery';
-import { GlPopover, GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { GlPopover, GlButton, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { getSelectedFragment } from '~/lib/utils/common_utils';
 import { CopyAsGFM } from '../../../behaviors/markdown/copy_as_gfm';
 import ToolbarButton from './toolbar_button.vue';
-import Icon from '../icon.vue';
 
 export default {
   components: {
     ToolbarButton,
-    Icon,
+    GlIcon,
     GlPopover,
     GlButton,
   },
@@ -221,7 +220,7 @@ export default {
             :title="__('Go full screen')"
             type="button"
           >
-            <icon name="maximize" />
+            <gl-icon name="maximize" />
           </button>
         </div>
       </li>

app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue

 <script>
-import { GlDeprecatedButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlDeprecatedButton, GlLoadingIcon, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
-  components: { Icon, GlDeprecatedButton, GlLoadingIcon },
+  components: { GlIcon, GlDeprecatedButton, GlLoadingIcon },
   directives: { 'gl-tooltip': GlTooltipDirective },
   mixins: [glFeatureFlagsMixin()],
   props: {
@@ -97,7 +96,7 @@ export default {
     <div class="qa-suggestion-diff-header js-suggestion-diff-header font-weight-bold">
       {{ __('Suggested change') }}
       <a v-if="helpPagePath" :href="helpPagePath" :aria-label="__('Help')" class="js-help-btn">
-        <icon name="question-o" css-classes="link-highlight" />
+        <gl-icon name="question-o" css-classes="link-highlight" />
       </a>
     </div>
     <div v-if="isApplied" class="badge badge-success">{{ __('Applied') }}</div>

app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue

 <script>
-import { GlTooltipDirective } from '@gitlab/ui';
-import Icon from '../icon.vue';
+import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -67,6 +66,6 @@ export default {
     data-container="body"
     @click="() => $emit('click')"
   >
-    <icon :name="icon" />
+    <gl-icon :name="icon" />
   </button>
 </template>

app/assets/javascripts/vue_shared/components/modal_copy_button.vue

 <script>
 import $ from 'jquery';
-import { GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui';
+import { GlDeprecatedButton, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import Clipboard from 'clipboard';
 import { __ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
     GlDeprecatedButton,
-    Icon,
+    GlIcon,
   },
 
   directives: {
@@ -121,7 +120,7 @@ export default {
     :title="title"
   >
     <slot>
-      <icon name="copy-to-clipboard" />
+      <gl-icon name="copy-to-clipboard" />
     </slot>
   </gl-deprecated-button>
 </template>

app/assets/javascripts/vue_shared/components/notes/noteable_warning.vue

 <script>
-import { GlLink } from '@gitlab/ui';
+import { GlLink, GlIcon } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { __, sprintf } from '~/locale';
-import icon from '../icon.vue';
 
 function buildDocsLinkStart(path) {
   return `<a href="${escape(path)}" target="_blank" rel="noopener noreferrer">`;
@@ -16,7 +15,7 @@ const NoteableTypeText = {
 
 export default {
   components: {
-    icon,
+    GlIcon,
     GlLink,
   },
   props: {
@@ -89,7 +88,7 @@ export default {
 </script>
 <template>
   <div class="issuable-note-warning">
-    <icon v-if="!isLockedAndConfidential" :name="warningIcon" :size="16" class="icon inline" />
+    <gl-icon v-if="!isLockedAndConfidential" :name="warningIcon" :size="16" class="icon inline" />
 
     <span v-if="isLockedAndConfidential" ref="lockedAndConfidential">
       <span v-html="confidentialAndLockedDiscussionText"></span>

app/assets/javascripts/vue_shared/components/notes/system_note.vue

@@ -18,10 +18,9 @@
  */
 import $ from 'jquery';
 import { mapGetters, mapActions, mapState } from 'vuex';
-import { GlDeprecatedButton, GlSkeletonLoading, GlTooltipDirective } from '@gitlab/ui';
+import { GlDeprecatedButton, GlSkeletonLoading, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import descriptionVersionHistoryMixin from 'ee_else_ce/notes/mixins/description_version_history';
 import noteHeader from '~/notes/components/note_header.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import TimelineEntryItem from './timeline_entry_item.vue';
 import { spriteIcon } from '../../../lib/utils/common_utils';
@@ -32,7 +31,7 @@ const MAX_VISIBLE_COMMIT_LIST_COUNT = 3;
 export default {
   name: 'SystemNote',
   components: {
-    Icon,
+    GlIcon,
     noteHeader,
     TimelineEntryItem,
     GlDeprecatedButton,
@@ -109,7 +108,7 @@ export default {
             ·
             <button type="button" class="btn-blank btn-link" @click="toggleDescriptionVersion">
               {{ __('Compare with previous version') }}
-              <icon :name="descriptionVersionToggleIcon" :size="12" class="append-left-5" />
+              <gl-icon :name="descriptionVersionToggleIcon" :size="12" class="append-left-5" />
             </button>
           </template>
         </note-header>
@@ -122,7 +121,7 @@ export default {
         ></div>
         <div v-if="hasMoreCommits" class="flex-list">
           <div class="system-note-commit-list-toggler flex-row" @click="expanded = !expanded">
-            <icon :name="toggleIcon" :size="8" class="gl-mr-2" />
+            <gl-icon :name="toggleIcon" :size="8" class="gl-mr-2" />
             <span>{{ __('Toggle commit list') }}</span>
           </div>
         </div>
@@ -139,7 +138,7 @@ export default {
             class="btn-transparent delete-description-history"
             @click="deleteDescriptionVersion"
           >
-            <icon name="remove" />
+            <gl-icon name="remove" />
           </gl-deprecated-button>
         </div>
       </div>

app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue

 <script>
-import { GlDeprecatedButton } from '@gitlab/ui';
+import { GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 import { isString } from 'lodash';
-import Icon from '~/vue_shared/components/icon.vue';
 import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
 import highlight from '~/lib/utils/highlight';
 import { truncateNamespace } from '~/lib/utils/text_utility';
 
 export default {
   name: 'ProjectListItem',
-  components: { Icon, ProjectAvatar, GlDeprecatedButton },
+  components: { GlIcon, ProjectAvatar, GlDeprecatedButton },
   props: {
     project: {
       type: Object,
@@ -44,7 +43,7 @@ export default {
     class="d-flex align-items-center btn pt-1 pb-1 border-0 project-list-item"
     @click="onClick"
   >
-    <icon
+    <gl-icon
       class="gl-ml-3 gl-mr-3 flex-shrink-0 position-top-0 js-selected-icon"
       :class="{ 'js-selected visible': selected, 'js-unselected invisible': !selected }"
       name="mobile-issue-close"

app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue

 <script>
-import { GlPopover, GlSkeletonLoading } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlPopover, GlSkeletonLoading, GlIcon } from '@gitlab/ui';
 import UserAvatarImage from '../user_avatar/user_avatar_image.vue';
 import { glEmojiTag } from '../../../emoji';
 
@@ -10,7 +9,7 @@ export default {
   name: 'UserPopover',
   maxSkeletonLines: MAX_SKELETON_LINES,
   components: {
-    Icon,
+    GlIcon,
     GlPopover,
     GlSkeletonLoading,
     UserAvatarImage,
@@ -74,16 +73,16 @@ export default {
           </div>
           <div class="gl-text-gray-500">
             <div v-if="user.bio" class="gl-display-flex gl-mb-2">
-              <icon name="profile" class="gl-text-gray-400 gl-flex-shrink-0" />
+              <gl-icon name="profile" class="gl-text-gray-400 gl-flex-shrink-0" />
               <span ref="bio" class="gl-ml-2" v-html="user.bioHtml"></span>
             </div>
             <div v-if="user.workInformation" class="gl-display-flex gl-mb-2">
-              <icon name="work" class="gl-text-gray-400 gl-flex-shrink-0" />
+              <gl-icon name="work" class="gl-text-gray-400 gl-flex-shrink-0" />
               <span ref="workInformation" class="gl-ml-2">{{ user.workInformation }}</span>
             </div>
           </div>
           <div v-if="user.location" class="js-location gl-text-gray-500 gl-display-flex">
-            <icon name="location" class="gl-text-gray-400 flex-shrink-0" />
+            <gl-icon name="location" class="gl-text-gray-400 flex-shrink-0" />
             <span class="gl-ml-2">{{ user.location }}</span>
           </div>
           <div v-if="statusHtml" class="js-user-status gl-mt-3">

ee/app/assets/javascripts/vue_shared/components/accordion/accordion_item.vue

 <script>
 import { uniqueId } from 'lodash';
-import { GlSkeletonLoader } from '@gitlab/ui';
-
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlSkeletonLoader, GlIcon } from '@gitlab/ui';
 
 import accordionEventBus from './accordion_event_bus';
 
@@ -11,7 +9,7 @@ const accordionItemUniqueId = name => uniqueId(`gl-accordion-item-${name}-`);
 export default {
   components: {
     GlSkeletonLoader,
-    Icon,
+    GlIcon,
   },
   props: {
     accordionId: {
@@ -107,7 +105,7 @@ export default {
             class="d-flex align-items-center p-2"
             :class="{ 'list-group-item-action': !isDisabled }"
           >
-            <icon
+            <gl-icon
               :size="16"
               class="mr-2 gl-text-gray-900"
               :name="isExpanded ? 'angle-down' : 'angle-right'"

ee/app/assets/javascripts/vue_shared/components/linked_pipelines_mini_list.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
-import icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
 
 export default {
@@ -8,7 +8,7 @@ export default {
     tooltip,
   },
   components: {
-    icon,
+    GlIcon,
   },
   props: {
     triggeredBy: {
@@ -86,7 +86,7 @@ export default {
     }"
     class="linked-pipeline-mini-list inline-block"
   >
-    <icon v-if="isDownstream" class="arrow-icon" name="long-arrow" />
+    <gl-icon v-if="isDownstream" class="arrow-icon" name="long-arrow" />
 
     <a
       v-for="pipeline in linkedPipelinesTrimmed"
@@ -99,7 +99,7 @@ export default {
       data-placement="top"
       data-container="body"
     >
-      <icon :name="getStatusIcon(pipeline.details.status.icon)" />
+      <gl-icon :name="getStatusIcon(pipeline.details.status.icon)" />
     </a>
 
     <a
@@ -114,6 +114,6 @@ export default {
       {{ counterLabel }}
     </a>
 
-    <icon v-if="isUpstream" class="arrow-icon" name="long-arrow" />
+    <gl-icon v-if="isUpstream" class="arrow-icon" name="long-arrow" />
   </span>
 </template>

ee/app/assets/javascripts/vue_shared/components/sidebar/epics_select/dropdown_button.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
   },
   props: {
     selectedEpicTitle: {
@@ -34,6 +34,6 @@ export default {
     data-toggle="dropdown"
   >
     <span class="dropdown-toggle-text" :class="toggleTextClass">{{ buttonText }}</span>
-    <icon name="chevron-down" class="dropdown-menu-toggle-icon" />
+    <gl-icon name="chevron-down" class="dropdown-menu-toggle-icon" />
   </button>
 </template>

ee/app/assets/javascripts/vue_shared/components/sidebar/epics_select/dropdown_header.vue

 <script>
-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,
   },
 };
 </script>
@@ -19,7 +17,7 @@ export default {
       variant="link"
       class="dropdown-title-button dropdown-menu-close"
     >
-      <icon name="close" />
+      <gl-icon name="close" />
     </gl-deprecated-button>
   </div>
 </template>

ee/app/assets/javascripts/vue_shared/components/sidebar/epics_select/dropdown_search_input.vue

 <script>
 import { debounce } from 'lodash';
-import { GlDeprecatedButton } from '@gitlab/ui';
-
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
 
 export default {
   components: {
     GlDeprecatedButton,
-    Icon,
+    GlIcon,
   },
   directives: {
     autofocusonshow,
@@ -41,7 +39,7 @@ export default {
       type="search"
       @keyup="handleKeyUp"
     />
-    <icon v-show="!query" name="search" />
+    <gl-icon v-show="!query" name="search" />
     <gl-deprecated-button
       variant="link"
       class="fa fa-times dropdown-input-clear js-dropdown-input-clear"

ee/app/assets/javascripts/vue_shared/components/sidebar/epics_select/dropdown_value_collapsed.vue

 <script>
-import { GlTooltipDirective } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -24,7 +23,7 @@ export default {
     :title="epic.title"
     class="sidebar-collapsed-icon"
   >
-    <icon name="epic" />
+    <gl-icon name="epic" />
     <span class="collapse-truncated-title mt-1">{{ epic.title }}</span>
   </div>
 </template>

ee/app/assets/javascripts/vue_shared/dashboards/components/alerts.vue

 <script>
 import { escape } from 'lodash';
+import { GlIcon } from '@gitlab/ui';
 import { __, n__, sprintf } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
   },
   props: {
     count: {
@@ -54,7 +54,7 @@ export default {
 <template>
   <div class="dashboard-card-alert row">
     <div class="col-12">
-      <icon
+      <gl-icon
         :class="alertClasses"
         class="align-text-bottom js-dashboard-alerts-icon"
         name="warning"

ee/app/assets/javascripts/vue_shared/dashboards/components/project_pipeline.vue

 <script>
-import { GlLink, GlTooltip } from '@gitlab/ui';
+import { GlLink, GlTooltip, GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 import { STATUS_FAILED } from '../constants';
 
 export default {
   components: {
     CiBadgeLink,
     CiIcon,
-    Icon,
+    GlIcon,
     GlLink,
     GlTooltip,
   },
@@ -112,7 +111,7 @@ export default {
         <div class="text-tertiary">{{ upstreamPipeline.project.full_name }}</div>
       </gl-tooltip>
 
-      <icon name="arrow-right" class="dashboard-card-footer-arrow align-middle mx-1" />
+      <gl-icon name="arrow-right" class="dashboard-card-footer-arrow align-middle mx-1" />
     </template>
 
     <ci-badge-link
@@ -127,7 +126,7 @@ export default {
     </gl-tooltip>
 
     <template v-if="hasDownstreamPipelines">
-      <icon name="arrow-right" class="dashboard-card-footer-arrow align-middle mx-1" />
+      <gl-icon name="arrow-right" class="dashboard-card-footer-arrow align-middle mx-1" />
 
       <div
         v-for="(pipeline, index) in shownDownstreamPipelines"

ee/app/assets/javascripts/vue_shared/dashboards/components/time_ago.vue

 <script>
-import { GlTooltip } from '@gitlab/ui';
+import { GlTooltip, GlIcon } from '@gitlab/ui';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
     GlTooltip,
-    Icon,
+    GlIcon,
   },
 
   mixins: [timeagoMixin],
@@ -33,7 +32,7 @@ export default {
 </script>
 <template>
   <div class="text-secondary">
-    <icon
+    <gl-icon
       name="clock"
       class="dashboard-card-icon align-text-bottom js-dashboard-project-clock-icon"
     />

ee/app/assets/javascripts/vue_shared/license_compliance/components/admin_license_management_row.vue

 <script>
 import { mapActions } from 'vuex';
-import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlLoadingIcon } from '@gitlab/ui';
+import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { getIssueStatusFromLicenseStatus } from 'ee/vue_shared/license_compliance/store/utils';
 import { LICENSE_MANAGEMENT } from 'ee/vue_shared/license_compliance/store/constants';
 import { s__ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import IssueStatusIcon from '~/reports/components/issue_status_icon.vue';
 
 import { LICENSE_APPROVAL_STATUS, LICENSE_APPROVAL_ACTION } from '../constants';
@@ -18,7 +17,7 @@ export default {
     GlDeprecatedDropdown,
     GlDeprecatedDropdownItem,
     GlLoadingIcon,
-    Icon,
+    GlIcon,
     IssueStatusIcon,
   },
   props: {
@@ -78,11 +77,11 @@ export default {
           right
         >
           <gl-deprecated-dropdown-item @click="allowLicense(license)">
-            <icon :class="approveIconClass" name="mobile-issue-close" />
+            <gl-icon :class="approveIconClass" name="mobile-issue-close" />
             {{ $options[$options.LICENSE_APPROVAL_ACTION.ALLOW] }}
           </gl-deprecated-dropdown-item>
           <gl-deprecated-dropdown-item @click="denyLicense(license)">
-            <icon :class="blacklistIconClass" name="mobile-issue-close" />
+            <gl-icon :class="blacklistIconClass" name="mobile-issue-close" />
             {{ $options[$options.LICENSE_APPROVAL_ACTION.DENY] }}
           </gl-deprecated-dropdown-item>
         </gl-deprecated-dropdown>
@@ -94,7 +93,7 @@ export default {
           data-target="#modal-license-delete-confirmation"
           @click="setLicenseInModal(license)"
         >
-          <icon name="remove" />
+          <gl-icon name="remove" />
         </button>
       </div>
     </div>

ee/app/assets/javascripts/vue_shared/license_compliance/mr_widget_license_report.vue

 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
-import { GlLink } from '@gitlab/ui';
+import { GlLink, GlIcon } from '@gitlab/ui';
 import reportsMixin from 'ee/vue_shared/security_reports/mixins/reports_mixin';
 import SetLicenseApprovalModal from 'ee/vue_shared/license_compliance/components/set_approval_status_modal.vue';
 import { componentNames } from 'ee/reports/components/issue_body';
 import { LICENSE_MANAGEMENT } from 'ee/vue_shared/license_compliance/store/constants';
 import ReportItem from '~/reports/components/report_item.vue';
 import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 import ReportSection from '~/reports/components/report_section.vue';
 import createStore from './store';
 
@@ -23,7 +22,7 @@ export default {
     ReportSection,
     SetLicenseApprovalModal,
     SmartVirtualList,
-    Icon,
+    GlIcon,
   },
   mixins: [reportsMixin],
   props: {
@@ -176,7 +175,7 @@ export default {
             class="js-security-approval-help-link"
             target="_blank"
           >
-            <icon :size="12" name="question" />
+            <gl-icon :size="12" name="question" />
           </gl-link>
         </div>
       </template>
@@ -195,7 +194,7 @@ export default {
           target="_blank"
           class="btn btn-default btn-sm js-full-report"
         >
-          {{ s__('ciReport|View full report') }} <icon :size="16" name="external-link" />
+          {{ s__('ciReport|View full report') }} <gl-icon :size="16" name="external-link" />
         </a>
       </div>
     </report-section>

ee/app/assets/javascripts/vue_shared/security_reports/components/event_item.vue

 <script>
-import { GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlTooltipDirective, GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 import NoteHeader from '~/notes/components/note_header.vue';
 
 export default {
   name: 'EventItem',
   components: {
-    Icon,
+    GlIcon,
     NoteHeader,
     GlDeprecatedButton,
   },
@@ -65,7 +64,7 @@ export default {
 <template>
   <div :id="noteId" class="d-flex align-items-center">
     <div class="circle-icon-container" :class="iconClass">
-      <icon :size="16" :name="iconName" />
+      <gl-icon :size="16" :name="iconName" />
     </div>
     <div class="ml-3 flex-grow-1" data-qa-selector="event_item_content">
       <note-header
@@ -93,7 +92,7 @@ export default {
         :title="button.title"
         @click="button.onClick"
       >
-        <icon :name="button.iconName" class="link-highlight" />
+        <gl-icon :name="button.iconName" class="link-highlight" />
       </gl-deprecated-button>
     </div>
   </div>

ee/app/assets/javascripts/vue_shared/security_reports/components/solution_card.vue

 <script>
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import { setUrlFragment } from '~/lib/utils/url_utility';
 
 export default {
   name: 'SolutionCard',
-  components: { Icon },
+  components: { GlIcon },
   props: {
     solution: {
       type: String,
@@ -69,7 +69,7 @@ export default {
         class="col-auto d-flex align-items-center pl-0"
         :class="{ 'col-md-2': !isStandaloneVulnerability }"
       >
-        <div class="circle-icon-container pr-3" aria-hidden="true"><icon name="bulb" /></div>
+        <div class="circle-icon-container pr-3" aria-hidden="true"><gl-icon name="bulb" /></div>
         <strong class="text-right flex-grow-1">{{ s__('ciReport|Solution') }}:</strong>
       </div>
       <span class="flex-shrink-1 pl-0" :class="{ 'col-md-10': !isStandaloneVulnerability }">{{
@@ -93,7 +93,7 @@ export default {
             class="js-link-vulnerabilityFeedbackHelpPath"
           >
             {{ s__('ciReport|Learn more about interacting with security reports') }}
-            <icon :size="16" name="external-link" class="align-text-top" />
+            <gl-icon :size="16" name="external-link" class="align-text-top" />
           </a>
         </em>
       </div>

ee/app/assets/javascripts/vue_shared/security_reports/components/split_button.vue

 <script>
-import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
     GlDeprecatedDropdown,
     GlDeprecatedDropdownItem,
-    Icon,
+    GlIcon,
   },
   props: {
     buttons: {
@@ -54,7 +53,7 @@ export default {
     >
       <div class="media">
         <div>
-          <icon v-if="selectedButton === button" class="gl-mr-2" name="mobile-issue-close" />
+          <gl-icon v-if="selectedButton === button" class="gl-mr-2" name="mobile-issue-close" />
         </div>
         <div class="media-body" :class="{ 'prepend-left-20': selectedButton !== button }">
           <strong>{{ button.name }}</strong>

ee/spec/frontend/vue_shared/components/sidebar/epics_select/dropdown_button_spec.js

 import { shallowMount } from '@vue/test-utils';
 
 import DropdownButton from 'ee/vue_shared/components/sidebar/epics_select/dropdown_button.vue';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 
 import { mockEpic1 } from '../mock_data';
 
@@ -69,7 +69,7 @@ describe('EpicsSelect', () => {
       });
 
       it('should render Icon component', () => {
-        const iconEl = wrapper.find(Icon);
+        const iconEl = wrapper.find(GlIcon);
 
         expect(iconEl.exists()).toBe(true);
         expect(iconEl.attributes('name')).toBe('chevron-down');

ee/spec/frontend/vue_shared/components/sidebar/epics_select/dropdown_header_spec.js

 import { shallowMount } from '@vue/test-utils';
 
-import { GlDeprecatedButton } from '@gitlab/ui';
+import { GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 import DropdownHeader from 'ee/vue_shared/components/sidebar/epics_select/dropdown_header.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 
 describe('EpicsSelect', () => {
   describe('DropdownHeader', () => {
@@ -36,7 +35,7 @@ describe('EpicsSelect', () => {
       });
 
       it('should render close button icon', () => {
-        const iconEl = wrapper.find(GlDeprecatedButton).find(Icon);
+        const iconEl = wrapper.find(GlDeprecatedButton).find(GlIcon);
 
         expect(iconEl.exists()).toBe(true);
         expect(iconEl.attributes('name')).toBe('close');

ee/spec/frontend/vue_shared/components/sidebar/epics_select/dropdown_search_input_spec.js

 import { shallowMount } from '@vue/test-utils';
 
-import { GlDeprecatedButton } from '@gitlab/ui';
+import { GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 import DropdownSearchInput from 'ee/vue_shared/components/sidebar/epics_select/dropdown_search_input.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 
 const createComponent = () =>
   shallowMount(DropdownSearchInput, {
@@ -89,7 +88,7 @@ describe('EpicsSelect', () => {
         });
 
         return wrapper.vm.$nextTick().then(() => {
-          const iconEl = wrapper.find(Icon);
+          const iconEl = wrapper.find(GlIcon);
 
           expect(iconEl.exists()).toBe(true);
           expect(iconEl.attributes('name')).toBe('search');

ee/spec/frontend/vue_shared/components/sidebar/epics_select/dropdown_value_collapsed_spec.js

 import { shallowMount } from '@vue/test-utils';
 
 import DropdownValueCollapsed from 'ee/vue_shared/components/sidebar/epics_select/dropdown_value_collapsed.vue';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 
 import { mockEpic1 } from '../mock_data';
 
@@ -31,7 +31,7 @@ describe('EpicsSelect', () => {
       });
 
       it('should render Icon component', () => {
-        const iconEl = wrapper.find(Icon);
+        const iconEl = wrapper.find(GlIcon);
 
         expect(iconEl.exists()).toBe(true);
         expect(iconEl.attributes('name')).toBe('epic');

ee/spec/frontend/vue_shared/license_compliance/__snapshots__/mr_widget_license_report_spec.js.snap

@@ -65,7 +65,7 @@ exports[`License Report MR Widget report section should render correctly 1`] = `
     >
       
         View full report 
-      <icon-stub
+      <gl-icon-stub
         name="external-link"
         size="16"
       />

ee/spec/frontend/vue_shared/security_reports/components/split_button_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
+import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlIcon } from '@gitlab/ui';
 import SplitButton from 'ee/vue_shared/security_reports/components/split_button.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 
 const buttons = [
   {
@@ -81,7 +80,7 @@ describe('Split Button', () => {
     expect(
       findDropdownItems()
         .at(0)
-        .find(Icon)
+        .find(GlIcon)
         .exists(),
     ).toBe(true);
   });

spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap

@@ -63,7 +63,7 @@ exports[`Snippet Description Edit component rendering matches the snapshot 1`] =
             class="zen-control zen-control-leave js-zen-leave gl-text-gray-500"
             href="#"
           >
-            <icon-stub
+            <gl-icon-stub
               name="minimize"
               size="16"
             />

spec/frontend/vue_shared/components/changed_file_icon_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlIcon } from '@gitlab/ui';
 import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 
 const changedFile = () => ({ changed: true });
 const stagedFile = () => ({ changed: true, staged: true });
@@ -25,7 +25,7 @@ describe('Changed file icon', () => {
     wrapper.destroy();
   });
 
-  const findIcon = () => wrapper.find(Icon);
+  const findIcon = () => wrapper.find(GlIcon);
   const findIconName = () => findIcon().props('name');
   const findIconClasses = () => findIcon().classes();
   const findTooltipText = () => wrapper.attributes('title');

spec/frontend/vue_shared/components/commit_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlIcon } from '@gitlab/ui';
 import CommitComponent from '~/vue_shared/components/commit.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 
 describe('Commit component', () => {
@@ -8,7 +8,7 @@ describe('Commit component', () => {
   let wrapper;
 
   const findIcon = name => {
-    const icons = wrapper.findAll(Icon).filter(c => c.attributes('name') === name);
+    const icons = wrapper.findAll(GlIcon).filter(c => c.attributes('name') === name);
     return icons.length ? icons.at(0) : icons;
   };
 
@@ -46,7 +46,7 @@ describe('Commit component', () => {
     expect(
       wrapper
         .find('.icon-container')
-        .find(Icon)
+        .find(GlIcon)
         .exists(),
     ).toBe(true);
   });

spec/frontend/vue_shared/components/issue/issue_milestone_spec.js

@@ -2,8 +2,8 @@ import Vue from 'vue';
 import { shallowMount } from '@vue/test-utils';
 
 import { mockMilestone } from 'jest/boards/mock_data';
+import { GlIcon } from '@gitlab/ui';
 import IssueMilestone from '~/vue_shared/components/issue/issue_milestone.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 
 const createComponent = (milestone = mockMilestone) => {
   const Component = Vue.extend(IssueMilestone);
@@ -135,7 +135,7 @@ describe('IssueMilestoneComponent', () => {
     });
 
     it('renders milestone icon', () => {
-      expect(wrapper.find(Icon).props('name')).toBe('clock');
+      expect(wrapper.find(GlIcon).props('name')).toBe('clock');
     });
 
     it('renders milestone title', () => {

spec/frontend/vue_shared/components/notes/noteable_warning_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlIcon } from '@gitlab/ui';
 import NoteableWarning from '~/vue_shared/components/notes/noteable_warning.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 
 describe('Issue Warning Component', () => {
   let wrapper;
 
-  const findIcon = (w = wrapper) => w.find(Icon);
+  const findIcon = (w = wrapper) => w.find(GlIcon);
   const findLockedBlock = (w = wrapper) => w.find({ ref: 'locked' });
   const findConfidentialBlock = (w = wrapper) => w.find({ ref: 'confidential' });
   const findLockedAndConfidentialBlock = (w = wrapper) => w.find({ ref: 'lockedAndConfidential' });
@@ -69,7 +69,7 @@ describe('Issue Warning Component', () => {
     });
 
     it('renders warning icon', () => {
-      expect(wrapper.find(Icon).exists()).toBe(true);
+      expect(wrapper.find(GlIcon).exists()).toBe(true);
     });
 
     it('does not render information about locked noteable', () => {
@@ -95,7 +95,7 @@ describe('Issue Warning Component', () => {
     });
 
     it('does not render warning icon', () => {
-      expect(wrapper.find(Icon).exists()).toBe(false);
+      expect(wrapper.find(GlIcon).exists()).toBe(false);
     });
 
     it('does not render information about locked noteable', () => {

spec/frontend/vue_shared/components/user_popover/user_popover_spec.js

-import { GlSkeletonLoading, GlSprintf } from '@gitlab/ui';
+import { GlSkeletonLoading, GlSprintf, GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import UserPopover from '~/vue_shared/components/user_popover/user_popover.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 
 const DEFAULT_PROPS = {
   user: {
@@ -74,7 +73,7 @@ describe('User Popover Component', () => {
     });
 
     it('shows icon for location', () => {
-      const iconEl = wrapper.find(Icon);
+      const iconEl = wrapper.find(GlIcon);
 
       expect(iconEl.props('name')).toEqual('location');
     });
@@ -139,9 +138,9 @@ describe('User Popover Component', () => {
 
       createWrapper({ user });
 
-      expect(wrapper.findAll(Icon).filter(icon => icon.props('name') === 'profile').length).toEqual(
-        1,
-      );
+      expect(
+        wrapper.findAll(GlIcon).filter(icon => icon.props('name') === 'profile').length,
+      ).toEqual(1);
     });
 
     it('shows icon for work information', () => {
@@ -152,7 +151,9 @@ describe('User Popover Component', () => {
 
       createWrapper({ user });
 
-      expect(wrapper.findAll(Icon).filter(icon => icon.props('name') === 'work').length).toEqual(1);
+      expect(wrapper.findAll(GlIcon).filter(icon => icon.props('name') === 'work').length).toEqual(
+        1,
+      );
     });
   });