From 62cd0f6dacb55ee8d37814f941d04668938abe5b Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Fri, 16 Jun 2017 14:22:12 -0500
Subject: [PATCH] test(icon): update icon-only tests

---
 demos/src/button/pages/page-one/page-one.html |  4 +-
 demos/src/item/pages/page-one/page-one.html   |  4 +-
 demos/src/navbar/pages/page-one/page-one.html | 40 +++++------
 .../src/popover/pages/page-one/page-one.html  |  4 +-
 demos/src/title/pages/page-one/page-one.html  | 40 +++++------
 .../src/toolbar/pages/page-one/page-one.html  | 38 +++++-----
 .../test/cordova/pages/modal/modal-page.ts    |  8 +--
 .../test/cordova/pages/page-one/page-one.html |  4 +-
 .../test/cordova/pages/page-two/page-two.html |  4 +-
 src/components/card/test/map/main.html        |  4 +-
 .../pages/root-page/root-page.html            |  4 +-
 .../pages/root-page/root-page.html            |  4 +-
 .../pages/root-page/root-page.html            |  4 +-
 .../pages/root-page/root-page.html            |  8 ++-
 .../buttons/pages/root-page/root-page.html    | 16 ++---
 .../sliding/pages/root-page/root-page.html    | 12 ++--
 .../header-scenarios/pages/main/main.html     |  8 +--
 .../test/basic/pages/page-two/page-two.html   |  8 +--
 .../basic/pages/first-page/first-page.html    |  4 +-
 src/components/popover/popover-controller.ts  |  4 +-
 .../test/basic/pages/page-one/page-one.html   | 24 +++----
 .../test/basic/pages/home-page/home-page.html |  4 +-
 src/components/toolbar/navbar.ts              |  8 +--
 .../test/basic/pages/root-page/root-page.html | 16 ++---
 .../colors/pages/root-page/root-page.html     | 72 +++++++++----------
 .../scenarios/pages/root-page/root-page.html  | 72 +++++++++----------
 .../virtual-scroll/test/basic/main.html       |  6 +-
 .../test/infinite-scroll/main.html            |  4 +-
 28 files changed, 217 insertions(+), 211 deletions(-)

diff --git a/demos/src/button/pages/page-one/page-one.html b/demos/src/button/pages/page-one/page-one.html
index 6e9337a556..f3368894f4 100644
--- a/demos/src/button/pages/page-one/page-one.html
+++ b/demos/src/button/pages/page-one/page-one.html
@@ -49,8 +49,8 @@
     <ion-icon slot="end" name="star"></ion-icon>
   </ion-button>
 
-  <ion-button icon-only color="dark">
-    <ion-icon name="star"></ion-icon>
+  <ion-button color="dark">
+    <ion-icon slot="icon-only" name="star"></ion-icon>
   </ion-button>
 
   <h4>Sizes</h4>
diff --git a/demos/src/item/pages/page-one/page-one.html b/demos/src/item/pages/page-one/page-one.html
index d1f77a05b7..2cbe5fd884 100644
--- a/demos/src/item/pages/page-one/page-one.html
+++ b/demos/src/item/pages/page-one/page-one.html
@@ -12,8 +12,8 @@
   <ion-list>
     <ion-list-header>
       Settings
-      <ion-button icon-only item-end clear>
-        <ion-icon name="cog"></ion-icon>
+      <ion-button item-end clear>
+        <ion-icon slot="icon-only" name="cog"></ion-icon>
       </ion-button>
     </ion-list-header>
 
diff --git a/demos/src/navbar/pages/page-one/page-one.html b/demos/src/navbar/pages/page-one/page-one.html
index 2c11605481..ee15707bc7 100644
--- a/demos/src/navbar/pages/page-one/page-one.html
+++ b/demos/src/navbar/pages/page-one/page-one.html
@@ -15,16 +15,16 @@
 
   <ion-toolbar no-border-top>
     <ion-buttons start>
-      <ion-button icon-only>
-        <ion-icon name="contact"></ion-icon>
+      <ion-button>
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
-      <ion-button icon-only>
-        <ion-icon name="search"></ion-icon>
+      <ion-button>
+        <ion-icon slot="icon-only" name="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-buttons end>
-      <ion-button icon-only>
-        <ion-icon name="more"></ion-icon>
+      <ion-button>
+        <ion-icon slot="icon-only" name="more"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Default Buttons</ion-title>
@@ -32,16 +32,16 @@
 
   <ion-toolbar no-border-top>
     <ion-buttons start>
-      <ion-button icon-only color="danger">
-        <ion-icon name="contact"></ion-icon>
+      <ion-button color="danger">
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
-      <ion-button icon-only color="secondary">
-        <ion-icon name="search"></ion-icon>
+      <ion-button color="secondary">
+        <ion-icon slot="icon-only" name="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-buttons end>
-      <ion-button icon-only color="dark">
-        <ion-icon name="more"></ion-icon>
+      <ion-button color="dark">
+        <ion-icon slot="icon-only" name="more"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Colored Buttons</ion-title>
@@ -49,8 +49,8 @@
 
   <ion-toolbar no-border-top>
     <ion-buttons start>
-      <ion-button icon-only solid>
-        <ion-icon name="contact"></ion-icon>
+      <ion-button solid>
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Solid</ion-title>
@@ -64,8 +64,8 @@
 
   <ion-toolbar no-border-top>
     <ion-buttons start>
