Add file type icons

app/components/directory-listing/template.hbs

@@ -8,6 +8,7 @@
   <tbody>
     {{#each items as |item|}}
     <tr>
+      <td class="icon">{{item-icon type=item.type}}</td>
       <td class="name">{{item.name}}</td>
       <td class="type">{{item.type}}</td>
     </tr>

app/components/item-icon/component.js

@@ -0,0 +1,9 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+
+  classNames: ['item-icon'],
+
+  type: null,
+
+});

app/components/item-icon/template.hbs

@@ -0,0 +1 @@
+<img src="/img/file-icons/{{type}}.svg">

app/styles/app.scss

@@ -11,4 +11,5 @@ body {
   padding: 0;
 }
 
-@import "components/directory_listing";
+@import "components/directory-listing";
+@import "components/item-icon";

app/styles/components/_directory-listing.scss

@@ -18,6 +18,10 @@
       td {
         padding: 1rem 1.5rem;
 
+        &.icon {
+          width: 1rem;
+          padding-right: 0;
+        }
         &.type {
           color: #aaa;
         }

app/styles/components/_item-icon.scss

@@ -0,0 +1,8 @@
+.item-icon {
+
+  img {
+    height: 1.2rem;
+    vertical-align: middle;
+  }
+
+}