Completely deprecate iconfonts

_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/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

@@ -97,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,5 @@
 @import './variables';
 @import '../vendor/modularscale/modularscale';
-@import '../vendor/iconfonts/ionicons@3';
 @import '../vendor/ionicons-inline/ionicons';
 @import './utils/carbon-style';
 @import './utils/font-size';
@@ -9,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';