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

core/src/components/buttons/buttons.ios.scss

@@ -5,7 +5,7 @@
 // iOS Toolbar Button Default
 // --------------------------------------------------
 
-::slotted(*) ion-button {
+::slotted(*) .button {
   --padding-top: 0;
   --pading-bottom: 0;
   --padding-start: 5px;
@@ -53,14 +53,14 @@
   pointer-events: none;
 }
 
-::slotted(*) ion-button.button-clear {
+::slotted(*) .button.button-clear {
   --height: 35px;
 }
 
 // iOS Toolbar Button Solid
 // --------------------------------------------------
 
-::slotted(*) ion-button.button-solid-ios:hover {
+::slotted(*) .button.button-solid-ios:hover {
   opacity: .4;
 }
 

core/src/components/buttons/buttons.md.scss

@@ -8,7 +8,7 @@
   @include margin(0, 2px);
 }
 
-::slotted(*) ion-button {
+::slotted(*) .button {
   --padding-top: 0;
   --padding-bottom: 0;
   --padding-start: 8px;
@@ -48,14 +48,14 @@
   pointer-events: none;
 }
 
-::slotted(*) ion-button.button-solid,
-::slotted(*) ion-button.button-outline {
+::slotted(*) .button.button-solid,
+::slotted(*) .button.button-outline {
   --ion-color-base: #{$toolbar-md-text-color};
   --ion-color-contrast: #{$toolbar-md-background-color};
   --ion-color-shade: #{$toolbar-md-text-color};
 }
 
-::slotted(*) ion-button.button-clear {
+::slotted(*) .button.button-clear {
   --ion-color-base: currentColor;
   --height: 45px;
 }

core/src/components/buttons/buttons.scss

@@ -1,7 +1,9 @@
 @import "../../themes/ionic.globals";
 
 :host {
-  display: block;
+  display: flex;
+
+  align-items: center;
 
   transform: translateZ(0);
 
@@ -12,7 +14,7 @@
 // Toolbar Buttons
 // --------------------------------------------------
 
-::slotted(*) ion-button {
+::slotted(*) .button {
   --margin-top: 0;
   --margin-bottom: 0;
   --margin-start: 0;

core/src/components/buttons/usage/angular.md

@@ -31,11 +31,7 @@
   </ion-buttons>
   <ion-title>Right side menu toggle</ion-title>
   <ion-buttons slot="end">
-    <ion-menu-toggle autoHide="false">
-      <ion-button>
-        <ion-icon slot="icon-only" name="menu"></ion-icon>
-      </ion-button>
-    </ion-menu-toggle>
+    <ion-menu-button autoHide="false"></ion-menu-button>
   </ion-buttons>
 </ion-toolbar>
 ```