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

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>