File Icons in Merge Requests

app/assets/javascripts/diffs/components/diff_file_header.vue

@@ -2,6 +2,7 @@
 import _ from 'underscore';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import Icon from '~/vue_shared/components/icon.vue';
+import FileIcon from '~/vue_shared/components/file_icon.vue';
 import Tooltip from '~/vue_shared/directives/tooltip';
 import { truncateSha } from '~/lib/utils/text_utility';
 import { __, s__, sprintf } from '~/locale';
@@ -12,6 +13,7 @@ export default {
     ClipboardButton,
     EditButton,
     Icon,
+    FileIcon,
   },
   directives: {
     Tooltip,
@@ -139,18 +141,20 @@ export default {
         :name="collapseIcon"
         :size="16"
         aria-hidden="true"
-        class="diff-toggle-caret"
+        class="diff-toggle-caret append-right-5"
         @click.stop="handleToggle"
       />
       <a
         ref="titleWrapper"
         :href="titleLink"
+        class="append-right-4"
       >
-        <i
-          :class="`fa-${icon}`"
-          class="fa fa-fw"
+        <file-icon
+          :file-name="filePath"
+          :size="18"
           aria-hidden="true"
-        ></i>
+          css-classes="js-file-icon append-right-5"
+        />
         <span v-if="diffFile.renamedFile">
           <strong
             v-tooltip

app/assets/stylesheets/pages/diff.scss

@@ -15,7 +15,7 @@
     }
 
     svg {
-      vertical-align: text-bottom;
+      vertical-align: middle;
     }
   }
 

spec/javascripts/diffs/components/diff_file_header_spec.js

@@ -280,11 +280,11 @@ describe('diff_file_header', () => {
       });
     });
 
-    it('displays an icon in the title', () => {
+    it('displays an file icon in the title', () => {
       vm = mountComponent(Component, props);
-
-      const icon = vm.$el.querySelector(`i[class="fa fa-fw fa-${vm.icon}"]`);
-      expect(icon).not.toBe(null);
+      expect(vm.$el.querySelector('svg.js-file-icon use').getAttribute('xlink:href')).toContain(
+        'ruby',
+      );
     });
 
     describe('file paths', () => {