Replace ionicons icon font with inline SVG

* feature/inline-ionicons:
  Completely deprecate iconfonts
  Update more icons
  Update ionicons-inline
  Redo inline-ionicons
  Implement some inline ionicions

_sass/2017/components/back-button.scss

@@ -35,8 +35,14 @@
 
   // Icon
   &::before {
-    @include ion-icon('md-arrow-back');
-    font-size: 24px;
+    content: '';
+    @include ion-md-arrow-back(24px, $base-text);
+    vertical-align: middle;
+  }
+
+  &:hover::before,
+  &:focus::before {
+    @include ion-md-arrow-back(24px, white);
   }
 
   // Icon: smaller on mobile

_sass/2017/components/comments-details.scss

@@ -36,9 +36,10 @@
   }
 
   & > summary > .count::before {
-    @include ion-icon('md-chatboxes');
+    @include ion-md-chatboxes(24px, $base-a);
+    content: '';
+    vertical-align: middle;
     color: $base-a;
-    font-size: 24px;
     margin: 0 8px;
   }
 

_sass/2017/components/home-button.scss

@@ -16,20 +16,19 @@
 
   &:hover,
   &:focus {
-    background: $base-a;
+    background-color: $base-a;
     color: white;
   }
 
   & > i::before {
-    @include ion-icon('ios-home-outline');
-    font-size: 24px;
+    content: '';
+    @include ion-ios-home-outline(24px, $base-mute);
     height: 48px;
     line-height: 48px;
     width: 48px;
-    text-align: center;
   }
 
   &:hover > i::before {
-    @extend %ion-icon-ios-home;
+    background-image: ion-ios-home-image(white);
   }
 }

_sass/2017/components/missing-message.scss

@@ -25,9 +25,8 @@
   }
 
   & > h3::before {
-    @include ion-icon('md-arrow-forward');
-    font-size: 24px;
-    color: $base-a;
+    content: '';
+    @include ion-md-arrow-forward(24px, $base-a);
     margin-right: 16px;
   }
 

_sass/2017/components/notice-box.scss

@@ -9,10 +9,9 @@
   }
 
   &::before {
-    @include ion-icon('md-information-circle');
-    font-size: 24px;
+    content: '';
+    @include ion-md-information-circle(24px, $base-mute3);
     margin-right: 8px;
-    color: $base-mute3;
   }
 
   & > a {

_sass/2017/components/page-actions.scss

@@ -3,8 +3,7 @@
     height: 32px;
   }
 
-  & > .link.link > a,
-  & > .link.link > a::before {
+  & > .link.link > a {
     display: inline-block;
     height: 32px;
     line-height: 32px;
@@ -62,16 +61,29 @@
     margin-left: 8px;
   }
 
+  & > .facebook > a::before,
+  & > .twitter > a::before,
+  & > .github > a::before {
+    content: '';
+    vertical-align: middle;
+    position: relative;
+    top: -2px;
+  }
+
   & > .facebook > a::before {
-    @include ion-icon('logo-facebook');
+    @include ion-logo-facebook(16px, #334455);
   }
 
   & > .twitter > a::before {
-    @include ion-icon('logo-twitter');
+    @include ion-logo-twitter(16px, #334455);
   }
 
   & > .github > a::before {
-    @include ion-icon('logo-github');
+    @include ion-logo-github(16px, #334455);
+  }
+
+  & > .github > a:hover::before {
+    @include ion-logo-github(16px, white);
   }
 
   & > .link.-button > a {

_sass/2017/components/pre-footer.scss

@@ -1,4 +1,5 @@
 /*
+    content: '';
  * Spacer before footer
  */
 
@@ -11,9 +12,8 @@
   }
 
   & > .icon::before {
-    @include ion-icon('ios-flash');
-    color: $base-mute;
-    font-size: 32px;
+    content: '';
+    @include ion-ios-flash(32px, $base-mute);
     opacity: 0.25;
   }
 }

_sass/2017/components/related-posts-callout.scss

@@ -34,16 +34,13 @@
   & > .text > .icon {
     margin-bottom: 16px;
     display: block;
-    color: adjust-color($base-a, $lightness: 16%, $hue: 20deg);
   }
 
   & > .text > .icon::before {
-    @include ion-icon('ios-arrow-back');
-    font-size: 48px;
+    content: '';
+    @include ion-ios-arrow-back(48px, adjust-color($base-a, $lightness: 16%, $hue: 20deg));
     height: 64px;
     width: 64px;
-    line-height: 64px - 4px;
-    text-align: center;
     border: solid 2px adjust-color($base-a, $lightness: 16%, $hue: 20deg);
     border-radius: 50%;
     text-indent: -2px;

_sass/2017/components/search-box.scss

@@ -63,13 +63,11 @@
 
   // Icon
   &::before {
-    @include ion-icon('md-search');
-    font-size: 32px;
-    color: $base-head;
+    content: '';
+    @include ion-md-search(32px, $base-head);
+    background-position: center center;
     flex: 0 0 64px;
     width: 64px;
-    line-height: 64px;
-    text-align: center;
     order: 2;
   }
 }
@@ -99,6 +97,7 @@
     flex: 0 0 48px;
     width: 48px;
     line-height: 48px;
-    font-size: 24px;
+    background-size: 24px 24px;
+    background-position: center center;
   }
 }

_sass/2017/markdown/p.scss

@@ -24,20 +24,19 @@
   }
 
   & > a::before {
-    @include ion-icon('md-arrow-forward');
-    font-size: 24px;
+    content: '';
+    @include ion-md-arrow-forward(16px, white);
     margin-right: 16px;
     width: 32px;
     height: 32px;
     line-height: 32px;
-    text-align: center;
     border-radius: 50%;
   }
 
   & > a,
   & > a:visited {
     &::before {
-      background: $base-a;
+      background-color: $base-a;
       color: white;
     }
   }
@@ -49,7 +48,7 @@
     }
 
     &::before {
-      background: $base-a7;
+      background-color: $base-a7;
     }
   }
 }

_sass/2017/style.scss

@@ -1,6 +1,6 @@
 @import './variables';
 @import '../vendor/modularscale/modularscale';
-@import '../vendor/iconfonts/ionicons@3';
+@import '../vendor/ionicons-inline/ionicons';
 @import './utils/carbon-style';
 @import './utils/font-size';
 @import './utils/gutter';
@@ -8,7 +8,6 @@
 @import './utils/section-gutter';
 @import './utils/section-with-container';
 @import './placeholders/push-button';
-@include ion-font;
 @import './base/base';
 @import './markdown/a-em';
 @import './markdown/code';