diff --git a/src/components/app/app.scss b/src/components/app/app.scss
index 8d39693891..705c188e64 100644
--- a/src/components/app/app.scss
+++ b/src/components/app/app.scss
@@ -439,9 +439,10 @@ ion-card-content,
 ion-card-header,
 ion-card-title,
 ion-gesture,
-ion-toggle,
+ion-icon,
 ion-slides,
-ion-slide {
+ion-slide,
+ion-toggle {
   visibility: hidden;
 }
 
diff --git a/src/components/button/button-icon.scss b/src/components/button/button-icon.scss
index fb80ffd82b..e67f617b25 100644
--- a/src/components/button/button-icon.scss
+++ b/src/components/button/button-icon.scss
@@ -1,31 +1,28 @@
 @import "../../themes/ionic.globals";
 
+
 // Button Icons
 // --------------------------------------------------
 
-.button ion-icon[slot="start"] {
+.button ion-icon {
+  pointer-events: none;
+}
+
+ion-icon[slot="start"] {
   @include button-icon();
 
   @include padding-horizontal(null, .3em);
 }
 
-.button ion-icon[slot="end"] {
+ion-icon[slot="end"] {
   @include button-icon();
 
   @include padding-horizontal(.4em, null);
 }
 
-[icon-only] .button {
+ion-icon[slot="icon-only"] {
   @include padding(0);
 
-  min-width: .9em;
-}
-
-[icon-only] ion-icon {
-  @include padding(0, .5em);
-
   font-size: 1.8em;
   line-height: .67;
-
-  pointer-events: none;
-}
\ No newline at end of file
+}
diff --git a/src/components/button/button.ios.scss b/src/components/button/button.ios.scss
index d531883f32..35a5c48c86 100644
--- a/src/components/button/button.ios.scss
+++ b/src/components/button/button.ios.scss
@@ -268,7 +268,7 @@ $button-ios-strong-font-weight:                     600 !default;
   }
 }
 
-[icon-only] .button-small-ios ion-icon {
+.button-small-ios ion-icon[slot="icon-only"] {
   font-size: $button-ios-small-icon-font-size;
 }
 
diff --git a/src/components/button/button.md.scss b/src/components/button/button.md.scss
index 874316649d..eb7c4a0c85 100644
--- a/src/components/button/button.md.scss
+++ b/src/components/button/button.md.scss
@@ -327,7 +327,7 @@ $button-md-strong-font-weight:                  bold !default;
   }
 }
 
-[icon-only] .button-small-md ion-icon {
+.button-small-md ion-icon[slot="icon-only"] {
   font-size: $button-md-small-icon-font-size;
 }
 
@@ -461,7 +461,7 @@ $button-md-strong-font-weight:                  bold !default;
   }
 }
 
-[icon-only] .button-md {
+.button-md ion-icon[slot="icon-only"] {
   @include padding(0);
 }
 
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index ded22c6441..c58c3a38bd 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -48,8 +48,8 @@ import { CssClassObject } from '../../util/interfaces';
   *    <ion-icon slot="end" name="star"></ion-icon>
   *  </ion-button>
   *
-  *  <ion-button icon-only>
-  *    <ion-icon name="star"></ion-icon>
+  *  <ion-button>
+  *    <ion-icon slot="icon-only" name="star"></ion-icon>
   *  </ion-button>
   *
   *  <!-- Sizes -->
@@ -299,6 +299,7 @@ export class Button {
     return (
       <TagType class={buttonClasses} disabled={this.disabled}>
         <span class='button-inner'>
+          <slot name='icon-only'></slot>
           <slot name='start'></slot>
           <slot></slot>
           <slot name='end'></slot>
diff --git a/src/components/button/button.wp.scss b/src/components/button/button.wp.scss
index e04a0ca0ef..91bb099185 100644
--- a/src/components/button/button.wp.scss
+++ b/src/components/button/button.wp.scss
@@ -266,7 +266,7 @@ $button-wp-strong-font-weight:                            bold !default;
   }
 }
 
-[icon-only] .button-small-wp ion-icon {
+.button-small-wp ion-icon[slot="icon-only"] {
   font-size: $button-wp-small-icon-font-size;
 }
 
@@ -380,7 +380,7 @@ $button-wp-strong-font-weight:                            bold !default;
   }
 }
 
-[icon-only] .button-wp {
+.button-wp ion-icon[slot="icon-only"] {
   @include padding(0);
 }
 
diff --git a/src/components/button/test/icons/pages/page-one/page-one.html b/src/components/button/test/icons/pages/page-one/page-one.html
index 308da99459..02d7691136 100644
--- a/src/components/button/test/icons/pages/page-one/page-one.html
+++ b/src/components/button/test/icons/pages/page-one/page-one.html
@@ -32,11 +32,11 @@
   </div>
 
   <div>
-    <ion-button icon-only>
-      <ion-icon name="flag"></ion-icon>
+    <ion-button>
+      <ion-icon slot="icon-only" name="flag"></ion-icon>
     </ion-button>
-    <ion-button href="#" icon-only>
-      <ion-icon name="flag"></ion-icon>
+    <ion-button href="#">
+      <ion-icon slot="icon-only" name="flag"></ion-icon>
     </ion-button>
   </div>
 
@@ -63,11 +63,11 @@
   </div>
 
   <div>
-    <ion-button large icon-only>
-      <ion-icon name="heart"></ion-icon>
+    <ion-button large>
+      <ion-icon slot="icon-only" name="heart"></ion-icon>
     </ion-button>
-    <ion-button href="#" large icon-only>
-      <ion-icon name="heart"></ion-icon>
+    <ion-button href="#" large>
+      <ion-icon slot="icon-only" name="heart"></ion-icon>
     </ion-button>
   </div>
 
@@ -94,11 +94,11 @@
   </div>
 
   <div>
-    <ion-button small icon-only>
-      <ion-icon name="search"></ion-icon>
+    <ion-button small>
+      <ion-icon slot="icon-only" name="search"></ion-icon>
     </ion-button>
-    <ion-button href="#" small icon-only>
-      <ion-icon name="search"></ion-icon>
+    <ion-button href="#" small>
+      <ion-icon slot="icon-only" name="search"></ion-icon>
     </ion-button>
   </div>
 
diff --git a/src/components/icon/icon.scss b/src/components/icon/icon.scss
index 52cb1b6127..fb67bcaf9c 100644
--- a/src/components/icon/icon.scss
+++ b/src/components/icon/icon.scss
@@ -12,10 +12,6 @@ ion-icon {
   font-size: 1.2em;
 }
 
-ion-icon.hydrated {
-  visibility: inherit;
-}
-
 ion-icon[small] {
   min-height: 1.1em;