diff --git a/core/src/components/menu-button/menu-button.ios.scss b/core/src/components/menu-button/menu-button.ios.scss
index 310e46c962..a36db107d3 100644
--- a/core/src/components/menu-button/menu-button.ios.scss
+++ b/core/src/components/menu-button/menu-button.ios.scss
@@ -5,7 +5,7 @@
 // --------------------------------------------------
 
 :host {
-  color: #{ion-color(primary, base)};
+  --color: #{$menu-button-ios-color};
 }
 
 :host(.activated) {
diff --git a/core/src/components/menu-button/menu-button.md.scss b/core/src/components/menu-button/menu-button.md.scss
index b0c077d4cd..d1c791ccfa 100644
--- a/core/src/components/menu-button/menu-button.md.scss
+++ b/core/src/components/menu-button/menu-button.md.scss
@@ -3,6 +3,9 @@
 
 // MD Menu Button
 // --------------------------------------------------
+:host {
+  --color: #{$menu-button-md-color};
+}
 
 button {
   @include padding(0, 8px);
diff --git a/core/src/components/menu-button/menu-button.scss b/core/src/components/menu-button/menu-button.scss
index e51fd91afa..a1e683bd48 100644
--- a/core/src/components/menu-button/menu-button.scss
+++ b/core/src/components/menu-button/menu-button.scss
@@ -4,6 +4,8 @@
 // --------------------------------------------------
 
 :host {
+  color: var(--color);
+  
   pointer-events: all;
 
   text-align: center;
@@ -52,3 +54,10 @@ ion-icon {
 
   pointer-events: none;
 }
+
+// Menu Button with Color
+// --------------------------------------------------
+
+:host(.ion-color) .button-native {
+  color: current-color(base);
+}
\ No newline at end of file