-      <button  ion-button icon-only outline>
-        <ion-icon name="contact"></ion-icon>
+      <button ion-button outline>
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-buttons end>
@@ -78,8 +78,8 @@
   </ion-toolbar>
 
   <ion-toolbar no-border-top>
-    <button  ion-button icon-only menuToggle>
-      <ion-icon name="menu"></ion-icon>
+    <button ion-button menuToggle>
+      <ion-icon slot="icon-only" name="menu"></ion-icon>
     </ion-button>
     <ion-title>Left Menu</ion-title>
   </ion-toolbar>
@@ -93,8 +93,8 @@
 
   <ion-toolbar no-border-top *ngIf="demo != 'Title'">
     <ion-buttons end>
-      <button  ion-button icon-only #button2 (click)="buttonClick(button2)">
-        <ion-icon name="search"></ion-icon>
+      <button ion-button #button2 (click)="buttonClick(button2)">
+        <ion-icon slot="icon-only" name="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-segment color="danger" [(ngModel)]="favorites">
diff --git a/demos/src/popover/pages/page-one/page-one.html b/demos/src/popover/pages/page-one/page-one.html
index 58972e6962..1dcbb74045 100644
--- a/demos/src/popover/pages/page-one/page-one.html
+++ b/demos/src/popover/pages/page-one/page-one.html
@@ -3,8 +3,8 @@
   <ion-navbar color="primary">
     <ion-title>Popover</ion-title>
     <ion-buttons end>
-      <ion-button icon-only (click)="presentRadioPopover($event)">
-        <ion-icon name="more"></ion-icon>
+      <ion-button (click)="presentRadioPopover($event)">
+        <ion-icon slot="icon-only" name="more"></ion-icon>
       </ion-button>
     </ion-buttons>
   </ion-navbar>
diff --git a/demos/src/title/pages/page-one/page-one.html b/demos/src/title/pages/page-one/page-one.html
index c93d00fda9..3bf151ff0b 100644
--- a/demos/src/title/pages/page-one/page-one.html
+++ b/demos/src/title/pages/page-one/page-one.html
@@ -15,16 +15,16 @@
 
   <ion-toolbar no-border-top>
     <ion-buttons start>
-      <ion-button icon-only>
-        <ion-icon name="contact"></ion-icon>
+      <ion-button>
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
-      <ion-button icon-only>
-        <ion-icon name="search"></ion-icon>
+      <ion-button>
+        <ion-icon slot="icon-only" name="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-buttons end>
-      <ion-button icon-only>
-        <ion-icon name="more"></ion-icon>
+      <ion-button>
+        <ion-icon slot="icon-only" name="more"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Default Buttons</ion-title>
@@ -32,16 +32,16 @@
 
   <ion-toolbar no-border-top>
     <ion-buttons start>
-      <ion-button icon-only color="danger">
-        <ion-icon name="contact"></ion-icon>
+      <ion-button color="danger">
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
-      <ion-button icon-only color="secondary">
-        <ion-icon name="search"></ion-icon>
+      <ion-button color="secondary">
+        <ion-icon slot="icon-only" name="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-buttons end>
-      <ion-button icon-only color="dark">
-        <ion-icon name="more"></ion-icon>
+      <ion-button color="dark">
+        <ion-icon slot="icon-only" name="more"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Colored Buttons</ion-title>
@@ -49,8 +49,8 @@
 
   <ion-toolbar no-border-top>
     <ion-buttons start>
-      <ion-button icon-only solid>
-        <ion-icon name="contact"></ion-icon>
+      <ion-button solid>
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Solid</ion-title>
@@ -64,8 +64,8 @@
 
   <ion-toolbar no-border-top>
     <ion-buttons start>
-      <ion-button icon-only outline>
-        <ion-icon name="contact"></ion-icon>
+      <ion-button outline>
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-buttons end>
@@ -78,8 +78,8 @@
   </ion-toolbar>
 
   <ion-toolbar no-border-top>
-    <ion-button icon-only menuToggle>
-      <ion-icon name="menu"></ion-icon>
+    <ion-button menuToggle>
+      <ion-icon slot="icon-only" name="menu"></ion-icon>
     </ion-button>
     <ion-title>Left Menu</ion-title>
   </ion-toolbar>
@@ -93,8 +93,8 @@
 
   <ion-toolbar no-border-top *ngIf="demo != 'Title'">
     <ion-buttons end>
-      <ion-button icon-only #button2 (click)="buttonClick(button2)">
-        <ion-icon name="search"></ion-icon>
+      <ion-button #button2 (click)="buttonClick(button2)">
+        <ion-icon slot="icon-only" name="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-segment color="danger" [(ngModel)]="favorites">
diff --git a/demos/src/toolbar/pages/page-one/page-one.html b/demos/src/toolbar/pages/page-one/page-one.html
index c93d00fda9..b794a94fb0 100644
--- a/demos/src/toolbar/pages/page-one/page-one.html
+++ b/demos/src/toolbar/pages/page-one/page-one.html
@@ -15,16 +15,16 @@
 
   <ion-toolbar no-border-top>
     <ion-buttons start>
-      <ion-button icon-only>
-        <ion-icon name="contact"></ion-icon>
+      <ion-button>
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
-      <ion-button icon-only>
-        <ion-icon name="search"></ion-icon>
+      <ion-button>
+        <ion-icon slot="icon-only" name="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-buttons end>
-      <ion-button icon-only>
-        <ion-icon name="more"></ion-icon>
+      <ion-button>
+        <ion-icon slot="icon-only" name="more"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Default Buttons</ion-title>
@@ -32,16 +32,16 @@
 
   <ion-toolbar no-border-top>
     <ion-buttons start>
