refactor some of the icon styles an usages

app/styles/app/layouts/jobs.sass

@@ -156,25 +156,3 @@
 .job-duration
   flex: 1 0 14%
   padding-right: 1em
-.icon-clock
-  display: inline-block
-  width: 16px
-  height: 20px
-  margin-right: .3em
-  vertical-align: middle
-  background:
-    size: auto 20px
-    position: -2px 0
-  @extend %icon-line-clock
-
-.icon-calendar
-  display: inline-block
-  width: 16px
-  height: 18px
-  margin-right: .3em
-  vertical-align: middle
-  background:
-    size: auto 18px
-    position: -1px 0
-  @extend %icon-line-calendar
-

app/styles/app/modules/build-header.sass

@@ -89,35 +89,5 @@
   margin: 1rem 0
   list-style: none
   line-height: 1.7
-
-  .commit-commit,
-  .commit-compare
-    @extend %icon-line-commit
-    padding-left: 1.7em
-    background:
-      size: auto 23px
-      repeat: no-repeat
-      position: -11px -1px
   .commit-clock
-    @extend %icon-line-clock
-    padding-left: 1.7em
     margin-bottom: 1rem
-    background:
-      size: auto 22px
-      repeat: no-repeat
-      position: 0 2px
-  .commit-calendar
-    @extend %icon-line-calendar
-    padding-left: 1.7em
-    background:
-      size: auto 20px
-      repeat: no-repeat
-      position: 1px 3px
-  .commit-stopwatch
-    @extend %icon-line-stopwatch
-    padding-left: 1.7em
-    background:
-      size: auto 18px
-      repeat: no-repeat
-      position: 4px 3px
-

app/styles/app/modules/icons.sass

@@ -1,5 +1,6 @@
 %icon
   display: inline-block
+  vertical-align: middle
   background:
     size: 100%
     repeat: no-repeat
@@ -53,19 +54,19 @@
 .icon-key
   @extend %icon
   @extend %icon-line-key
-  width: 1.2em
+  width: 20px
-  height: 1.3em
+  height: 20px
   background-position: 0 6px
-  margin-right: .3em
+  margin-right: .1em
 
 %icon-line-fingerprint
   background-image: inline-image('line-icons/icon-fingerprint.svg')
 .icon-fingerprint
   @extend %icon
   @extend %icon-line-fingerprint
-  width: 1.3em
+  width: 20px
-  height: 1.3em
+  height: 20px
-  margin-right: .3em
+  margin-right: .1em
 
 %icon-line-calendar
   background-image: inline-image('line-icons/icon-cal.svg')
@@ -73,16 +74,36 @@
 .icon-cal,
 .icon-calendar
   @extend %icon
-  @extend %icon-line-fingre
+  @extend %icon-line-calendar
+  width: 20px
+  height: 18px
+  margin-right: .1em
+  background:
+    size: auto 20px
+    position: -1px 0
 
 %icon-line-clock
   background-image: inline-image('line-icons/icon-clock.svg')
-.icon-line-clock
+.icon-clock
   @extend %icon
   @extend %icon-line-clock
+  width: 20px
+  height: 20px
+  margin-right: .1em
+  background:
+    size: auto 21px
+    position: -2px 0
 
 %icon-line-stopwatch
   background-image: inline-image('line-icons/icon-stopwatch.svg')
+.icon-stopwatch
+  @extend %icon
+  @extend %icon-line-stopwatch
+  width: 20px
+  height: 18px
+  margin-right: .1em
+  background-size: auto 18px
+  background-position: 1px 0
 
 .icon-line-build
   @extend %icon
@@ -94,7 +115,6 @@
   @extend %icon
   @extend %icon-line-commit
 
-
 %icon-line-eye
   background-image:inline-image('line-icons/icon-view.svg')
 

app/templates/components/build-header.hbs

@@ -19,15 +19,19 @@
     <ul class="list-icon">
       <li>
         <a class="commit-commit" title="See the commit on GitHub" href={{urlGithubCommit}}>
-          Commit {{format-sha commit.sha}}</a>
+          <span class="icon-github" aria-hidden="true"></span>
+          <span class="label-align">Commit {{format-sha commit.sha}}</span></a>
       </li>
       <li>
         {{#if item.pullRequest}}
-          <a class="commit-compare" title="See the commit on GitHub" href={{item.commit.compareUrl}}>#{{item.pullRequestNumber}}: {{item.pullRequestTitle}}</a>
+          <a class="commit-compare" title="See the commit on GitHub" href={{item.commit.compareUrl}}>
+            <span class="icon-github" aria-hidden="true"></span>
+            <span class="label-align">#{{item.pullRequestNumber}}: {{item.pullRequestTitle}}</span></a>
         {{else}}
           {{#if item.commit.compareUrl}}
             <a class="commit-compare" title="See the diff on GitHub" href={{item.commit.compareUrl}}>
-            Compare {{short-compare-shas item.commit.compareUrl}}</a>
+              <span class="icon-github" aria-hidden="true"></span>
+              <span class="label-align">Compare {{short-compare-shas item.commit.compareUrl}}</span></a>
           {{/if}}
         {{/if}}
       </li>
@@ -56,13 +60,19 @@
     {{/if}}
   </h3>
   <ul class="list-icon">
-    <li title="{{format-duration elapsedTime}}" class="commit-stopwatch">Elapsed time {{format-duration elapsedTime}}</li>
+    <li title="{{format-duration elapsedTime}}" class="commit-stopwatch">
+      <span class="icon-stopwatch" aria-hidden="true"></span>
+      <span class="label-align">Elapsed time {{format-duration elapsedTime}}</span></li>
     {{#unless isJob}}
       {{#if item.isMatrix}}
-        <li title="{{format-duration item.duration}}" class="commit-clock">{{#if item.isFinished}}Total time{{else}}Running{{/if}} for {{format-duration item.duration}}</li>
+        <li title="{{format-duration item.duration}}" class="commit-clock">
+          <span class="icon-clock" aria-hidden="true"></span>
+          <span class="label-align">{{#if item.isFinished}}Total time{{else}}Running{{/if}} for {{format-duration item.duration}}</span></li>
       {{/if}}
     {{/unless}}
-    <li title="{{pretty-date item.finishedAt}}" class="commit-calendar">{{format-time item.finishedAt}}</li>
+    <li title="{{pretty-date item.finishedAt}}" class="commit-calendar">
+      <span class="icon-calendar" aria-hidden="true"></span>
+      <span class="label-align">{{format-time item.finishedAt}}</span></li>
   </ul>
 </div>
 <div class="build-tools">