diff --git a/ionic/components/app/app.ios.scss b/ionic/components/app/app.ios.scss
index 7cdc41bfd0..074450f970 100644
--- a/ionic/components/app/app.ios.scss
+++ b/ionic/components/app/app.ios.scss
@@ -35,7 +35,8 @@ hr {
   strong,
   em,
   sub,
-  sup {
+  sup,
+  ion-icon {
     &[#{$color-name}] {
       color: $color-value !important;
     }
diff --git a/ionic/components/app/app.md.scss b/ionic/components/app/app.md.scss
index 7a019ce87c..f81d16910f 100644
--- a/ionic/components/app/app.md.scss
+++ b/ionic/components/app/app.md.scss
@@ -30,7 +30,8 @@ hr {
   strong,
   em,
   sub,
-  sup {
+  sup,
+  ion-icon {
     &[#{$color-name}] {
       color: $color-value !important;
     }
diff --git a/ionic/components/icon/icon.ts b/ionic/components/icon/icon.ts
index 94c469d99d..3e521ce69f 100644
--- a/ionic/components/icon/icon.ts
+++ b/ionic/components/icon/icon.ts
@@ -70,7 +70,7 @@ export class Icon {
       // deprecated warning
       console.warn('<icon> has been renamed to <ion-icon>');
       console.warn('<ion-icon> requires the "name" attribute w/ a value');
-      console.warn('<ion home></icon> should now be <ion-icon name="home"></ion-icon>');
+      console.warn('<icon home></icon> should now be <ion-icon name="home"></ion-icon>');
     }
   }