-      <ion-button icon-only color="danger">
-        <ion-icon name="contact"></ion-icon>
+      <ion-button color="danger">
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
-      <ion-button icon-only color="secondary">
-        <ion-icon name="search"></ion-icon>
+      <ion-button color="secondary">
+        <ion-icon slot="icon-only" name="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-buttons end>
-      <ion-button icon-only color="dark">
-        <ion-icon name="more"></ion-icon>
+      <ion-button color="dark">
+        <ion-icon slot="icon-only" name="more"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Colored Buttons</ion-title>
@@ -49,7 +49,7 @@
 
   <ion-toolbar no-border-top>
     <ion-buttons start>
-      <ion-button icon-only solid>
+      <ion-button solid>
         <ion-icon name="contact"></ion-icon>
       </ion-button>
     </ion-buttons>
@@ -64,8 +64,8 @@
 
   <ion-toolbar no-border-top>
     <ion-buttons start>
-      <ion-button icon-only outline>
-        <ion-icon name="contact"></ion-icon>
+      <ion-button outline>
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-buttons end>
@@ -78,8 +78,8 @@
   </ion-toolbar>
 
   <ion-toolbar no-border-top>
-    <ion-button icon-only menuToggle>
-      <ion-icon name="menu"></ion-icon>
+    <ion-button menuToggle>
+      <ion-icon slot="icon-only" name="menu"></ion-icon>
     </ion-button>
     <ion-title>Left Menu</ion-title>
   </ion-toolbar>
@@ -93,8 +93,8 @@
 
   <ion-toolbar no-border-top *ngIf="demo != 'Title'">
     <ion-buttons end>
-      <ion-button icon-only #button2 (click)="buttonClick(button2)">
-        <ion-icon name="search"></ion-icon>
+      <ion-button #button2 (click)="buttonClick(button2)">
+        <ion-icon slot="icon-only" name="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-segment color="danger" [(ngModel)]="favorites">
diff --git a/src/components/app/test/cordova/pages/modal/modal-page.ts b/src/components/app/test/cordova/pages/modal/modal-page.ts
index 6d93859c7a..4299a20885 100644
--- a/src/components/app/test/cordova/pages/modal/modal-page.ts
+++ b/src/components/app/test/cordova/pages/modal/modal-page.ts
@@ -10,13 +10,13 @@ import { IonicPage, ViewController } from '../../../../../..';
     <ion-toolbar>
       <ion-title>This is a modal</ion-title>
       <ion-buttons left>
-        <ion-button icon-only (click)="dismissModal()" class="e2eCordovaCloseModal">
-          <ion-icon name="close"></ion-icon>
+        <ion-button (click)="dismissModal()" class="e2eCordovaCloseModal">
+          <ion-icon slot="icon-only" name="close"></ion-icon>
         </ion-button>
       </ion-buttons>
       <ion-buttons end>
-        <ion-button icon-only>
-          <ion-icon name="funnel"></ion-icon>
+        <ion-button>
+          <ion-icon slot="icon-only" name="funnel"></ion-icon>
         </ion-button>
       </ion-buttons>
     </ion-toolbar>
diff --git a/src/components/app/test/cordova/pages/page-one/page-one.html b/src/components/app/test/cordova/pages/page-one/page-one.html
index 779c0fda97..333419e513 100644
--- a/src/components/app/test/cordova/pages/page-one/page-one.html
+++ b/src/components/app/test/cordova/pages/page-one/page-one.html
@@ -9,8 +9,8 @@
       <ion-icon name="menu"></ion-icon>
     </ion-button>
     <ion-buttons end>
-      <ion-button icon-only>
-        <ion-icon name="search"></ion-icon>
+      <ion-button>
+        <ion-icon slot="icon-only" name="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-button menuToggle="right" right>
diff --git a/src/components/app/test/cordova/pages/page-two/page-two.html b/src/components/app/test/cordova/pages/page-two/page-two.html
index 1acb26fe3b..7cdde33b67 100644
--- a/src/components/app/test/cordova/pages/page-two/page-two.html
+++ b/src/components/app/test/cordova/pages/page-two/page-two.html
@@ -6,8 +6,8 @@
       <ion-icon name="menu"></ion-icon>
     </ion-button>
     <ion-buttons end>
-      <ion-button icon-only>
-        <ion-icon name="funnel"></ion-icon>
+      <ion-button>
+        <ion-icon slot="icon-only" name="funnel"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-button menuToggle="right" right>
diff --git a/src/components/card/test/map/main.html b/src/components/card/test/map/main.html
index 450c85f393..f4b12cf613 100644
--- a/src/components/card/test/map/main.html
+++ b/src/components/card/test/map/main.html
@@ -12,8 +12,8 @@
   <ion-card>
 
     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
-    <ion-button icon-only fab fab-right fab-top>
-      <ion-icon name="pin"></ion-icon>
+    <ion-button fab fab-right fab-top>
+      <ion-icon slot="icon-only" name="pin"></ion-icon>
     </ion-button>
 
     <ion-item>
