From 876ab41ba8884b07f7965ab4dcae42f572b33435 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Tue, 2 Jul 2019 15:37:16 -0400
Subject: [PATCH] fix(menu-button): move font-size to host for easier
 customization (#18699)

fixes #18667
---
 core/src/components/menu-button/menu-button.ios.scss  | 6 ++----
 core/src/components/menu-button/menu-button.md.scss   | 3 +--
 core/src/components/menu-button/test/basic/index.html | 7 +++++++
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/core/src/components/menu-button/menu-button.ios.scss b/core/src/components/menu-button/menu-button.ios.scss
index 235e6361e1..e1efb0f462 100644
--- a/core/src/components/menu-button/menu-button.ios.scss
+++ b/core/src/components/menu-button/menu-button.ios.scss
@@ -11,6 +11,8 @@
   --padding-end: 5px;
 
   height: 32px;
+
+  font-size: 31px;
 }
 
 :host(.activated) {
@@ -23,10 +25,6 @@
   }
 }
 
-ion-icon {
-  font-size: 31px;
-}
-
 
 // Menu Button Color: Focused
 // --------------------------------------------------
diff --git a/core/src/components/menu-button/menu-button.md.scss b/core/src/components/menu-button/menu-button.md.scss
index bc1645a9f6..9a2267c531 100644
--- a/core/src/components/menu-button/menu-button.md.scss
+++ b/core/src/components/menu-button/menu-button.md.scss
@@ -13,12 +13,11 @@
 
   width: 48px;
   height: 48px;
-}
 
-ion-icon {
   font-size: 24px;
 }
 
+
 // Menu Button Color: Hover
 // --------------------------------------------------
 
diff --git a/core/src/components/menu-button/test/basic/index.html b/core/src/components/menu-button/test/basic/index.html
index fa10101a30..d41dcce417 100644
--- a/core/src/components/menu-button/test/basic/index.html
+++ b/core/src/components/menu-button/test/basic/index.html
@@ -27,6 +27,8 @@
       <ion-menu-button auto-hide="false" color="secondary" class="custom"></ion-menu-button>
       <ion-menu-button auto-hide="false" class="custom ion-focused"></ion-menu-button>
       <ion-menu-button auto-hide="false" color="secondary" class="custom ion-focused"></ion-menu-button>
+      <ion-menu-button auto-hide="false" class="custom-large"></ion-menu-button>
+      <ion-menu-button auto-hide="false" class="custom-large ion-focused"></ion-menu-button>
 
       <h1>Colors</h1>
       <ion-menu-button auto-hide="false" color="primary"></ion-menu-button>
@@ -103,6 +105,11 @@
       --background-focused: rgb(255, 105, 180, .24);
     }
 
+    .custom-large {
+      width: 84px;
+      height: 84px;
+      font-size: 44px;
+    }
   </style>
 </body>