Merge branch 'leipert-icons-vue_shared' into 'master'

Utilize GitLab UI icon component: vue_shared

See merge request gitlab-org/gitlab!40261

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,
+      );
     });
   });