diff --git a/src/components/input/test/fixed-inline-labels/pages/root-page/root-page.html b/src/components/input/test/fixed-inline-labels/pages/root-page/root-page.html
index 72cc66905b..86c463f5f8 100644
--- a/src/components/input/test/fixed-inline-labels/pages/root-page/root-page.html
+++ b/src/components/input/test/fixed-inline-labels/pages/root-page/root-page.html
@@ -30,8 +30,8 @@
     <ion-item>
       <ion-label fixed>From</ion-label>
       <ion-input value="Text 3"></ion-input>
-      <ion-button icon-only clear item-end>
-        <ion-icon name="power"></ion-icon>
+      <ion-button clear item-end>
+        <ion-icon slot="icon-only" name="power"></ion-icon>
       </ion-button>
     </ion-item>
 
diff --git a/src/components/input/test/floating-labels/pages/root-page/root-page.html b/src/components/input/test/floating-labels/pages/root-page/root-page.html
index 120f0d2625..cab058865d 100644
--- a/src/components/input/test/floating-labels/pages/root-page/root-page.html
+++ b/src/components/input/test/floating-labels/pages/root-page/root-page.html
@@ -14,8 +14,8 @@
     <ion-item>
       <ion-label floating>Params: {{ myParam }}</ion-label>
       <ion-input [(ngModel)]="myParam" type="text"></ion-input>
-      <ion-button icon-only clear item-end>
-        <ion-icon name="settings"></ion-icon>
+      <ion-button clear item-end>
+        <ion-icon slot="icon-only" name="settings"></ion-icon>
       </ion-button>
     </ion-item>
 
diff --git a/src/components/input/test/inline-labels/pages/root-page/root-page.html b/src/components/input/test/inline-labels/pages/root-page/root-page.html
index 82f9cbc7c3..9c56fbe317 100644
--- a/src/components/input/test/inline-labels/pages/root-page/root-page.html
+++ b/src/components/input/test/inline-labels/pages/root-page/root-page.html
@@ -26,8 +26,8 @@
       <ion-item>
         <ion-label>From:</ion-label>
         <ion-input value="Text 3"></ion-input>
-        <ion-button icon-only clear item-end>
-          <ion-icon name="power"></ion-icon>
+        <ion-button clear item-end>
+          <ion-icon slot="icon-only" name="power"></ion-icon>
         </ion-button>
       </ion-item>
 
diff --git a/src/components/input/test/stacked-labels/pages/root-page/root-page.html b/src/components/input/test/stacked-labels/pages/root-page/root-page.html
index 3f839e196e..2b8354c268 100644
--- a/src/components/input/test/stacked-labels/pages/root-page/root-page.html
+++ b/src/components/input/test/stacked-labels/pages/root-page/root-page.html
@@ -20,8 +20,12 @@
     <ion-item>
       <ion-label stacked>Label 2</ion-label>
       <ion-input value="Text 2"></ion-input>
-      <ion-button icon-only item-end clear><ion-icon name="heart-outline"></ion-icon></ion-button>
-      <ion-button icon-only item-end clear><ion-icon ios="ios-call-outline" md="md-call"></ion-icon></ion-button>
+      <ion-button item-end clear>
+        <ion-icon slot="icon-only" name="heart-outline"></ion-icon>
+      </ion-button>
+      <ion-button item-end clear>
+        <ion-icon slot="icon-only" ios="ios-call-outline" md="md-call"></ion-icon>
+      </ion-button>
     </ion-item>
 
     <ion-item>
diff --git a/src/components/item/test/buttons/pages/root-page/root-page.html b/src/components/item/test/buttons/pages/root-page/root-page.html
index 36650521e2..f1de08c04a 100644
--- a/src/components/item/test/buttons/pages/root-page/root-page.html
+++ b/src/components/item/test/buttons/pages/root-page/root-page.html
@@ -64,12 +64,12 @@
   </ion-item>
 
   <ion-item>
-    <ion-button icon-only clear item-start default (click)="testClick($event)">
-      <ion-icon name="navigate"></ion-icon>
+    <ion-button clear item-start default (click)="testClick($event)">
+      <ion-icon slot="icon-only" name="navigate"></ion-icon>
     </ion-button>
     icon only buttons default
-    <ion-button icon-only clear item-end default (click)="testClick($event)">
-      <ion-icon name="navigate"></ion-icon>
+    <ion-button clear item-end default (click)="testClick($event)">
+      <ion-icon slot="icon-only" name="navigate"></ion-icon>
     </ion-button>
   </ion-item>
 
@@ -113,11 +113,11 @@
 
   <ion-item (click)="testClickOutsize($event)">
     <div>
-      <ion-button icon-only clear item-end (click)="testClick($event)">
-          <ion-icon name="remove-circle"></ion-icon>
+      <ion-button clear item-end (click)="testClick($event)">
+        <ion-icon slot="icon-only" name="remove-circle"></ion-icon>
       </ion-button>
-      <ion-button icon-only clear item-end (click)="testClick($event)">
-          <ion-icon name="add-circle"></ion-icon>
+      <ion-button clear item-end (click)="testClick($event)">
+        <ion-icon slot="icon-only" name="add-circle"></ion-icon>
       </ion-button>
     </div>
   </ion-item>
diff --git a/src/components/item/test/sliding/pages/root-page/root-page.html b/src/components/item/test/sliding/pages/root-page/root-page.html
index 9c8451acba..55d5d56736 100644
--- a/src/components/item/test/sliding/pages/root-page/root-page.html
+++ b/src/components/item/test/sliding/pages/root-page/root-page.html
@@ -48,8 +48,8 @@
         Two options, one dynamic option and text
       </ion-item>
       <ion-item-options side="left">
