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

Utilize GitLab UI icon component: ee/

See merge request gitlab-org/gitlab!40267

ee/app/assets/javascripts/analytics/productivity_analytics/components/app.vue

@@ -7,11 +7,11 @@ import {
   GlDeprecatedDropdownItem,
   GlDeprecatedButton,
   GlTooltipDirective,
+  GlIcon,
 } from '@gitlab/ui';
 import dateFormat from 'dateformat';
 import { GlColumnChart } from '@gitlab/ui/dist/charts';
 import featureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import Icon from '~/vue_shared/components/icon.vue';
 import { beginOfDayTime, endOfDayTime } from '~/lib/utils/datetime_utility';
 import MetricChart from './metric_chart.vue';
 import Scatterplot from '../../shared/components/scatterplot.vue';
@@ -28,7 +28,7 @@ export default {
     GlDeprecatedDropdownItem,
     GlColumnChart,
     GlDeprecatedButton,
-    Icon,
+    GlIcon,
     MetricChart,
     Scatterplot,
     MergeRequestTable,
@@ -313,7 +313,7 @@ export default {
                     @click="setSortField(metric.key)"
                   >
                     <span class="d-flex">
-                      <icon
+                      <gl-icon
                         class="flex-shrink-0 gl-mr-2"
                         :class="{
                           invisible: !isSelectedSortField(metric.key),
@@ -329,7 +329,7 @@ export default {
                   :title="sortTooltipTitle"
                   @click="toggleSortOrder"
                 >
-                  <icon :name="sortIcon" />
+                  <gl-icon :name="sortIcon" />
                 </gl-deprecated-button>
               </div>
             </div>

ee/app/assets/javascripts/analytics/productivity_analytics/components/metric_chart.vue

 <script>
 import { isEmpty } from 'lodash';
-import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlLoadingIcon, GlAlert } from '@gitlab/ui';
+import {
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownItem,
+  GlLoadingIcon,
+  GlAlert,
+  GlIcon,
+} from '@gitlab/ui';
 import { s__ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import httpStatusCodes from '~/lib/utils/http_status';
 
 export default {
@@ -12,7 +17,7 @@ export default {
     GlDeprecatedDropdownItem,
     GlLoadingIcon,
     GlAlert,
-    Icon,
+    GlIcon,
   },
   props: {
     title: {
@@ -106,7 +111,7 @@ export default {
             @click="$emit('metricTypeChange', metric.key)"
           >
             <span class="d-flex">
-              <icon
+              <gl-icon
                 :title="s__('MetricChart|Selected')"
                 class="flex-shrink-0 gl-mr-2"
                 :class="{

ee/app/assets/javascripts/analytics/productivity_analytics/components/mr_table.vue

 <script>
-import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlIcon } from '@gitlab/ui';
 import MergeRequestTableRow from './mr_table_row.vue';
 import Pagination from '~/vue_shared/components/pagination_links.vue';
 
@@ -8,7 +7,7 @@ export default {
   components: {
     GlDeprecatedDropdown,
     GlDeprecatedDropdownItem,
-    Icon,
+    GlIcon,
     MergeRequestTableRow,
     Pagination,
   },
@@ -79,7 +78,7 @@ export default {
                   @click="$emit('columnMetricChange', option.key)"
                 >
                   <span class="d-flex">
-                    <icon
+                    <gl-icon
                       class="flex-shrink-0 gl-mr-2"
                       :class="{
                         invisible: !isSelectedMetric(option.key),

ee/app/assets/javascripts/approvals/components/approvers_list_item.vue

 <script>
-import { GlDeprecatedButton } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 import Avatar from '~/vue_shared/components/project_avatar/default.vue';
 import HiddenGroupsItem from './hidden_groups_item.vue';
 import { TYPE_USER, TYPE_GROUP, TYPE_HIDDEN_GROUPS } from '../constants';
@@ -10,7 +9,7 @@ const types = [TYPE_USER, TYPE_GROUP, TYPE_HIDDEN_GROUPS];
 export default {
   components: {
     GlDeprecatedButton,
-    Icon,
+    GlIcon,
     Avatar,
     HiddenGroupsItem,
   },
@@ -43,7 +42,7 @@ export default {
         <avatar :project="approver" :size="24" /><span>{{ displayName }}</span>
       </template>
       <gl-deprecated-button variant="none" class="ml-auto" @click="$emit('remove', approver)">
-        <icon name="remove" :aria-label="__('Remove')" />
+        <gl-icon name="remove" :aria-label="__('Remove')" />
       </gl-deprecated-button>
     </li>
   </transition>

ee/app/assets/javascripts/approvals/components/empty_rule_name.vue

 <script>
-import { GlPopover, GlLink } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlPopover, GlLink, GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     GlPopover,
     GlLink,
   },
@@ -22,7 +21,7 @@ export default {
   <div class="d-flex align-items-center">
     <span class="mt-n1">{{ __('Any eligible user') }}</span>
     <span id="popovercontainer" class="ml-2 align-self-end">
-      <icon
+      <gl-icon
         id="pop-approver"
         tabindex="0"
         name="question"

ee/app/assets/javascripts/approvals/components/rule_controls.vue

 <script>
 import { mapState, mapActions } from 'vuex';
-import { GlButton } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlButton, GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
     GlButton,
-    Icon,
+    GlIcon,
   },
   props: {
     rule: {
@@ -34,7 +33,7 @@ export default {
       category="primary"
       @click="requestDeleteRule(rule)"
     >
-      <icon name="remove" :aria-label="__('Remove')" />
+      <gl-icon name="remove" :aria-label="__('Remove')" />
     </gl-button>
   </div>
 </template>

ee/app/assets/javascripts/billings/components/subscription_table_row.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import { dateInWords } from '~/lib/utils/datetime_utility';
-import Icon from '~/vue_shared/components/icon.vue';
 import Popover from '~/vue_shared/components/help_popover.vue';
 
 export default {
   name: 'SubscriptionTableRow',
   components: {
-    Icon,
+    GlIcon,
     Popover,
   },
   props: {
@@ -54,7 +54,7 @@ export default {
   <div class="grid-row d-flex flex-grow-1 flex-column flex-sm-column flex-md-column flex-lg-row">
     <div class="grid-cell header-cell">
       <span class="icon-wrapper">
-        <icon v-if="header.icon" class="gl-mr-3" :name="header.icon" aria-hidden="true" />
+        <gl-icon v-if="header.icon" class="gl-mr-3" :name="header.icon" aria-hidden="true" />
         {{ header.title }}
       </span>
     </div>

ee/app/assets/javascripts/clusters/components/environments.vue

 <script>
-import { GlTable, GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
+import { GlTable, GlEmptyState, GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 
 export default {
   components: {
     GlEmptyState,
     GlTable,
-    Icon,
+    GlIcon,
     TimeAgo,
     GlLoadingIcon,
     deploymentInstance: () => import('ee_component/vue_shared/components/deployment_instance.vue'),
@@ -153,7 +152,7 @@ export default {
 
         <!-- Empty state -->
         <div v-else class="deployments-empty d-flex">
-          <icon
+          <gl-icon
             name="warning"
             :size="18"
             class="cluster-deployments-warning mr-2 align-self-center flex-shrink-0"

ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment.vue

 <script>
 import { escape, isEmpty } from 'lodash';
-import { GlTooltipDirective, GlLink, GlDeprecatedBadge as GlBadge } from '@gitlab/ui';
+import { GlTooltipDirective, GlLink, GlDeprecatedBadge as GlBadge, GlIcon } from '@gitlab/ui';
 import Alerts from 'ee/vue_shared/dashboards/components/alerts.vue';
 import TimeAgo from 'ee/vue_shared/dashboards/components/time_ago.vue';
 import { STATUS_FAILED } from 'ee/vue_shared/dashboards/constants';
 import ProjectPipeline from 'ee/vue_shared/dashboards/components/project_pipeline.vue';
 import { s__, __, sprintf } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import Commit from '~/vue_shared/components/commit.vue';
@@ -22,7 +21,7 @@ export default {
     Alerts,
     ProjectPipeline,
     TimeAgo,
-    Icon,
+    GlIcon,
   },
   directives: {
     'gl-tooltip': GlTooltipDirective,
@@ -139,7 +138,7 @@ export default {
 
         <div class="col-10 col-sm-7 pr-0 pl-5 align-self-center align-middle ci-table">
           <div class="branch-commit">
-            <icon name="work" />
+            <gl-icon name="work" />
             <gl-link
               v-if="deployable"
               v-gl-tooltip="jobTooltip"

ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment_header.vue

 <script>
-import { GlLink, GlDeprecatedBadge as GlBadge, GlTooltipDirective } from '@gitlab/ui';
+import { GlLink, GlDeprecatedBadge as GlBadge, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import ReviewAppLink from '~/vue_merge_request_widget/components/review_app_link.vue';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     ReviewAppLink,
     GlBadge,
     GlLink,
@@ -64,7 +63,7 @@ export default {
         environment.size
       }}</gl-badge>
     </div>
-    <icon
+    <gl-icon
       v-if="environment.within_folder"
       v-gl-tooltip
       :title="$options.tooltips.information"

ee/app/assets/javascripts/environments_dashboard/components/dashboard/project_header.vue

 <script>
-import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
+import { GlTooltipDirective, GlLink, GlButton, GlIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     ProjectAvatar,
     GlLink,
     GlButton,
@@ -54,7 +53,7 @@ export default {
         data-toggle="dropdown"
         :title="$options.moreActionsText"
       >
-        <icon name="ellipsis_v" class="text-secondary" />
+        <gl-icon name="ellipsis_v" class="text-secondary" />
       </button>
       <ul class="dropdown-menu dropdown-menu-right">
         <li>

ee/app/assets/javascripts/epic/components/sidebar_items/sidebar_date_picker.vue

 <script>
 import { uniqueId } from 'lodash';
-import { GlLoadingIcon, GlButton } from '@gitlab/ui';
+import { GlLoadingIcon, GlButton, GlIcon } from '@gitlab/ui';
 
 import { __, s__ } from '~/locale';
 import { dateInWords } from '~/lib/utils/datetime_utility';
 
 import tooltip from '~/vue_shared/directives/tooltip';
 import popover from '~/vue_shared/directives/popover';
-import Icon from '~/vue_shared/components/icon.vue';
 import DatePicker from '~/vue_shared/components/pikaday.vue';
 import CollapsedCalendarIcon from '~/vue_shared/components/sidebar/collapsed_calendar_icon.vue';
 import ToggleSidebar from '~/vue_shared/components/sidebar/toggle_sidebar.vue';
@@ -21,7 +20,7 @@ export default {
     popover,
   },
   components: {
-    Icon,
+    GlIcon,
     DatePicker,
     CollapsedCalendarIcon,
     ToggleSidebar,
@@ -200,7 +199,12 @@ export default {
       {{ label }}
       <gl-loading-icon v-if="dateSaveInProgress" :inline="true" />
       <div class="float-right d-flex">
-        <icon v-popover="popoverOptions" name="question-o" class="help-icon gl-mr-2" tabindex="0" />
+        <gl-icon
+          v-popover="popoverOptions"
+          name="question-o"
+          class="help-icon gl-mr-2"
+          tabindex="0"
+        />
         <gl-button
           v-show="canUpdate && !editing"
           ref="editButton"
@@ -241,7 +245,7 @@ export default {
         <span v-else class="d-flex value-content gl-ml-1">
           <template v-if="dateFixed">
             <span>{{ dateFixedWords }}</span>
-            <icon
+            <gl-icon
               v-if="isDateInvalid && selectedDateIsFixed"
               v-popover="dateInvalidPopoverOptions"
               name="warning"
@@ -280,7 +284,7 @@ export default {
         />
         <span class="gl-ml-2">{{ __('Inherited:') }}</span>
         <span class="value-content gl-ml-1">{{ dateFromMilestonesWords }}</span>
-        <icon
+        <gl-icon
           v-if="isDateInvalid && !selectedDateIsFixed"
           v-popover="dateInvalidPopoverOptions"
           name="warning"

ee/app/assets/javascripts/feature_flags/components/configure_feature_flags_modal.vue

@@ -7,10 +7,10 @@ import {
   GlLoadingIcon,
   GlSprintf,
   GlLink,
+  GlIcon,
 } from '@gitlab/ui';
 import { s__, __, sprintf } from '~/locale';
 import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 import Callout from '~/vue_shared/components/callout.vue';
 
 export default {
@@ -30,7 +30,7 @@ export default {
     GlFormInput,
     GlModal,
     ModalCopyButton,
-    Icon,
+    GlIcon,
     Callout,
     GlLoadingIcon,
     GlSprintf,
@@ -217,7 +217,7 @@ export default {
       v-if="hasRotateError"
       class="text-danger d-flex align-items-center font-weight-normal mb-2"
     >
-      <icon name="warning" class="mr-1" />
+      <gl-icon name="warning" class="mr-1" />
       <span>{{ $options.instanceIdRegenerateError }}</span>
     </div>
     <callout

ee/app/assets/javascripts/feature_flags/components/environments_dropdown.vue

 <script>
 import { isEmpty } from 'lodash';
-import { GlLoadingIcon, GlDeprecatedButton } from '@gitlab/ui';
+import { GlLoadingIcon, GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 
 /**
@@ -31,7 +30,7 @@ export default {
   components: {
     GlDeprecatedButton,
     GlLoadingIcon,
-    Icon,
+    GlIcon,
   },
   props: {
     endpoint: {
@@ -172,7 +171,7 @@ export default {
 <template>
   <div>
     <div class="dropdown position-relative">
-      <icon name="search" class="seach-icon-input" />
+      <gl-icon name="search" class="seach-icon-input" />
 
       <input
         type="text"
@@ -189,7 +188,7 @@ export default {
         class="js-clear-search-input btn-transparent clear-search-input position-right-0"
         @click="clearInput"
       >
-        <icon name="clear" :aria-label="__('Clear input')" />
+        <gl-icon name="clear" :aria-label="__('Clear input')" />
       </gl-deprecated-button>
 
       <div

ee/app/assets/javascripts/geo_nodes/components/geo_node_header.vue

 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
-import icon from '~/vue_shared/components/icon.vue';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
 
 export default {
   components: {
-    icon,
+    GlIcon,
     GlLoadingIcon,
   },
   directives: {
@@ -42,7 +41,7 @@ export default {
             v-if="nodeDetailsLoading || node.nodeActionActive"
             class="node-details-loading gl-ml-3 inline"
           />
-          <icon
+          <gl-icon
             v-if="showNodeWarningIcon"
             v-tooltip
             class="ml-2 text-warning-500"

ee/app/assets/javascripts/geo_nodes/components/geo_node_sync_settings.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import { sprintf, s__, __ } from '~/locale';
 import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
 import tooltip from '~/vue_shared/directives/tooltip';
-import icon from '~/vue_shared/components/icon.vue';
-
 import { TIME_DIFF } from '../constants';
 
 export default {
@@ -11,7 +10,7 @@ export default {
     tooltip,
   },
   components: {
-    icon,
+    GlIcon,
   },
   props: {
     syncStatusUnavailable: {
@@ -122,7 +121,7 @@ export default {
       data-placement="bottom"
     >
       <strong data-testid="syncType">{{ syncType }}</strong>
-      <icon name="retry" class="ml-2" />
+      <gl-icon name="retry" class="ml-2" />
       <span v-if="!eventTimestampEmpty" class="ml-2">
         {{ syncStatusEventInfo }}
       </span>

ee/app/assets/javascripts/geo_nodes/components/node_detail_sections/section_reveal_button.vue

 <script>
-import icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
-    icon,
+    GlIcon,
   },
   props: {
     buttonTitle: {
@@ -32,7 +32,7 @@ export default {
 
 <template>
   <button class="btn-link d-flex align-items-center" type="button" @click="onClickButton">
-    <icon :size="16" :name="toggleButtonIcon" />
+    <gl-icon :size="16" :name="toggleButtonIcon" />
     <span class="gl-ml-3">{{ buttonTitle }}</span>
   </button>
 </template>

ee/app/assets/javascripts/geo_replicable/components/geo_replicable_status.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import { STATUS_ICON_NAMES, STATUS_ICON_CLASS, DEFAULT_STATUS } from '../constants';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   name: 'GeoReplicableStatus',
   components: {
-    Icon,
+    GlIcon,
   },
   props: {
     status: {
@@ -40,7 +40,7 @@ export default {
 <template>
   <div>
     <span class="d-flex align-items-center text-capitalize">
-      <icon :name="icon.name" :class="icon.cssClass" class="mr-2" />
+      <gl-icon :name="icon.name" :class="icon.cssClass" class="mr-2" />
       {{ status }}
     </span>
   </div>

ee/app/assets/javascripts/group_member_contributions/components/table_header.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
   },
   props: {
     columns: {
@@ -59,7 +59,7 @@ export default {
         class="header"
         @click="onColumnClick(column.name)"
       >
-        {{ column.text }} <icon :size="12" :name="getColumnSortIcon(column.name)" />
+        {{ column.text }} <gl-icon :size="12" :name="getColumnSortIcon(column.name)" />
       </th>
     </tr>
   </thead>

ee/app/assets/javascripts/licenses/components/cards/license_card_body.vue

 <script>
-import { GlLink } from '@gitlab/ui';
+import { GlLink, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import { Cell, HeaderCell, InfoCell, DateCell } from '../cells';
 
 export default {
   name: 'LicenseCardBody',
   components: {
-    Icon,
+    GlIcon,
     Cell,
     HeaderCell,
     InfoCell,
@@ -75,7 +74,7 @@ export default {
       v-if="isRemoving"
       class="p-5 d-flex justify-content-center align-items-center license-card-loading"
     >
-      <icon name="spinner" /><span class="ml-2">{{ __('Removing license…') }}</span>
+      <gl-icon name="spinner" /><span class="ml-2">{{ __('Removing license…') }}</span>
     </div>
 
     <div v-else class="license-table js-license-table">

ee/app/assets/javascripts/licenses/components/cells/header_cell.vue

 <script>
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import Cell from './cell.vue';
 
 export default {
   name: 'HeaderCell',
   components: {
-    Icon,
+    GlIcon,
     Cell,
   },
   props: {
@@ -24,7 +24,7 @@ export default {
 <template>
   <cell class="license-header-cell" :is-flexible="false">
     <template slot="title">
-      <icon class="icon" :name="icon" />
+      <gl-icon class="icon" :name="icon" />
       <span class="ml-2 font-weight-bold">{{ title }}</span>
     </template>
   </cell>

ee/app/assets/javascripts/licenses/components/cells/info_cell.vue

 <script>
-import { GlPopover } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlPopover, GlIcon } from '@gitlab/ui';
 import Cell from './cell.vue';
 
 export default {
   name: 'InfoCell',
   components: {
-    Icon,
+    GlIcon,
     GlPopover,
     Cell,
   },
@@ -44,7 +43,7 @@ export default {
       <span class="mr-2 text">{{ title }}</span>
 
       <button ref="popoverTarget" type="button" class="btn-link information-target">
-        <icon name="information" class="icon d-block" />
+        <gl-icon name="information" class="icon d-block" />
       </button>
 
       <gl-popover

ee/app/assets/javascripts/operations/components/dashboard/project_header.vue

 <script>
-import { GlDeprecatedButton, GlLink, GlTooltipDirective } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlDeprecatedButton, GlLink, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
 import { __ } from '~/locale';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     ProjectAvatar,
     GlDeprecatedButton,
     GlLink,
@@ -70,7 +69,7 @@ export default {
       :title="title"
       @click="onRemove"
     >
-      <icon name="remove" />
+      <gl-icon name="remove" />
     </gl-deprecated-button>
   </div>
 </template>

ee/app/assets/javascripts/related_items_tree/components/tree_item.vue

 <script>
 import { mapGetters, mapActions, mapState } from 'vuex';
 
-import { GlTooltipDirective, GlLoadingIcon, GlDeprecatedButton } from '@gitlab/ui';
+import { GlTooltipDirective, GlLoadingIcon, GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 
 import { __ } from '~/locale';
 
-import Icon from '~/vue_shared/components/icon.vue';
-
 import TreeItemBody from './tree_item_body.vue';
 
 import { ChildType } from '../constants';
@@ -14,7 +12,7 @@ import { ChildType } from '../constants';
 export default {
   ChildType,
   components: {
-    Icon,
+    GlIcon,
     TreeItemBody,
     GlLoadingIcon,
     GlDeprecatedButton,
@@ -96,7 +94,7 @@ export default {
         class="btn-svg btn-tree-item-chevron align-self-start"
         @click="handleChevronClick"
       >
-        <icon :name="chevronType" />
+        <gl-icon :name="chevronType" />
       </gl-deprecated-button>
       <gl-loading-icon v-if="childrenFetchInProgress" class="loading-icon" size="sm" />
       <tree-item-body

ee/app/assets/javascripts/roadmap/components/epic_item_timeline.vue

 <script>
-import { GlPopover, GlProgressBar } from '@gitlab/ui';
+import { GlPopover, GlProgressBar, GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import { generateKey } from '../utils/epic_utils';
 
 import CommonMixin from '../mixins/common_mixin';
@@ -23,7 +22,7 @@ export default {
   cellWidth: TIMELINE_CELL_MIN_WIDTH,
   components: {
     CurrentDayIndicator,
-    Icon,
+    GlIcon,
     GlPopover,
     GlProgressBar,
   },
@@ -185,7 +184,7 @@ export default {
               aria-hidden="true"
             />
             <div class="gl-font-sm d-flex align-items-center text-nowrap">
-              <icon class="gl-mr-1" :size="12" name="weight" />
+              <gl-icon class="gl-mr-1" :size="12" name="weight" />
               <p class="m-0" :aria-label="epicWeightPercentageText">{{ epicWeightPercentage }}%</p>
             </div>
           </div>

ee/app/assets/javascripts/security_dashboard/components/filter.vue

 <script>
-import { GlDeprecatedDropdown, GlSearchBoxByType } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlDeprecatedDropdown, GlSearchBoxByType, GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
     GlDeprecatedDropdown,
     GlSearchBoxByType,
-    Icon,
+    GlIcon,
   },
   props: {
     filter: {
@@ -83,7 +82,7 @@ export default {
           :aria-label="__('Close')"
           @click="closeDropdown"
         >
-          <icon name="close" aria-hidden="true" class="vertical-align-middle" />
+          <gl-icon name="close" aria-hidden="true" class="vertical-align-middle" />
         </button>
       </div>
 
@@ -108,7 +107,7 @@ export default {
           @click="clickFilter(option)"
         >
           <span class="d-flex">
-            <icon
+            <gl-icon
               v-if="isSelected(option)"
               class="flex-shrink-0 js-check"
               name="mobile-issue-close"

ee/app/assets/javascripts/security_dashboard/components/security_dashboard_table_row.vue

 <script>
 import { mapActions, mapState } from 'vuex';
-import { GlDeprecatedButton, GlFormCheckbox, GlSkeletonLoading, GlSprintf } from '@gitlab/ui';
+import {
+  GlDeprecatedButton,
+  GlFormCheckbox,
+  GlSkeletonLoading,
+  GlSprintf,
+  GlIcon,
+} from '@gitlab/ui';
 import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
 import convertReportType from 'ee/vue_shared/security_reports/store/utils/convert_report_type';
 import getPrimaryIdentifier from 'ee/vue_shared/security_reports/store/utils/get_primary_identifier';
-import Icon from '~/vue_shared/components/icon.vue';
 import VulnerabilityActionButtons from './vulnerability_action_buttons.vue';
 import VulnerabilityIssueLink from './vulnerability_issue_link.vue';
 import { DASHBOARD_TYPES } from '../store/constants';
@@ -16,7 +21,7 @@ export default {
     GlFormCheckbox,
     GlSkeletonLoading,
     GlSprintf,
-    Icon,
+    GlIcon,
     SeverityBadge,
     VulnerabilityActionButtons,
     VulnerabilityIssueLink,
@@ -131,7 +136,7 @@ export default {
             >{{ vulnerability.name }}</gl-deprecated-button
           >
           <template v-if="isDismissed">
-            <icon
+            <gl-icon
               v-show="vulnerability.dismissal_feedback.comment_details"
               name="comment"
               class="text-warning vertical-align-middle"

ee/app/assets/javascripts/security_dashboard/components/unscanned_projects.vue

 <script>
-import { GlDeprecatedBadge as GlBadge, GlTabs, GlTab, GlLink } from '@gitlab/ui';
+import { GlDeprecatedBadge as GlBadge, GlTabs, GlTab, GlLink, GlIcon } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
 
-import Icon from '~/vue_shared/components/icon.vue';
-
 import UnscannedProjectsTabContent from './unscanned_projects_tab_content.vue';
 
 export default {
-  components: { GlBadge, GlTabs, GlTab, GlLink, Icon, UnscannedProjectsTabContent },
+  components: { GlBadge, GlTabs, GlTab, GlLink, GlIcon, UnscannedProjectsTabContent },
   props: {
     endpoint: {
       type: String,
@@ -52,7 +50,7 @@ export default {
           :href="helpPath"
           :title="__('Project scanning help page')"
           target="_blank"
-          ><icon name="question" :size="12" class="align-top"
+          ><gl-icon name="question" :size="12" class="align-top"
         /></gl-link>
       </h4>
       <p class="text-secondary mb-0">

ee/app/assets/javascripts/security_dashboard/components/vulnerability_issue_link.vue

 <script>
-import { GlTooltipDirective } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
 
 export default {
   name: 'VulnerabilityIssueLink',
   components: {
-    Icon,
+    GlIcon,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -30,7 +29,7 @@ export default {
 
 <template>
   <div class="d-inline">
-    <icon
+    <gl-icon
       v-gl-tooltip
       name="issue-created"
       class="text-success vertical-align-middle"

ee/app/assets/javascripts/security_dashboard/components/vulnerability_severity.vue

@@ -6,10 +6,9 @@ import {
 } from 'ee/security_dashboard/store/modules/vulnerable_projects/constants';
 
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { GlLink, GlTooltipDirective } from '@gitlab/ui';
+import { GlLink, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 
 import { Accordion, AccordionItem } from 'ee/vue_shared/components/accordion';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   css: {
@@ -30,7 +29,7 @@ export default {
     },
   },
   accordionItemsContentMaxHeight: '445px',
-  components: { Accordion, AccordionItem, GlLink, Icon },
+  components: { Accordion, AccordionItem, GlLink, GlIcon },
   directives: {
     'gl-tooltip': GlTooltipDirective,
   },
@@ -82,7 +81,7 @@ export default {
           :href="helpPagePath"
           :aria-label="__('Project security status help page')"
           target="_blank"
-          ><icon name="question"
+          ><gl-icon name="question"
         /></gl-link>
       </h4>
       <p class="text-secondary gl-m-0">

ee/app/assets/javascripts/storage_counter/components/app.vue

 <script>
-import { GlLink, GlSprintf, GlModalDirective, GlButton } from '@gitlab/ui';
+import { GlLink, GlSprintf, GlModalDirective, GlButton, GlIcon } from '@gitlab/ui';
 import Project from './project.vue';
 import UsageGraph from './usage_graph.vue';
 import query from '../queries/storage.query.graphql';
 import TemporaryStorageIncreaseModal from './temporary_storage_increase_modal.vue';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import { parseBoolean } from '~/lib/utils/common_utils';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
@@ -14,7 +13,7 @@ export default {
     GlLink,
     GlButton,
     GlSprintf,
-    Icon,
+    GlIcon,
     UsageGraph,
     TemporaryStorageIncreaseModal,
   },
@@ -111,7 +110,7 @@ export default {
             target="_blank"
             :aria-label="s__('UsageQuota|Usage quotas help link')"
           >
-            <icon name="question" :size="12" />
+            <gl-icon name="question" :size="12" />
           </gl-link>
         </div>
         <div class="col-lg-6 text-lg-right">

ee/app/assets/javascripts/storage_counter/components/project.vue

 <script>
-import { GlDeprecatedButton, GlLink } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlDeprecatedButton, GlLink, GlIcon } from '@gitlab/ui';
 import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
 import { numberToHumanSize, isOdd } from '~/lib/utils/number_utils';
 import { s__ } from '~/locale';
@@ -8,7 +7,7 @@ import StorageRow from './storage_row.vue';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     GlDeprecatedButton,
     GlLink,
     ProjectAvatar,
@@ -93,7 +92,7 @@ export default {
             :aria-label="__('Toggle project')"
             @click="toggleProject"
           >
-            <icon :name="iconName" class="folder-icon" />
+            <gl-icon :name="iconName" class="folder-icon" />
           </gl-deprecated-button>
 
           <project-avatar :project="projectAvatar" :size="20" />

ee/app/assets/javascripts/subscriptions/new/components/checkout/step_header.vue

 <script>
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
   },
   props: {
     isFinished: {
@@ -19,7 +19,7 @@ export default {
 </script>
 <template>
   <div class="d-flex">
-    <icon
+    <gl-icon
       v-show="isFinished"
       class="checkmark gl-mr-3"
       :size="18"

ee/spec/frontend/analytics/productivity_analytics/components/__snapshots__/metric_chart_spec.js.snap

@@ -35,7 +35,7 @@ exports[`MetricChart component template when isLoading is false and chartData is
       <span
         class="d-flex"
       >
-        <icon-stub
+        <gl-icon-stub
           aria-label="Selected"
           class="flex-shrink-0 gl-mr-2 invisible"
           name="mobile-issue-close"
@@ -54,7 +54,7 @@ exports[`MetricChart component template when isLoading is false and chartData is
       <span
         class="d-flex"
       >
-        <icon-stub
+        <gl-icon-stub
           aria-label="Selected"
           class="flex-shrink-0 gl-mr-2 invisible"
           name="mobile-issue-close"

ee/spec/frontend/analytics/productivity_analytics/components/__snapshots__/mr_table_spec.js.snap

@@ -49,7 +49,7 @@ exports[`MergeRequestTable component matches the snapshot 1`] = `
                 <span
                   class="d-flex"
                 >
-                  <icon-stub
+                  <gl-icon-stub
                     class="flex-shrink-0 gl-mr-2 invisible"
                     name="mobile-issue-close"
                     size="16"
@@ -66,7 +66,7 @@ exports[`MergeRequestTable component matches the snapshot 1`] = `
                 <span
                   class="d-flex"
                 >
-                  <icon-stub
+                  <gl-icon-stub
                     class="flex-shrink-0 gl-mr-2"
                     name="mobile-issue-close"
                     size="16"
@@ -83,7 +83,7 @@ exports[`MergeRequestTable component matches the snapshot 1`] = `
                 <span
                   class="d-flex"
                 >
-                  <icon-stub
+                  <gl-icon-stub
                     class="flex-shrink-0 gl-mr-2 invisible"
                     name="mobile-issue-close"
                     size="16"

ee/spec/frontend/analytics/productivity_analytics/components/metric_chart_spec.js

 import { shallowMount } from '@vue/test-utils';
 import MetricChart from 'ee/analytics/productivity_analytics/components/metric_chart.vue';
-import { GlLoadingIcon, GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlAlert } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import {
+  GlLoadingIcon,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownItem,
+  GlAlert,
+  GlIcon,
+} from '@gitlab/ui';
 import httpStatusCodes from '~/lib/utils/http_status';
 
 describe('MetricChart component', () => {
@@ -155,7 +160,7 @@ describe('MetricChart component', () => {
               expect(
                 findMetricDropdownItems()
                   .at(0)
-                  .find(Icon)
+                  .find(GlIcon)
                   .classes(),
               ).toContain('invisible');
             });

ee/spec/frontend/approvals/components/rule_controls_spec.js

 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlIcon } from '@gitlab/ui';
 import MREditModule from 'ee/approvals/stores/modules/mr_edit';
 import { createStoreOptions } from 'ee/approvals/stores';
 import RuleControls from 'ee/approvals/components/rule_controls.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -12,7 +11,7 @@ localVue.use(Vuex);
 const TEST_RULE = { id: 10 };
 
 const findButtonLabel = button => {
-  const icon = button.find(Icon);
+  const icon = button.find(GlIcon);
   return icon.exists() ? icon.attributes('aria-label') : button.text();
 };
 const hasLabel = (button, label) => findButtonLabel(button) === label;

ee/spec/frontend/clusters/components/environments_spec.js

 import { mount } from '@vue/test-utils';
 import Environments from 'ee/clusters/components/environments.vue';
-import { GlTable, GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlTable, GlEmptyState, GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import environments from './mock_data';
 
 describe('Environments', () => {
@@ -102,7 +101,7 @@ describe('Environments', () => {
 
           if (status !== 'loading' && instances.length === 0) {
             const emptyState = tableRows.at(i).find('.deployments-empty');
-            const emptyStateIcon = emptyState.find(Icon);
+            const emptyStateIcon = emptyState.find(GlIcon);
 
             expect(emptyState.exists()).toBe(true);
             expect(emptyStateIcon.exists()).toBe(true);

ee/spec/frontend/environments_dashboard/components/__snapshots__/environment_header_spec.js.snap

@@ -132,7 +132,7 @@ exports[`Environment Header with environments grouped into a folder matches the
     </gl-badge-stub>
   </div>
    
-  <icon-stub
+  <gl-icon-stub
     class="dashboard-card-icon"
     name="information"
     size="16"

ee/spec/frontend/environments_dashboard/components/__snapshots__/environment_spec.js.snap

@@ -36,7 +36,7 @@ exports[`Environment matchs the snapshot 1`] = `
         <div
           class="branch-commit"
         >
-          <icon-stub
+          <gl-icon-stub
             name="work"
             size="16"
           />

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