From d13983451aa95b60425f601485bf850053448ff7 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Wed, 22 May 2019 11:28:06 -0400
Subject: [PATCH] fix(button): only apply has-icon-only if icon has the slot
 for icon-only (#18343)

fixes #18329
---
 core/src/components/button/button.tsx         | 10 +----
 .../components/toolbar/test/spec/index.html   | 38 +++++++++++++++++--
 2 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx
index 0d3166bde7..4475e1374e 100644
--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@@ -130,16 +130,8 @@ export class Button implements ComponentInterface {
     }
   }
 
-  private get hasLabel() {
-    return this.el.textContent !== null && this.el.textContent.trim() !== '';
-  }
-
-  private get hasIcon() {
-    return !!this.el.querySelector('ion-icon');
-  }
-
   private get hasIconOnly() {
-    return this.hasIcon && !this.hasLabel;
+    return !!this.el.querySelector('ion-icon[slot="icon-only"]');
   }
 
   private get rippleType() {
diff --git a/core/src/components/toolbar/test/spec/index.html b/core/src/components/toolbar/test/spec/index.html
index 439b5b8dd9..4a6510855a 100644
--- a/core/src/components/toolbar/test/spec/index.html
+++ b/core/src/components/toolbar/test/spec/index.html
@@ -117,12 +117,12 @@
         </ion-buttons>
         <ion-buttons slot="primary">
           <ion-button>
-            <ion-icon name="star"></ion-icon>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-buttons slot="secondary">
           <ion-button>
-            <ion-icon name="call"></ion-icon>
+            <ion-icon slot="icon-only" name="call"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-buttons slot="start">
@@ -138,12 +138,12 @@
         </ion-buttons>
         <ion-buttons slot="primary">
           <ion-button>
-            <ion-icon name="star"></ion-icon>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-buttons slot="secondary">
           <ion-button>
-            <ion-icon name="call"></ion-icon>
+            <ion-icon slot="icon-only" name="call"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-buttons slot="start">
@@ -242,6 +242,36 @@
 
     </ion-content>
 
+    <ion-footer>
+      <ion-toolbar>
+        <ion-title>
+          Click to Add Text
+        </ion-title>
+        <ion-buttons slot="end">
+          <ion-button id="changeText" onClick="toggleText()">
+            <ion-icon slot="start" name="refresh"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-footer>
+
+    <script>
+      const button = document.getElementById('changeText');
+
+      function toggleText() {
+        const hasText = button.querySelector('#childText');
+
+        if (hasText) {
+          button.removeChild(hasText);
+        } else {
+          var text = document.createElement('span');
+          text.innerHTML = 'Toggle';
+          text.id = 'childText';
+          button.appendChild(text, button);
+        }
+      }
+    </script>
+
     <style>
       ion-toolbar {
         margin-bottom: 10px;