-        <ion-button icon-only color="primary">
-          <ion-icon name="more"></ion-icon>
+        <ion-button color="primary">
+          <ion-icon slot="icon-only" name="more"></ion-icon>
         </ion-button>
       </ion-item-options>
       <ion-item-options side="right" *ngIf="showOptions">
@@ -80,11 +80,11 @@
         </ion-button>
       </ion-item-options>
       <ion-item-options side="right">
-        <ion-button icon-only color="danger" (click)="unread(item100)">
-          <ion-icon name="trash"></ion-icon>
+        <ion-button color="danger" (click)="unread(item100)">
+          <ion-icon slot="icon-only" name="trash"></ion-icon>
         </ion-button>
-        <ion-button icon-only (click)="unread(item100)">
-          <ion-icon name="star"></ion-icon>
+        <ion-button (click)="unread(item100)">
+          <ion-icon slot="icon-only" name="star"></ion-icon>
         </ion-button>
       </ion-item-options>
 
diff --git a/src/components/list/test/header-scenarios/pages/main/main.html b/src/components/list/test/header-scenarios/pages/main/main.html
index 07f66ee0e4..96561522f2 100644
--- a/src/components/list/test/header-scenarios/pages/main/main.html
+++ b/src/components/list/test/header-scenarios/pages/main/main.html
@@ -54,12 +54,12 @@
     </ion-list-header>
 
     <ion-list-header>
-      <ion-button icon-only clear item-start default (click)="testClick($event)">
-        <ion-icon name="navigate"></ion-icon>
+      <ion-button clear item-start default (click)="testClick($event)">
+        <ion-icon slot="icon-only" name="navigate"></ion-icon>
       </ion-button>
       icon only buttons default
-      <ion-button icon-only clear item-end default (click)="testClick($event)">
-        <ion-icon name="navigate"></ion-icon>
+      <ion-button clear item-end default (click)="testClick($event)">
+        <ion-icon slot="icon-only" name="navigate"></ion-icon>
       </ion-button>
     </ion-list-header>
 
diff --git a/src/components/menu/test/basic/pages/page-two/page-two.html b/src/components/menu/test/basic/pages/page-two/page-two.html
index 99cb968df4..c2c617b315 100644
--- a/src/components/menu/test/basic/pages/page-two/page-two.html
+++ b/src/components/menu/test/basic/pages/page-two/page-two.html
@@ -11,14 +11,14 @@
     </ion-title>
 
     <ion-buttons end>
-      <ion-button icon-only>
-        <ion-icon name="football"></ion-icon>
+      <ion-button>
+        <ion-icon slot="icon-only" name="football"></ion-icon>
       </ion-button>
     </ion-buttons>
 
     <ion-buttons start>
-      <ion-button icon-only>
-        <ion-icon name="baseball"></ion-icon>
+      <ion-button>
+        <ion-icon slot="icon-only" name="baseball"></ion-icon>
       </ion-button>
     </ion-buttons>
 
diff --git a/src/components/nav/test/basic/pages/first-page/first-page.html b/src/components/nav/test/basic/pages/first-page/first-page.html
index ab644e8303..b909c647bf 100644
--- a/src/components/nav/test/basic/pages/first-page/first-page.html
+++ b/src/components/nav/test/basic/pages/first-page/first-page.html
@@ -2,7 +2,9 @@
       <ion-navbar>
         <ion-title>{{title}}</ion-title>
         <ion-buttons start>
-          <ion-button icon-only><ion-icon name="star"></ion-icon></ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
         </ion-buttons>
         <ion-buttons end>
           <ion-button>S1g</ion-button>
diff --git a/src/components/popover/popover-controller.ts b/src/components/popover/popover-controller.ts
index 20eec78c1b..fed132e393 100644
--- a/src/components/popover/popover-controller.ts
+++ b/src/components/popover/popover-controller.ts
@@ -49,8 +49,8 @@ import { DeepLinker } from '../../navigation/deep-linker';
  * which creates and presents the popover:
  *
  * ```html
- * <ion-button icon-only (click)="presentPopover($event)">
- *   <ion-icon name="more"></ion-icon>
+ * <ion-button (click)="presentPopover($event)">
+ *   <ion-icon slot="icon-only" name="more"></ion-icon>
  * </ion-button>
  * ```
  *
diff --git a/src/components/popover/test/basic/pages/page-one/page-one.html b/src/components/popover/test/basic/pages/page-one/page-one.html
index 34711a3f4b..6b9c896834 100644
--- a/src/components/popover/test/basic/pages/page-one/page-one.html
+++ b/src/components/popover/test/basic/pages/page-one/page-one.html
@@ -2,20 +2,20 @@
 
   <ion-navbar color="primary">
     <ion-buttons left>
-      <ion-button icon-only (click)="presentRadioPopover($event)">
-        <ion-icon name="person"></ion-icon>
+      <ion-button (click)="presentRadioPopover($event)">
+        <ion-icon slot="icon-only" name="person"></ion-icon>
       </ion-button>
-      <ion-button icon-only (click)="presentLongListPopover($event)">
-        <ion-icon name="search"></ion-icon>
+      <ion-button (click)="presentLongListPopover($event)">
+        <ion-icon slot="icon-only" name="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Popover</ion-title>
     <ion-buttons end>
-      <ion-button icon-only (click)="presentListPopover($event)">
-        <ion-icon name="options"></ion-icon>
+      <ion-button (click)="presentListPopover($event)">
+        <ion-icon slot="icon-only" name="options"></ion-icon>
       </ion-button>
