1 files changed, 20 insertions, 23 deletions
diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue
index 09ca11531b1..f7f4db89bdf 100644
--- a/app/assets/javascripts/ide/components/repo_file.vue
+++ b/app/assets/javascripts/ide/components/repo_file.vue
@@ -3,15 +3,17 @@
   import timeAgoMixin from '../../vue_shared/mixins/timeago';
   import skeletonLoadingContainer from '../../vue_shared/components/skeleton_loading_container.vue';
   import newDropdown from './new_dropdown/index.vue';
+  import fileIcon from '../../vue_shared/components/file_icon.vue';
 
   export default {
-    mixins: [
-      timeAgoMixin,
-    ],
     components: {
       skeletonLoadingContainer,
       newDropdown,
+      fileIcon,
     },
+    mixins: [
+      timeAgoMixin,
+    ],
     props: {
       file: {
         type: Object,
@@ -26,13 +28,6 @@
       ...mapState([
         'leftPanelCollapsed',
       ]),
-      fileIcon() {
-        return {
-          'fa-spinner fa-spin': this.file.loading,
-          [this.file.icon]: !this.file.loading,
-          'fa-folder-open': !this.file.loading && this.file.opened,
-        };
-      },
       isSubmodule() {
         return this.file.type === 'submodule';
       },
@@ -65,6 +60,11 @@
         };
       },
     },
+    updated() {
+      if (this.file.type === 'blob' && this.file.active) {
+        this.$el.scrollIntoView();
+      }
+    },
     methods: {
       clickFile(row) {
         // Manual Action if a tree is selected/opened
@@ -77,11 +77,6 @@
         this.$router.push(`/project${row.url}`);
       },
     },
-    updated() {
-      if (this.file.type === 'blob' && this.file.active) {
-        this.$el.scrollIntoView();
-      }
-    },
   };
 </script>
 
@@ -94,16 +89,17 @@
       class="multi-file-table-name"
       :colspan="submoduleColSpan"
     >
-      <i
-        class="fa fa-fw file-icon"
-        :class="fileIcon"
-        :style="levelIndentation"
-        aria-hidden="true"
-      >
-      </i>
       <a
         class="repo-file-name"
       >
+        <file-icon
+          :file-name="file.name"
+          :loading="file.loading"
+          :folder="file.type === 'tree'"
+          :opened="file.opened"
+          :style="levelIndentation"
+          :size="16"
+        />
         {{ file.name }}
       </a>
       <new-dropdown
@@ -111,7 +107,8 @@
         :project-id="file.projectId"
         :branch="file.branchId"
         :path="file.path"
-        :parent="file"/>
+        :parent="file"
+      />
       <i
         class="fa"
         v-if="changedClass"