diff --git a/ionic/components/badge/badge.ios.scss b/ionic/components/badge/badge.ios.scss
index b6bbf311bc..13d0435ee2 100644
--- a/ionic/components/badge/badge.ios.scss
+++ b/ionic/components/badge/badge.ios.scss
@@ -9,3 +9,16 @@ $badge-ios-border-radius:             10px !default;
 ion-badge {
   border-radius: $badge-ios-border-radius;
 }
+
+
+// Generate iOS Badge Colors
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-ios {
+
+  ion-badge[#{$color-name}] {
+    background-color: $color-value;
+    color: inverse($color-value);
+  }
+
+}
diff --git a/ionic/components/badge/badge.md.scss b/ionic/components/badge/badge.md.scss
index d7c3ec3f86..d3f6ca03f4 100644
--- a/ionic/components/badge/badge.md.scss
+++ b/ionic/components/badge/badge.md.scss
@@ -9,3 +9,16 @@ $badge-md-border-radius:             4px !default;
 ion-badge {
   border-radius: $badge-md-border-radius;
 }
+
+
+// Generate Material Design Badge Colors
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-md {
+
+  ion-badge[#{$color-name}] {
+    background-color: $color-value;
+    color: inverse($color-value);
+  }
+
+}
diff --git a/ionic/components/badge/badge.scss b/ionic/components/badge/badge.scss
index 24da8e84f2..d33077603f 100644
--- a/ionic/components/badge/badge.scss
+++ b/ionic/components/badge/badge.scss
@@ -27,15 +27,3 @@ ion-badge {
     display: none;
   }
 }
-
-// Generate Default Badge Colors
-// --------------------------------------------------
-
-@each $color-name, $color-value in $colors {
-
-  ion-badge[#{$color-name}] {
-    background-color: $color-value;
-    color: inverse($color-value);
-  }
-
-}