-      <ion-button icon-only (click)="presentRadioPopover($event)">
-        <ion-icon name="more"></ion-icon>
+      <ion-button (click)="presentRadioPopover($event)">
+        <ion-icon slot="icon-only" name="more"></ion-icon>
       </ion-button>
     </ion-buttons>
   </ion-navbar>
@@ -75,11 +75,11 @@
   <ion-toolbar>
     <ion-title>Popover</ion-title>
     <ion-buttons start>
-      <ion-button icon-only (click)="presentListPopover($event)">
-        <ion-icon name="more"></ion-icon>
+      <ion-button (click)="presentListPopover($event)">
+        <ion-icon slot="icon-only" name="more"></ion-icon>
       </ion-button>
-      <ion-button icon-only (click)="presentLongListPopover($event)">
-        <ion-icon name="search"></ion-icon>
+      <ion-button (click)="presentLongListPopover($event)">
+        <ion-icon slot="icon-only" name="search"></ion-icon>
       </ion-button>
     </ion-buttons>
   </ion-toolbar>
diff --git a/src/components/segment/test/basic/pages/home-page/home-page.html b/src/components/segment/test/basic/pages/home-page/home-page.html
index 9f1e320483..0f6ce2178e 100644
--- a/src/components/segment/test/basic/pages/home-page/home-page.html
+++ b/src/components/segment/test/basic/pages/home-page/home-page.html
@@ -11,8 +11,8 @@
   </ion-toolbar>
   <ion-toolbar>
     <ion-buttons end>
-      <ion-button icon-only>
-        <ion-icon name="search"></ion-icon>
+      <ion-button>
+        <ion-icon slot="icon-only" name="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-segment [(ngModel)]="icons" color="secondary">
diff --git a/src/components/toolbar/navbar.ts b/src/components/toolbar/navbar.ts
index 5375efc5b8..d02bea54ee 100644
--- a/src/components/toolbar/navbar.ts
+++ b/src/components/toolbar/navbar.ts
@@ -23,8 +23,8 @@ import { ViewController } from '../../navigation/view-controller';
  * <ion-header>
  *
  *   <ion-navbar>
- *     <ion-button icon-only menuToggle>
- *       <ion-icon name="menu"></ion-icon>
+ *     <ion-button menuToggle>
+ *       <ion-icon slot="icon-only" name="menu"></ion-icon>
  *     </ion-button>
  *
  *     <ion-title>
@@ -32,8 +32,8 @@ import { ViewController } from '../../navigation/view-controller';
  *     </ion-title>
  *
  *     <ion-buttons end>
- *       <ion-button icon-only (click)="openModal()">
- *         <ion-icon name="options"></ion-icon>
+ *       <ion-button (click)="openModal()">
+ *         <ion-icon slot="icon-only" name="options"></ion-icon>
  *       </ion-button>
  *     </ion-buttons>
  *   </ion-navbar>
diff --git a/src/components/toolbar/test/basic/pages/root-page/root-page.html b/src/components/toolbar/test/basic/pages/root-page/root-page.html
index f43a2ffec7..aa027f92c8 100644
--- a/src/components/toolbar/test/basic/pages/root-page/root-page.html
+++ b/src/components/toolbar/test/basic/pages/root-page/root-page.html
@@ -5,16 +5,16 @@
 
   <ion-toolbar color="primary">
     <ion-buttons start>
-      <ion-button icon-only>
-        <ion-icon name="contact"></ion-icon>
+      <ion-button>
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
-      <ion-button icon-only>
-        <ion-icon name="search"></ion-icon>
+      <ion-button>
+        <ion-icon slot="icon-only" name="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-buttons end>
-      <ion-button icon-only color="secondary">
-        <ion-icon name="more"></ion-icon>
+      <ion-button color="secondary">
+        <ion-icon slot="icon-only" name="more"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Subheader</ion-title>
@@ -90,8 +90,8 @@
 <ion-footer>
   <ion-toolbar>
     <ion-buttons end>
-      <ion-button icon-only #button2>
-        <ion-icon name="search"></ion-icon>
+      <ion-button #button2>
+        <ion-icon slot="icon-only" name="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-searchbar>
diff --git a/src/components/toolbar/test/colors/pages/root-page/root-page.html b/src/components/toolbar/test/colors/pages/root-page/root-page.html
index b14634d4e9..763ff39052 100644
--- a/src/components/toolbar/test/colors/pages/root-page/root-page.html
+++ b/src/components/toolbar/test/colors/pages/root-page/root-page.html
@@ -9,16 +9,16 @@
       <ion-icon name="menu"></ion-icon>
     </ion-button>
     <ion-buttons start>
-      <ion-button icon-only showWhen="ios">
-        <ion-icon name="contact"></ion-icon>
+      <ion-button showWhen="ios">
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
-      <ion-button icon-only>
-        <ion-icon name="search"></ion-icon>
+      <ion-button>
+        <ion-icon slot="icon-only" name="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-buttons end>
-      <ion-button color="secondary" icon-only>
-        <ion-icon name="more"></ion-icon>
+      <ion-button color="secondary">
+        <ion-icon slot="icon-only" name="more"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Default</ion-title>
@@ -26,16 +26,16 @@
 
   <ion-toolbar color="primary">
     <ion-buttons start>
