Utilize GitLab UI icon component: Web IDE

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

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/ide/components/activity_bar.vue

 <script>
 import $ from 'jquery';
 import { mapActions, mapState } from 'vuex';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
 import { leftSidebarViews } from '../constants';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
   },
   directives: {
     tooltip,
@@ -48,7 +48,7 @@ export default {
           class="ide-sidebar-link js-ide-edit-mode"
           @click.prevent="changedActivityView($event, $options.leftSidebarViews.edit.name)"
         >
-          <icon name="code" />
+          <gl-icon name="code" />
         </button>
       </li>
       <li>
@@ -65,7 +65,7 @@ export default {
           class="ide-sidebar-link js-ide-review-mode"
           @click.prevent="changedActivityView($event, $options.leftSidebarViews.review.name)"
         >
-          <icon name="file-modified" />
+          <gl-icon name="file-modified" />
         </button>
       </li>
       <li>
@@ -82,7 +82,7 @@ export default {
           class="ide-sidebar-link js-ide-commit-mode qa-commit-mode-tab"
           @click.prevent="changedActivityView($event, $options.leftSidebarViews.commit.name)"
         >
-          <icon name="commit" />
+          <gl-icon name="commit" />
         </button>
       </li>
     </ul>

app/assets/javascripts/ide/components/branches/item.vue

 <script>
 /* eslint-disable @gitlab/vue-require-i18n-strings */
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import Timeago from '~/vue_shared/components/time_ago_tooltip.vue';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     Timeago,
   },
   props: {
@@ -34,7 +34,7 @@ export default {
 <template>
   <a :href="branchHref" class="btn-link d-flex align-items-center">
     <span class="d-flex gl-mr-3 ide-search-list-current-icon">
-      <icon v-if="isActive" :size="18" name="mobile-issue-close" />
+      <gl-icon v-if="isActive" :size="18" name="mobile-issue-close" />
     </span>
     <span>
       <strong> {{ item.name }} </strong>

app/assets/javascripts/ide/components/branches/search_list.vue

 <script>
 import { mapActions, mapState } from 'vuex';
 import { debounce } from 'lodash';
-import { GlLoadingIcon } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import Item from './item.vue';
 
 export default {
   components: {
     Item,
-    Icon,
+    GlIcon,
     GlLoadingIcon,
   },
   data() {
@@ -67,7 +66,7 @@ export default {
         class="form-control dropdown-input-field"
         @input="searchBranches"
       />
-      <icon :size="18" name="search" class="ml-3 input-icon" />
+      <gl-icon :size="18" name="search" class="ml-3 input-icon" />
     </label>
     <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
       <gl-loading-icon

app/assets/javascripts/ide/components/commit_sidebar/list.vue

 <script>
 import { mapActions } from 'vuex';
-import { GlModal } from '@gitlab/ui';
+import { GlModal, GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
 import ListItem from './list_item.vue';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     ListItem,
     GlModal,
   },
@@ -74,7 +73,7 @@ export default {
   <div class="ide-commit-list-container">
     <header class="multi-file-commit-panel-header d-flex mb-0">
       <div class="d-flex align-items-center flex-fill">
-        <icon v-once :name="iconName" :size="18" class="gl-mr-3" />
+        <gl-icon v-once :name="iconName" :size="18" class="gl-mr-3" />
         <strong> {{ titleText }} </strong>
         <div class="d-flex ml-auto">
           <button
@@ -93,7 +92,7 @@ export default {
             data-boundary="viewport"
             @click="openDiscardModal"
           >
-            <icon :size="16" name="remove-all" class="ml-auto mr-auto position-top-0" />
+            <gl-icon :size="16" name="remove-all" class="ml-auto mr-auto position-top-0" />
           </button>
         </div>
       </div>

app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue

 <script>
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
 import { sprintf, n__, __ } from '~/locale';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
   },
   directives: {
     tooltip,
@@ -77,7 +77,7 @@ export default {
       data-placement="left"
       class="gl-mb-5"
     >
-      <icon v-once :name="iconName" :size="18" />
+      <gl-icon v-once :name="iconName" :size="18" />
     </div>
     <div
       v-tooltip
@@ -86,7 +86,7 @@ export default {
       data-placement="left"
       class="gl-mb-3"
     >
-      <icon :name="additionIconName" :size="18" :class="addedFilesIconClass" />
+      <gl-icon :name="additionIconName" :size="18" :class="addedFilesIconClass" />
     </div>
     {{ addedFilesLength }}
     <div
@@ -96,7 +96,7 @@ export default {
       data-placement="left"
       class="gl-mt-3 gl-mb-3"
     >
-      <icon :name="modifiedIconName" :size="18" :class="modifiedFilesClass" />
+      <gl-icon :name="modifiedIconName" :size="18" :class="modifiedFilesClass" />
     </div>
     {{ modifiedFilesLength }}
   </div>

app/assets/javascripts/ide/components/commit_sidebar/list_item.vue

 <script>
 import { mapActions } from 'vuex';
+import { GlIcon } from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
-import Icon from '~/vue_shared/components/icon.vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
 import { viewerTypes } from '../../constants';
 import getCommitIconMap from '../../commit_icon';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     FileIcon,
   },
   directives: {
@@ -95,7 +95,7 @@ export default {
       </span>
       <div class="ml-auto d-flex align-items-center">
         <div class="d-flex align-items-center ide-commit-list-changed-icon">
-          <icon :name="iconName" :size="16" :class="iconClass" />
+          <gl-icon :name="iconName" :size="16" :class="iconClass" />
         </div>
       </div>
     </div>

app/assets/javascripts/ide/components/commit_sidebar/message_field.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '../../../locale';
-import Icon from '../../../vue_shared/components/icon.vue';
 import popover from '../../../vue_shared/directives/popover';
 import { MAX_TITLE_LENGTH, MAX_BODY_LENGTH } from '../../constants';
 
@@ -9,7 +9,7 @@ export default {
     popover,
   },
   components: {
-    Icon,
+    GlIcon,
   },
   props: {
     text: {
@@ -84,7 +84,7 @@ export default {
           <li>
             {{ __('Commit Message') }}
             <span v-popover="$options.popoverOptions" class="form-text text-muted gl-ml-3">
-              <icon name="question" />
+              <gl-icon name="question" />
             </span>
           </li>
         </ul>

app/assets/javascripts/ide/components/file_row_extra.vue

 <script>
 import { mapGetters } from 'vuex';
+import { GlIcon } from '@gitlab/ui';
 import { n__ } from '~/locale';
 import tooltip from '~/vue_shared/directives/tooltip';
-import Icon from '~/vue_shared/components/icon.vue';
 import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
 import NewDropdown from './new_dropdown/index.vue';
 import MrFileIcon from './mr_file_icon.vue';
@@ -13,7 +13,7 @@ export default {
     tooltip,
   },
   components: {
-    Icon,
+    GlIcon,
     NewDropdown,
     ChangedFileIcon,
     MrFileIcon,
@@ -69,7 +69,7 @@ export default {
     <mr-file-icon v-if="file.mrChange" />
     <span v-if="showTreeChangesCount" class="ide-tree-changes">
       {{ changesCount }}
-      <icon
+      <gl-icon
         v-tooltip
         :title="folderChangesTooltip"
         :size="12"

app/assets/javascripts/ide/components/ide_status_bar.vue

 <script>
 /* eslint-disable @gitlab/vue-require-i18n-strings */
 import { mapActions, mapState, mapGetters } from 'vuex';
+import { GlIcon } from '@gitlab/ui';
 import IdeStatusList from './ide_status_list.vue';
 import IdeStatusMr from './ide_status_mr.vue';
-import icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
 import timeAgoMixin from '~/vue_shared/mixins/timeago';
 import CiIcon from '../../vue_shared/components/ci_icon.vue';
@@ -12,7 +12,7 @@ import { rightSidebarViews } from '../constants';
 
 export default {
   components: {
-    icon,
+    GlIcon,
     userAvatarImage,
     CiIcon,
     IdeStatusList,
@@ -97,7 +97,7 @@ export default {
         {{ latestPipeline.details.status.text }} for
       </span>
 
-      <icon name="commit" />
+      <gl-icon name="commit" />
       <a
         v-tooltip
         :title="lastCommit.message"

app/assets/javascripts/ide/components/jobs/detail.vue

 <script>
 import { mapActions, mapState } from 'vuex';
 import { throttle } from 'lodash';
+import { GlIcon } from '@gitlab/ui';
 import { __ } from '../../../locale';
 import tooltip from '../../../vue_shared/directives/tooltip';
-import Icon from '../../../vue_shared/components/icon.vue';
 import ScrollButton from './detail/scroll_button.vue';
 import JobDescription from './detail/description.vue';
 
@@ -17,7 +17,7 @@ export default {
     tooltip,
   },
   components: {
-    Icon,
+    GlIcon,
     ScrollButton,
     JobDescription,
   },
@@ -76,7 +76,7 @@ export default {
   <div class="ide-pipeline build-page d-flex flex-column flex-fill">
     <header class="ide-job-header d-flex align-items-center">
       <button class="btn btn-default btn-sm d-flex" @click="setDetailJob(null)">
-        <icon name="chevron-left" /> {{ __('View jobs') }}
+        <gl-icon name="chevron-left" /> {{ __('View jobs') }}
       </button>
     </header>
     <div class="top-bar d-flex border-left-0 mr-3">

app/assets/javascripts/ide/components/jobs/detail/description.vue

 <script>
-import Icon from '../../../../vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import CiIcon from '../../../../vue_shared/components/ci_icon.vue';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     CiIcon,
   },
   props: {
@@ -27,7 +27,7 @@ export default {
     <span class="gl-ml-3">
       {{ job.name }}
       <a :href="job.path" target="_blank" class="ide-external-link position-relative">
-        {{ jobId }} <icon :size="12" name="external-link" />
+        {{ jobId }} <gl-icon :size="12" name="external-link" />
       </a>
     </span>
   </div>

app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import { __ } from '../../../../locale';
-import Icon from '../../../../vue_shared/components/icon.vue';
 import tooltip from '../../../../vue_shared/directives/tooltip';
 
 const directions = {
@@ -13,7 +13,7 @@ export default {
     tooltip,
   },
   components: {
-    Icon,
+    GlIcon,
   },
   props: {
     direction: {
@@ -58,7 +58,7 @@ export default {
       type="button"
       @click="clickedScroll"
     >
-      <icon :name="iconName" />
+      <gl-icon :name="iconName" />
     </button>
   </div>
 </template>

app/assets/javascripts/ide/components/jobs/stage.vue

 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import tooltip from '../../../vue_shared/directives/tooltip';
-import Icon from '../../../vue_shared/components/icon.vue';
 import CiIcon from '../../../vue_shared/components/ci_icon.vue';
 import Item from './item.vue';
 
@@ -10,7 +9,7 @@ export default {
     tooltip,
   },
   components: {
-    Icon,
+    GlIcon,
     CiIcon,
     Item,
     GlLoadingIcon,
@@ -78,7 +77,7 @@ export default {
       <div v-if="!stage.isLoading || stage.jobs.length" class="gl-mr-3 gl-ml-2">
         <span class="badge badge-pill"> {{ jobsCount }} </span>
       </div>
-      <icon :name="collapseIcon" class="ide-stage-collapse-icon" />
+      <gl-icon :name="collapseIcon" class="ide-stage-collapse-icon" />
     </div>
     <div v-show="!stage.isCollapsed" ref="jobList" class="card-body p-0">
       <gl-loading-icon v-if="showLoadingIcon" />

app/assets/javascripts/ide/components/merge_requests/item.vue

 <script>
-import Icon from '../../../vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
   },
   props: {
     item: {
@@ -41,7 +41,7 @@ export default {
 <template>
   <a :href="mergeRequestHref" class="btn-link d-flex align-items-center">
     <span class="d-flex gl-mr-3 ide-search-list-current-icon">
-      <icon v-if="isActive" :size="18" name="mobile-issue-close" />
+      <gl-icon v-if="isActive" :size="18" name="mobile-issue-close" />
     </span>
     <span>
       <strong> {{ item.title }} </strong>

app/assets/javascripts/ide/components/merge_requests/list.vue

 <script>
 import { mapActions, mapState } from 'vuex';
 import { debounce } from 'lodash';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import Item from './item.vue';
 import TokenedInput from '../shared/tokened_input.vue';
 
@@ -16,7 +15,7 @@ export default {
   components: {
     TokenedInput,
     Item,
-    Icon,
+    GlIcon,
     GlLoadingIcon,
   },
   data() {
@@ -85,7 +84,7 @@ export default {
         @input="searchMergeRequests"
         @removeToken="setSearchType(null)"
       />
-      <icon :size="18" name="search" class="ml-3 input-icon" />
+      <gl-icon :size="18" name="search" class="ml-3 input-icon" />
     </label>
     <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
       <gl-loading-icon
@@ -103,7 +102,7 @@ export default {
                 @click.stop="setSearchType(searchType)"
               >
                 <span class="d-flex gl-mr-3 ide-search-list-current-icon">
-                  <icon :size="18" name="search" />
+                  <gl-icon :size="18" name="search" />
                 </span>
                 <span>{{ searchType.label }}</span>
               </button>

app/assets/javascripts/ide/components/mr_file_icon.vue

 <script>
-import icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
 
 export default {
   components: {
-    icon,
+    GlIcon,
   },
   directives: {
     tooltip,
@@ -13,7 +13,7 @@ export default {
 </script>
 
 <template>
-  <icon
+  <gl-icon
     v-tooltip
     :title="__('Part of merge request changes')"
     :size="12"

app/assets/javascripts/ide/components/nav_dropdown_button.vue

 <script>
 import { mapState } from 'vuex';
+import { GlIcon } from '@gitlab/ui';
 import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 
 const EMPTY_LABEL = '-';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     DropdownButton,
   },
   props: {
@@ -33,10 +33,10 @@ export default {
   <dropdown-button>
     <span class="row flex-nowrap">
       <span class="col-auto flex-fill text-truncate">
-        <icon :size="16" :aria-label="__('Current Branch')" name="branch" /> {{ branchLabel }}
+        <gl-icon :size="16" :aria-label="__('Current Branch')" name="branch" /> {{ branchLabel }}
       </span>
       <span v-if="showMergeRequests" class="col-5 pl-0 text-truncate">
-        <icon :size="16" :aria-label="__('Merge Request')" name="merge-request" />
+        <gl-icon :size="16" :aria-label="__('Merge Request')" name="merge-request" />
         {{ mergeRequestLabel }}
       </span>
     </span>

app/assets/javascripts/ide/components/new_dropdown/button.vue

 <script>
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
 
 export default {
@@ -7,7 +7,7 @@ export default {
     tooltip,
   },
   components: {
-    Icon,
+    GlIcon,
   },
   props: {
     label: {
@@ -52,7 +52,7 @@ export default {
     class="btn-blank"
     @click.stop.prevent="clicked"
   >
-    <icon :name="icon" :class="iconClasses" />
+    <gl-icon :name="icon" :class="iconClasses" />
     <template v-if="showLabel">
       {{ label }}
     </template>

app/assets/javascripts/ide/components/new_dropdown/index.vue

 <script>
 import { mapActions } from 'vuex';
-import icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import upload from './upload.vue';
 import ItemButton from './button.vue';
 import { modalTypes } from '../../constants';
@@ -8,7 +8,7 @@ import NewModal from './modal.vue';
 
 export default {
   components: {
-    icon,
+    GlIcon,
     upload,
     ItemButton,
     NewModal,
@@ -67,7 +67,7 @@ export default {
         data-qa-selector="dropdown_button"
         @click.stop="openDropdown()"
       >
-        <icon name="ellipsis_v" /> <icon name="chevron-down" />
+        <gl-icon name="ellipsis_v" /> <gl-icon name="chevron-down" />
       </button>
       <ul ref="dropdownMenu" class="dropdown-menu dropdown-menu-right">
         <template v-if="type === 'tree'">

app/assets/javascripts/ide/components/pipelines/list.vue

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { escape } from 'lodash';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { sprintf, __ } from '../../../locale';
-import Icon from '../../../vue_shared/components/icon.vue';
 import CiIcon from '../../../vue_shared/components/ci_icon.vue';
 import Tabs from '../../../vue_shared/components/tabs/tabs';
 import Tab from '../../../vue_shared/components/tabs/tab.vue';
@@ -14,7 +13,7 @@ import IDEServices from '~/ide/services';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     CiIcon,
     Tabs,
     Tab,
@@ -70,7 +69,7 @@ export default {
             target="_blank"
             class="ide-external-link position-relative"
           >
-            #{{ latestPipeline.id }} <icon :size="12" name="external-link" />
+            #{{ latestPipeline.id }} <gl-icon :size="12" name="external-link" />
           </a>
         </span>
       </header>

app/assets/javascripts/ide/components/preview/navigator.vue

 <script>
 import { listen } from 'codesandbox-api';
-import { GlLoadingIcon } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     GlLoadingIcon,
   },
   props: {
@@ -97,7 +96,7 @@ export default {
       class="ide-navigator-btn d-flex align-items-center d-transparent border-0 bg-transparent"
       @click="back"
     >
-      <icon :size="24" name="chevron-left" class="m-auto" />
+      <gl-icon :size="24" name="chevron-left" class="m-auto" />
     </button>
     <button
       :aria-label="s__('IDE|Back')"
@@ -109,7 +108,7 @@ export default {
       class="ide-navigator-btn d-flex align-items-center d-transparent border-0 bg-transparent"
       @click="forward"
     >
-      <icon :size="24" name="chevron-right" class="m-auto" />
+      <gl-icon :size="24" name="chevron-right" class="m-auto" />
     </button>
     <button
       :aria-label="s__('IDE|Refresh preview')"
@@ -117,7 +116,7 @@ export default {
       class="ide-navigator-btn d-flex align-items-center d-transparent border-0 bg-transparent"
       @click="refresh"
     >
-      <icon :size="18" name="retry" class="m-auto" />
+      <gl-icon :size="18" name="retry" class="m-auto" />
     </button>
     <div class="position-relative w-100 gl-ml-2">
       <input

app/assets/javascripts/ide/components/repo_file_status_icon.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
-import icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
 import '~/lib/utils/datetime_utility';
 
 export default {
   components: {
-    icon,
+    GlIcon,
   },
   directives: {
     tooltip,
@@ -29,6 +29,6 @@ export default {
 
 <template>
   <span v-if="file.file_lock" v-tooltip :title="lockTooltip" data-container="body">
-    <icon name="lock" class="file-status-icon" />
+    <gl-icon name="lock" class="file-status-icon" />
   </span>
 </template>

app/assets/javascripts/ide/components/repo_tab.vue

 <script>
 import { mapActions } from 'vuex';
+import { GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 
 import FileIcon from '~/vue_shared/components/file_icon.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
 import FileStatusIcon from './repo_file_status_icon.vue';
 
@@ -11,7 +11,7 @@ export default {
   components: {
     FileStatusIcon,
     FileIcon,
-    Icon,
+    GlIcon,
     ChangedFileIcon,
   },
   props: {
@@ -91,7 +91,7 @@ export default {
       class="multi-file-tab-close"
       @click.stop.prevent="closeFile(tab)"
     >
-      <icon v-if="!showChangedIcon" :size="12" name="close" />
+      <gl-icon v-if="!showChangedIcon" :size="12" name="close" />
       <changed-file-icon v-else :file="tab" />
     </button>
   </li>

app/assets/javascripts/ide/components/shared/tokened_input.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
   },
   props: {
     placeholder: {
@@ -81,7 +81,7 @@ export default {
           >
             <div class="value-container rounded">
               <div class="value">{{ token.label }}</div>
-              <div class="remove-token inverted"><icon :size="10" name="close" /></div>
+              <div class="remove-token inverted"><gl-icon :size="10" name="close" /></div>
             </div>
           </button>
         </div>

app/assets/javascripts/ide/components/terminal_sync/terminal_sync_status.vue

 <script>
 import { throttle } from 'lodash';
-import { GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui';
+import { GlTooltipDirective, GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { mapState } from 'vuex';
-import Icon from '~/vue_shared/components/icon.vue';
 import {
   MSG_TERMINAL_SYNC_CONNECTING,
   MSG_TERMINAL_SYNC_UPLOADING,
@@ -11,7 +10,7 @@ import {
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     GlLoadingIcon,
   },
   directives: {
@@ -70,7 +69,7 @@ export default {
     <span>{{ __('Terminal') }}:</span>
     <span class="square s16 d-flex-center ml-1" :aria-label="status.text">
       <gl-loading-icon v-if="isLoading" inline size="sm" class="d-flex-center" />
-      <icon v-else-if="status.icon" :name="status.icon" :size="16" />
+      <gl-icon v-else-if="status.icon" :name="status.icon" :size="16" />
     </span>
   </div>
 </template>

spec/frontend/ide/components/branches/item_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlIcon } from '@gitlab/ui';
 import { createStore } from '~/ide/stores';
 import { createRouter } from '~/ide/ide_router';
 import Item from '~/ide/components/branches/item.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 import Timeago from '~/vue_shared/components/time_ago_tooltip.vue';
 import { projectData } from '../../mock_data';
 
@@ -45,7 +45,7 @@ describe('IDE branch item', () => {
     it('renders branch name and timeago', () => {
       expect(wrapper.text()).toContain(TEST_BRANCH.name);
       expect(wrapper.find(Timeago).props('time')).toBe(TEST_BRANCH.committedDate);
-      expect(wrapper.find(Icon).exists()).toBe(false);
+      expect(wrapper.find(GlIcon).exists()).toBe(false);
     });
 
     it('renders link to branch', () => {
@@ -60,6 +60,6 @@ describe('IDE branch item', () => {
   it('renders icon if is not active', () => {
     createComponent({ isActive: true });
 
-    expect(wrapper.find(Icon).exists()).toBe(true);
+    expect(wrapper.find(GlIcon).exists()).toBe(true);
   });
 });

spec/frontend/ide/components/jobs/__snapshots__/stage_spec.js.snap

@@ -34,7 +34,7 @@ exports[`IDE pipeline stage renders stage details & icon 1`] = `
       </span>
     </div>
      
-    <icon-stub
+    <gl-icon-stub
       class="ide-stage-collapse-icon"
       name="angle-down"
       size="16"

spec/frontend/ide/components/jobs/detail/scroll_button_spec.js

 import { shallowMount } from '@vue/test-utils';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import ScrollButton from '~/ide/components/jobs/detail/scroll_button.vue';
 
 describe('IDE job log scroll button', () => {
@@ -27,7 +27,7 @@ describe('IDE job log scroll button', () => {
     beforeEach(() => createComponent({ direction }));
 
     it('returns proper icon name', () => {
-      expect(wrapper.find(Icon).props('name')).toBe(icon);
+      expect(wrapper.find(GlIcon).props('name')).toBe(icon);
     });
 
     it('returns proper title', () => {

spec/frontend/ide/components/terminal_sync/terminal_sync_status_spec.js

 import Vuex from 'vuex';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import TerminalSyncStatus from '~/ide/components/terminal_sync/terminal_sync_status.vue';
 import {
   MSG_TERMINAL_SYNC_CONNECTING,
   MSG_TERMINAL_SYNC_UPLOADING,
   MSG_TERMINAL_SYNC_RUNNING,
 } from '~/ide/stores/modules/terminal_sync/messages';
-import Icon from '~/vue_shared/components/icon.vue';
 
 const TEST_MESSAGE = 'lorem ipsum dolar sit';
 const START_LOADING = 'START_LOADING';
@@ -80,7 +79,7 @@ describe('ide/components/terminal_sync/terminal_sync_status', () => {
 
     if (!icon) {
       it('does not render icon', () => {
-        expect(wrapper.find(Icon).exists()).toBe(false);
+        expect(wrapper.find(GlIcon).exists()).toBe(false);
       });
 
       it('renders loading icon', () => {
@@ -88,7 +87,7 @@ describe('ide/components/terminal_sync/terminal_sync_status', () => {
       });
     } else {
       it('renders icon', () => {
-        expect(wrapper.find(Icon).props('name')).toEqual(icon);
+        expect(wrapper.find(GlIcon).props('name')).toEqual(icon);
       });
 
       it('does not render loading icon', () => {