fix(menu-button): get proper styles when used inside ion-buttons

core/src/components/menu-button/menu-button.ios.scss

@@ -4,37 +4,14 @@
 // iOS Menu Button
 // --------------------------------------------------
 
-.menu-button-inner {
-  @include padding(0);
-  @include margin(2px, 0, 0, 0);
+:host {
+  --ion-color-base: #{ion-color(primary, base)};
+}
 
-  min-height: 32px;
-
-  transform: translateZ(0);
-
-  border: 0;
-
-  background-color: transparent;
-  color: $menu-button-ios-color;
-
-  font-size: 17px;
-
-  line-height: 1;
-
-  overflow: visible;
-  z-index: $menu-button-ios-button-z-index;
-
-  &.activated {
-    opacity: .4;
-  }
+button {
+  padding: 0 5px;
 }
 
 ion-icon {
-  @include padding(0);
-  @include margin(0, -3px, 0, 0);
-
-  display: inherit;
-
-  font-size: 1.75em;
-  pointer-events: none;
+  font-size: 31px;
 }

core/src/components/menu-button/menu-button.md.scss

@@ -4,40 +4,14 @@
 // MD Menu Button
 // --------------------------------------------------
 
-.menu-button-inner {
-  @include margin(2px, 6px, 0, 0);
-  @include padding(0, 5px);
+:host {
+  --ion-color-base: currentColor;
+}
 
-  min-width: 44px;
-  height: 32px;
-
-  border: 0;
-
-  background-color: transparent;
-  color: $menu-button-md-color;
-
-  font-size: 14px;
-  font-weight: 500;
-
-  text-transform: uppercase;
-
-  box-shadow: none;
-
-  &.activated {
-    opacity: .4;
-  }
+button {
+  padding: 0 8px;
 }
 
 ion-icon {
-  @include padding-horizontal(null, .3em);
-  @include margin(0);
-  @include padding(0, 6px);
-
-  font-size: 24px;
-  font-weight: normal;
-
-  line-height: .67;
-
-  text-align: start;
-  pointer-events: none;
+  font-size: 26px;
 }

core/src/components/menu-button/menu-button.scss

@@ -5,6 +5,8 @@
 
 :host {
   pointer-events: all;
+
+  color: #{current-color(base)};
 }
 
 button {
@@ -13,6 +15,7 @@ button {
   @include font-smoothing();
 
   display: flex;
+  height: 32px;
   position: relative;
 
   flex-flow: row nowrap;
@@ -42,3 +45,9 @@ button {
   font-kerning: none;
   appearance: none;
 }
+
+ion-icon {
+  padding: 0;
+  margin: 0;
+  pointer-events: none;
+}

core/src/components/menu-button/menu-button.tsx

@@ -1,5 +1,5 @@
 import { Component, Prop } from '@stencil/core';
-import { Config, Mode } from '../../interface';
+import { Color, Config, Mode } from '../../interface';
 
 @Component({
   tag: 'ion-menu-button',
@@ -11,10 +11,19 @@ import { Config, Mode } from '../../interface';
 })
 export class MenuButton {
 
-  mode!: Mode;
-
   @Prop({ context: 'config' }) config!: Config;
 
+  /**
+   * The color to use for the background of the item.
+   */
+  @Prop() color?: Color;
+
+  /**
+   * The mode determines which platform styles to use.
+   * Possible values are: `"ios"` or `"md"`.
+   */
+  @Prop() mode!: Mode;
+
   /**
    * Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `right` for the menu side. This is used to find the correct menu to toggle
    */
@@ -25,13 +34,21 @@ export class MenuButton {
    */
   @Prop() autoHide = true;
 
+  hostData() {
+    return {
+      class: {
+        'button': true
+      }
+    };
+  }
+
   render() {
     const menuIcon = this.config.get('menuIcon', 'menu');
     return (
       <ion-menu-toggle menu={this.menu} autoHide={this.autoHide}>
         <button>
           <slot>
-            <ion-icon icon={menuIcon} slot="icon-only" />
+            <ion-icon icon={menuIcon} mode={this.mode} color={this.color} lazy={false} />
           </slot>
         </button>
       </ion-menu-toggle>

core/src/components/menu-button/readme.md

@@ -15,6 +15,13 @@ boolean
 Automatically hides the menu button when the corresponding menu is not active
 
 
+#### color
+
+string
+
+The color to use for the background of the item.
+
+
 #### menu
 
 string
@@ -22,6 +29,14 @@ string
 Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `right` for the menu side. This is used to find the correct menu to toggle
 
 
+#### mode
+
+string
+
+The mode determines which platform styles to use.
+Possible values are: `"ios"` or `"md"`.
+
+
 ## Attributes
 
 #### auto-hide
@@ -31,6 +46,13 @@ boolean
 Automatically hides the menu button when the corresponding menu is not active
 
 
+#### color
+
+string
+
+The color to use for the background of the item.
+
+
 #### menu
 
 string
@@ -38,6 +60,14 @@ string
 Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `right` for the menu side. This is used to find the correct menu to toggle
 
 
+#### mode
+
+string
+
+The mode determines which platform styles to use.
+Possible values are: `"ios"` or `"md"`.
+
+
 
 ----------------------------------------------