-      <ion-button showWhen="ios" icon-only>
-        <ion-icon name="contact"></ion-icon>
+      <ion-button showWhen="ios">
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
-      <ion-button icon-only>
-        <ion-icon name="search"></ion-icon>
+      <ion-button>
+        <ion-icon slot="icon-only" name="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-buttons end>
-      <ion-button color="secondary" icon-only>
-        <ion-icon name="more"></ion-icon>
+      <ion-button color="secondary">
+        <ion-icon slot="icon-only" name="more"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Primary</ion-title>
@@ -43,16 +43,16 @@
 
   <ion-toolbar color="primary">
     <ion-buttons start>
-      <ion-button showWhen="ios" icon-only class="activated">
-        <ion-icon name="contact"></ion-icon>
+      <ion-button showWhen="ios" class="activated">
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
-      <ion-button icon-only class="activated">
-        <ion-icon name="search"></ion-icon>
+      <ion-button class="activated">
+        <ion-icon slot="icon-only" name="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-buttons end>
-      <ion-button color="secondary" icon-only class="activated">
-        <ion-icon name="more"></ion-icon>
+      <ion-button color="secondary" class="activated">
+        <ion-icon slot="icon-only" name="more"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Primary.activated</ion-title>
@@ -60,8 +60,8 @@
 
   <ion-toolbar color="secondary">
     <ion-buttons start>
-      <ion-button icon-only color="primary">
-        <ion-icon name="contact"></ion-icon>
+      <ion-button color="primary">
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
       <ion-button solid>
         <ion-icon slot="start" name="contact"></ion-icon>
@@ -79,8 +79,8 @@
 
   <ion-toolbar color="secondary">
     <ion-buttons start>
-      <ion-button icon-only color="primary" class="activated">
-        <ion-icon name="contact"></ion-icon>
+      <ion-button color="primary" class="activated">
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
       <ion-button solid class="activated">
         <ion-icon slot="start" name="contact"></ion-icon>
@@ -98,8 +98,8 @@
 
   <ion-toolbar color="dark">
     <ion-buttons start>
-      <ion-button icon-only outline>
-        <ion-icon name="contact"></ion-icon>
+      <ion-button outline>
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
       <ion-button outline>
         <ion-icon slot="start" name="star"></ion-icon>
@@ -107,8 +107,8 @@
       </ion-button>
     </ion-buttons>
     <ion-buttons end>
-      <ion-button icon-only color="secondary" outline>
-        <ion-icon name="contact"></ion-icon>
+      <ion-button color="secondary" outline>
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Dark</ion-title>
@@ -116,8 +116,8 @@
 
   <ion-toolbar color="dark">
     <ion-buttons start>
-      <ion-button outline icon-only class="activated">
-        <ion-icon name="contact"></ion-icon>
+      <ion-button outline class="activated">
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
       <ion-button outline class="activated">
         <ion-icon slot="start" name="star"></ion-icon>
@@ -125,8 +125,8 @@
       </ion-button>
     </ion-buttons>
     <ion-buttons end>
-      <ion-button color="secondary" outline icon-only class="activated">
-        <ion-icon name="contact"></ion-icon>
+      <ion-button color="secondary" outline class="activated">
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Dark.activated</ion-title>
@@ -153,8 +153,8 @@
       <ion-icon name="menu"></ion-icon>
     </ion-button>
     <ion-buttons start>
-      <ion-button icon-only>
-        <ion-icon name="star"></ion-icon>
+      <ion-button>
+        <ion-icon slot="icon-only" name="star"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Danger</ion-title>
@@ -181,8 +181,8 @@
       <ion-icon name="menu"></ion-icon>
     </ion-button>
     <ion-buttons start>
-      <ion-button icon-only>
-        <ion-icon name="star"></ion-icon>
+      <ion-button>
+        <ion-icon slot="icon-only" name="star"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Light</ion-title>
@@ -190,8 +190,8 @@
 
   <ion-toolbar transparent>
     <ion-buttons end>
-      <ion-button #button1 icon-only (click)="buttonClick(button1)">
-        <ion-icon name="star"></ion-icon>
+      <ion-button #button1 (click)="buttonClick(button1)">
+        <ion-icon slot="icon-only" name="star"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Transparent</ion-title>
diff --git a/src/components/toolbar/test/scenarios/pages/root-page/root-page.html b/src/components/toolbar/test/scenarios/pages/root-page/root-page.html
index 851704dae9..79ad46eeb3 100644
--- a/src/components/toolbar/test/scenarios/pages/root-page/root-page.html
+++ b/src/components/toolbar/test/scenarios/pages/root-page/root-page.html
@@ -10,16 +10,16 @@
 
   <ion-toolbar>
     <ion-buttons start>
-      <ion-button icon-only>
-        <ion-icon name="contact"></ion-icon>
+      <ion-button>
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
-      <ion-button icon-only>
-        <ion-icon name="search"></ion-icon>
+      <ion-button>
+        <ion-icon slot="icon-only" name="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-buttons end>
-      <ion-button icon-only color="secondary">
-        <ion-icon name="more"></ion-icon>
+      <ion-button color="secondary">
+        <ion-icon slot="icon-only" name="more"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
@@ -27,16 +27,16 @@
 
   <ion-toolbar>
     <ion-buttons start>
-      <ion-button icon-only>
-        <ion-icon name="contact"></ion-icon>
+      <ion-button>
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
-      <ion-button icon-only>
-        <ion-icon name="search"></ion-icon>
+      <ion-button>
+        <ion-icon slot="icon-only" name="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-buttons end>
-      <ion-button icon-only color="secondary">
-        <ion-icon name="more"></ion-icon>
+      <ion-button color="secondary">
+        <ion-icon slot="icon-only" name="more"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Defaults</ion-title>
@@ -44,16 +44,16 @@
 
   <ion-toolbar>
     <ion-buttons start>
-      <ion-button icon-only class="activated">
-        <ion-icon name="contact"></ion-icon>
+      <ion-button class="activated">
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
-      <ion-button icon-only class="activated">
-        <ion-icon name="search"></ion-icon>
+      <ion-button class="activated">
+        <ion-icon slot="icon-only" name="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-buttons end>
-      <ion-button icon-only color="secondary" class="activated">
-        <ion-icon name="more"></ion-icon>
+      <ion-button color="secondary" class="activated">
+        <ion-icon slot="icon-only" name="more"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Defaults.activated</ion-title>
@@ -61,8 +61,8 @@
 
   <ion-toolbar>
     <ion-buttons start>
-      <ion-button icon-only solid>
-        <ion-icon name="contact"></ion-icon>
+      <ion-button solid>
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
       <ion-button solid>
         <ion-icon slot="start" name="contact"></ion-icon>
@@ -80,8 +80,8 @@
 
   <ion-toolbar>
     <ion-buttons start>
-      <ion-button href="#" icon-only solid class="activated">
-        <ion-icon name="contact"></ion-icon>
+      <ion-button href="#" solid class="activated">
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
       <ion-button solid class="activated">
         <ion-icon slot="start" name="contact"></ion-icon>
@@ -99,8 +99,8 @@
 
   <ion-toolbar>
     <ion-buttons start>
-      <ion-button icon-only outline>
-        <ion-icon name="contact"></ion-icon>
+      <ion-button outline>
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
       <ion-button outline>
         <ion-icon slot="start" name="star"></ion-icon>
@@ -108,8 +108,8 @@
       </ion-button>
     </ion-buttons>
     <ion-buttons end>
-      <ion-button icon-only color="secondary" outline>
-        <ion-icon name="contact"></ion-icon>
+      <ion-button color="secondary" outline>
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Outline</ion-title>
@@ -117,8 +117,8 @@
 
   <ion-toolbar>
     <ion-buttons start>
-      <ion-button icon-only outline class="activated">
-        <ion-icon name="contact"></ion-icon>
+      <ion-button outline class="activated">
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
       <ion-button outline class="activated">
         <ion-icon slot="start" name="star"></ion-icon>
@@ -126,8 +126,8 @@
       </ion-button>
     </ion-buttons>
     <ion-buttons end>
-      <ion-button icon-only color="secondary" outline class="activated">
-        <ion-icon name="contact"></ion-icon>
+      <ion-button color="secondary" outline class="activated">
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Outline.activated</ion-title>
@@ -168,8 +168,8 @@
       <ion-icon name="menu"></ion-icon>
     </ion-button>
     <ion-buttons start>
-      <ion-button icon-only>
-        <ion-icon name="star"></ion-icon>
+      <ion-button>
+        <ion-icon slot="icon-only" name="star"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Left side menu toggle</ion-title>
@@ -177,8 +177,8 @@
 
   <ion-toolbar>
     <ion-buttons end>
-      <ion-button icon-only #button1 (click)="buttonClick(button1)">
-        <ion-icon name="star"></ion-icon>
+      <ion-button #button1 (click)="buttonClick(button1)">
+        <ion-icon slot="icon-only" name="star"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Right side menu toggle</ion-title>
@@ -189,8 +189,8 @@
 
   <ion-toolbar>
     <ion-buttons end>
-      <ion-button icon-only #button2 (click)="buttonClick(button2)">
-        <ion-icon name="search"></ion-icon>
+      <ion-button #button2 (click)="buttonClick(button2)">
+        <ion-icon slot="icon-only" name="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-segment color="secondary">
diff --git a/src/components/virtual-scroll/test/basic/main.html b/src/components/virtual-scroll/test/basic/main.html
index 85956ec952..158686af77 100644
--- a/src/components/virtual-scroll/test/basic/main.html
+++ b/src/components/virtual-scroll/test/basic/main.html
@@ -1,13 +1,13 @@
 <ion-header>
   <ion-navbar>
     <ion-buttons end>
-      <ion-button icon-only (click)="changeItem()">
+      <ion-button (click)="changeItem()">
         Change random
       </ion-button>
-      <ion-button icon-only (click)="addRandomItem()">
+      <ion-button (click)="addRandomItem()">
         Add random
       </ion-button>
-      <ion-button icon-only (click)="addItem()">
+      <ion-button (click)="addItem()">
         Append
       </ion-button>
     </ion-buttons>
diff --git a/src/components/virtual-scroll/test/infinite-scroll/main.html b/src/components/virtual-scroll/test/infinite-scroll/main.html
index 72846317a5..9da1988e3c 100644
--- a/src/components/virtual-scroll/test/infinite-scroll/main.html
+++ b/src/components/virtual-scroll/test/infinite-scroll/main.html
@@ -3,8 +3,8 @@
     <ion-title>Virtual Scroll</ion-title>
 
     <ion-buttons end>
-      <ion-button icon-only (click)="addItem()">
-        <ion-icon name="add"></ion-icon>
+      <ion-button (click)="addItem()">
+        <ion-icon slot="icon-only" name="add"></ion-icon>
       </ion-button>
     </ion-buttons>
   </ion-navbar>