diff --git a/demos/attr/main.html b/demos/attr/main.html
index fed5d560df..5a5c9451e9 100644
--- a/demos/attr/main.html
+++ b/demos/attr/main.html
@@ -21,7 +21,7 @@
 
   <ion-row>
     <ion-col>
-      <icon ionic [attr.hidden]="isHidden ? '' : null" style="font-size: 52px; text-align: center;"></icon>
+      <ion-icon name="ionic-logo" [attr.hidden]="isHidden ? '' : null" style="font-size: 52px; text-align: center;"></ion-icon>
     </ion-col>
   </ion-row>
 
diff --git a/demos/config/app.html b/demos/config/app.html
index 5f6bb33d68..776be9a94a 100644
--- a/demos/config/app.html
+++ b/demos/config/app.html
@@ -1,2 +1 @@
 <ion-nav id="nav" [root]="rootPage" #content></ion-nav>
-<ion-overlay></ion-overlay>
\ No newline at end of file
diff --git a/demos/config/main.html b/demos/config/main.html
index e19e20e761..5d5a0a3d4a 100644
--- a/demos/config/main.html
+++ b/demos/config/main.html
@@ -16,7 +16,7 @@
         <ion-row>
           <ion-col>
           backButtonIcon: 
-            <select [(ng-model)]="config.backButtonIcon">
+            <select [(ngModel)]="config.backButtonIcon">
               <option value="ion-ios-arrow-back">ion-ios-arrow-back</option>
               <option value="ion-md-arrow-back">ion-md-arrow-back</option>
             </select>
@@ -26,7 +26,7 @@
         <ion-row>
           <ion-col>
           iconMode: 
-            <select [(ng-model)]="config.iconMode">
+            <select [(ngModel)]="config.iconMode">
               <option value="ios">ios</option>
               <option value="md">md</option>
             </select>
@@ -36,7 +36,7 @@
         <ion-row>
           <ion-col>
           tabbarPlacement: 
-            <select [(ng-model)]="config.tabbarPlacement">
+            <select [(ngModel)]="config.tabbarPlacement">
               <option value="bottom">bottom</option>
               <option value="top">top</option>
             </select>
@@ -56,7 +56,7 @@
 
   <ion-row>
     <button full (click)="load()">
-      <icon refresh></icon>
+      <ion-icon name="refresh"></ion-icon>
       Reload Config
     </button>
   </ion-row>
diff --git a/demos/config/tabs.html b/demos/config/tabs.html
index bdac647732..99fb1cc28d 100644
--- a/demos/config/tabs.html
+++ b/demos/config/tabs.html
@@ -1,5 +1,5 @@
 <ion-tabs>
-  <ion-tab tab-title="Music" [root]="tabOne"></ion-tab>
-  <ion-tab tab-title="Movies" [root]="tabOne"></ion-tab>
-  <ion-tab tab-title="Games" [root]="tabOne"></ion-tab>
+  <ion-tab tabTitle="Music" [root]="tabOne"></ion-tab>
+  <ion-tab tabTitle="Movies" [root]="tabOne"></ion-tab>
+  <ion-tab tabTitle="Games" [root]="tabOne"></ion-tab>
 </ion-tabs>
\ No newline at end of file
diff --git a/demos/list/app.html b/demos/list/app.html
index 80374bb37c..8a93be64ff 100644
--- a/demos/list/app.html
+++ b/demos/list/app.html
@@ -8,7 +8,7 @@
 
     <ion-list>
 
-      <button ion-item *ng-for="#p of pages" (click)="openPage(p)">
+      <button ion-item *ngFor="#p of pages" (click)="openPage(p)">
         {{p.title}}
       </button>
 
diff --git a/demos/list/basic-list.html b/demos/list/basic-list.html
index dcb53f936e..822157a244 100644
--- a/demos/list/basic-list.html
+++ b/demos/list/basic-list.html
@@ -2,7 +2,7 @@
 <ion-navbar *navbar class="show-navbar">
 
   <button menuToggle="leftMenu">
-    <icon menu></icon>
+    <ion-icon menu></ion-icon>
   </button>
 
   <ion-title>
@@ -20,12 +20,12 @@
     </ion-list-header>
 
     <ion-toggle>
-      <icon wifi item-left></icon>
+      <ion-icon name="wifi" item-left></ion-icon>
       Wifi
     </ion-toggle>
 
     <ion-item>
-      <icon heart item-left></icon>
+      <ion-icon name="heart" item-left></ion-icon>
       Affection
       <ion-note item-right>
         Very Little
@@ -33,7 +33,7 @@
     </ion-item>
 
     <ion-item>
-      <icon home item-left></icon>
+      <ion-icon name="home" item-left></ion-icon>
       Home
       <ion-note item-right>
         Where the heart is
@@ -41,12 +41,12 @@
     </ion-item>
 
     <ion-toggle checked="true">
-      <icon color-wand item-left></icon>
+      <ion-icon name="color-wand" item-left></ion-icon>
       Magic
     </ion-toggle>
 
     <ion-item>
-      <icon star item-left></icon>
+      <ion-icon name="star" item-left></ion-icon>
       Star status
       <ion-note item-right>
         Super
@@ -54,7 +54,7 @@
     </ion-item>
 
     <ion-item>
-      <icon pizza item-left></icon>
+      <ion-icon name="pizza" item-left></ion-icon>
       Pizza
       <ion-note item-right>
         Always
@@ -62,7 +62,7 @@
     </ion-item>
 
     <ion-item>
-      <icon beer item-left></icon>
+      <ion-icon name="beer" item-left></ion-icon>
       Beer
       <ion-note item-right>
         Yes Plz
@@ -70,7 +70,7 @@
     </ion-item>
 
     <ion-item>
-      <icon wine item-left></icon>
+      <ion-icon name="wine" item-left></ion-icon>
       Wine
       <ion-note item-right>
         All the time
diff --git a/demos/list/inset-list.html b/demos/list/inset-list.html
index 3fc6f24d13..d434790226 100644
--- a/demos/list/inset-list.html
+++ b/demos/list/inset-list.html
@@ -2,7 +2,7 @@
 <ion-navbar *navbar class="show-navbar">
 
   <button menuToggle="leftMenu">
-    <icon menu></icon>
+    <ion-icon name="menu"></ion-icon>
   </button>
 
   <ion-title>
@@ -20,12 +20,12 @@
     </ion-list-header>
 
     <ion-toggle>
-      <icon wifi item-left></icon>
+      <ion-icon name="wifi" item-left></ion-icon>
       Wifi
     </ion-toggle>
 
     <ion-item>
-      <icon heart item-left></icon>
+      <ion-icon name="heart" item-left></ion-icon>
       Affection
       <ion-note item-right>
         Very Little
@@ -33,7 +33,7 @@
     </ion-item>
 
     <ion-item>
-      <icon home item-left></icon>
+      <ion-icon name="home" item-left></ion-icon>
       Home
       <ion-note item-right>
         Where the heart is
@@ -41,12 +41,12 @@
     </ion-item>
 
     <ion-toggle checked="true">
-      <icon color-wand item-left></icon>
+      <ion-icon name="color-wand" item-left></ion-icon>
       Magic
     </ion-toggle>
 
     <ion-item>
-      <icon star item-left></icon>
+      <ion-icon name="star" item-left></ion-icon>
       Star status
       <ion-note item-right>
         Super
@@ -54,7 +54,7 @@
     </ion-item>
 
     <ion-item>
-      <icon pizza item-left></icon>
+      <ion-icon name="pizza" item-left></ion-icon>
       Pizza
       <ion-note item-right>
         Always
@@ -62,7 +62,7 @@
     </ion-item>
 
     <ion-item>
-      <icon beer item-left></icon>
+      <ion-icon name="beer" item-left></ion-icon>
       Beer
       <ion-note item-right>
         Yes Plz
@@ -70,7 +70,7 @@
     </ion-item>
 
     <ion-item>
-      <icon wine item-left></icon>
+      <ion-icon name="wine" item-left></ion-icon>
       Wine
       <ion-note item-right>
         All the time
diff --git a/demos/list/list-headers.html b/demos/list/list-headers.html
index 8e38c94647..56ec7f0317 100644
--- a/demos/list/list-headers.html
+++ b/demos/list/list-headers.html
@@ -2,7 +2,7 @@
 <ion-navbar *navbar class="show-navbar">
 
   <button menuToggle="leftMenu">
-    <icon menu></icon>
+    <ion-icon name="menu"></ion-icon>
   </button>
 
   <ion-title>
diff --git a/demos/list/no-lines-list.html b/demos/list/no-lines-list.html
index 06c50cfeae..d8a44bb8c4 100644
--- a/demos/list/no-lines-list.html
+++ b/demos/list/no-lines-list.html
@@ -2,7 +2,7 @@
 <ion-navbar *navbar class="show-navbar">
 
   <button menuToggle="leftMenu">
-    <icon menu></icon>
+    <ion-icon name="menu"></ion-icon>
   </button>
 
   <ion-title>
@@ -20,12 +20,12 @@
     </ion-list-header>
 
     <ion-toggle>
-      <icon wifi item-left></icon>
+      <ion-icon name="wifi" item-left></ion-icon>
       Wifi
     </ion-toggle>
 
     <ion-item>
-      <icon heart item-left></icon>
+      <ion-icon name="heart" item-left></ion-icon>
       Affection
       <ion-note item-right>
         Very Little
@@ -33,7 +33,7 @@
     </ion-item>
 
     <ion-item>
-      <icon home item-left></icon>
+      <ion-icon name="home" item-left></ion-icon>
       Home
       <ion-note item-right>
         Where the heart is
@@ -41,12 +41,12 @@
     </ion-item>
 
     <ion-toggle checked="true">
-      <icon color-wand item-left></icon>
+      <ion-icon name="color-wand" item-left></ion-icon>
       Magic
     </ion-toggle>
 
     <ion-item>
-      <icon star item-left></icon>
+      <ion-icon name="star" item-left></ion-icon>
       Star status
       <ion-note item-right>
         Super
@@ -54,7 +54,7 @@
     </ion-item>
 
     <ion-item>
-      <icon pizza item-left></icon>
+      <ion-icon name="pizza" item-left></ion-icon>
       Pizza
       <ion-note item-right>
         Always
@@ -62,7 +62,7 @@
     </ion-item>
 
     <ion-item>
-      <icon beer item-left></icon>
+      <ion-icon name="beer" item-left></ion-icon>
       Beer
       <ion-note item-right>
         Yes Plz
@@ -70,7 +70,7 @@
     </ion-item>
 
     <ion-item>
-      <icon wine item-left></icon>
+      <ion-icon name="wine" item-left></ion-icon>
       Wine
       <ion-note item-right>
         All the time
diff --git a/demos/list/sliding-items.html b/demos/list/sliding-items.html
index 8a159b5897..5a492c1432 100644
--- a/demos/list/sliding-items.html
+++ b/demos/list/sliding-items.html
@@ -2,7 +2,7 @@
 <ion-navbar *navbar class="show-navbar">
 
   <button menuToggle="leftMenu">
-    <icon menu></icon>
+    <ion-icon name="menu"></ion-icon>
   </button>
 
   <ion-title>
diff --git a/demos/local-storage/main.html b/demos/local-storage/main.html
index 6f77643bc0..a3fe25b8e5 100644
--- a/demos/local-storage/main.html
+++ b/demos/local-storage/main.html
@@ -7,19 +7,19 @@
   <ion-row>
     <ion-col width-33>
       <ion-input>
-        <input type="text" placeholder="Key" [(ng-model)]="myItem.key">
+        <input type="text" placeholder="Key" [(ngModel)]="myItem.key">
       </ion-input>
     </ion-col>
 
     <ion-col width-33>
       <ion-input>
-        <input type="text" placeholder="Value" [(ng-model)]="myItem.value">
+        <input type="text" placeholder="Value" [(ngModel)]="myItem.value">
       </ion-input>
     </ion-col>
 
     <ion-col width-34>
       <button full secondary (click)="set()">
-        <icon add></icon>
+        <ion-icon name="add"></ion-icon>
         set()
       </button>
     </ion-col>
@@ -29,13 +29,13 @@
 
     <ion-col width-33>
       <ion-input>
-        <input type="text" placeholder="Key" [(ng-model)]="delKey">
+        <input type="text" placeholder="Key" [(ngModel)]="delKey">
       </ion-input>
     </ion-col>
 
     <ion-col width-34 offset-33>
       <button full danger (click)="remove()">
-        <icon remove></icon>
+        <ion-icon name="remove"></ion-icon>
         remove()
       </button>
     </ion-col>
diff --git a/demos/material/index.ts b/demos/material/index.ts
index 4dec6b6a61..3dca139d88 100644
--- a/demos/material/index.ts
+++ b/demos/material/index.ts
@@ -6,7 +6,7 @@ import {App, ActionSheet, IonicApp, IonicView, Register} from 'ionic/ionic';
   template: '<ion-navbar *navbar primary>' +
     '<ion-title>Heading</ion-title>' +
     '<button menuToggle="menu">' +
-      '<icon menu></icon>' +
+      '<ion-icon name="menu"></ion-icon>' +
     '</button>' +
     '<ion-buttons end>' +
       '<button><ion-icon md="ion-android-search" ios="ion-ios-search-strong"></i></button>' +
diff --git a/demos/menu/main.html b/demos/menu/main.html
index dc3cc4e90a..068573e6ac 100644
--- a/demos/menu/main.html
+++ b/demos/menu/main.html
@@ -8,7 +8,7 @@
 
     <ion-list>
 
-      <button ion-item *ng-for="#p of pages" (click)="openPage(menu, p)">
+      <button ion-item *ngFor="#p of pages" (click)="openPage(menu, p)">
         {{p.title}}
       </button>
 
diff --git a/demos/menu/page1.html b/demos/menu/page1.html
index c1ad7a0417..0e4e443501 100644
--- a/demos/menu/page1.html
+++ b/demos/menu/page1.html
@@ -2,7 +2,7 @@
 <ion-navbar *navbar>
 
   <button menuToggle>
-    <icon menu></icon>
+    <ion-icon name="menu"></ion-icon>
   </button>
 
   <ion-title>
diff --git a/demos/menu/page2.html b/demos/menu/page2.html
index ccf261f5db..577fc0173a 100644
--- a/demos/menu/page2.html
+++ b/demos/menu/page2.html
@@ -2,7 +2,7 @@
 <ion-navbar *navbar>
 
   <button menuToggle>
-    <icon menu></icon>
+    <ion-icon name="menu"></ion-icon>
   </button>
 
   <ion-title>
diff --git a/demos/modal/main.html b/demos/modal/main.html
index 6a0e8bd348..acf46d3495 100644
--- a/demos/modal/main.html
+++ b/demos/modal/main.html
@@ -16,7 +16,7 @@
     <ion-col>
       <ion-input floating-label style="margin-top: -10px">
         <ion-label>Params</ion-label>
-        <input [(ng-model)]="myParam" type="text" value="">
+        <input [(ngModel)]="myParam" type="text" value="">
       </ion-input>
     </ion-col>
   </ion-row>
diff --git a/demos/native/main.html b/demos/native/main.html
index 1882213767..8d080ea455 100644
--- a/demos/native/main.html
+++ b/demos/native/main.html
@@ -2,7 +2,7 @@
   <ion-toolbar><ion-title>Plugins</ion-title></ion-toolbar>
   <ion-content>
     <ion-list>
-      <button ion-item *ng-for="#p of plugins" (click)="openPage(menu, p)">
+      <button ion-item *ngFor="#p of plugins" (click)="openPage(menu, p)">
         {{p.title}}
       </button>
     </ion-list>
diff --git a/demos/native/pages/battery.ts b/demos/native/pages/battery.ts
index 4e801ea7d3..874cf7065e 100644
--- a/demos/native/pages/battery.ts
+++ b/demos/native/pages/battery.ts
@@ -5,7 +5,7 @@ import {IonicView, Battery} from 'ionic/ionic';
   template: `
   <ion-navbar *navbar>
     <button menuToggle>
-      <icon menu></icon>
+      <ion-icon name="menu"></ion-icon>
     </button>
     <ion-title>Battery</ion-title>
   </ion-navbar>
diff --git a/demos/native/pages/camera.ts b/demos/native/pages/camera.ts
index 7c8209dbd9..46bbdff8aa 100644
--- a/demos/native/pages/camera.ts
+++ b/demos/native/pages/camera.ts
@@ -6,7 +6,7 @@ import {Camera} from 'ionic/ionic';
   template: `
   <ion-navbar *navbar>
     <button menuToggle>
-      <icon menu></icon>
+      <ion-icon name="menu"></ion-icon>
     </button>
     <ion-title>Camera</ion-title>
   </ion-navbar>
diff --git a/demos/native/pages/contacts.ts b/demos/native/pages/contacts.ts
index 1e9ff97142..b70be02667 100644
--- a/demos/native/pages/contacts.ts
+++ b/demos/native/pages/contacts.ts
@@ -6,7 +6,7 @@ import {Contacts} from 'ionic/ionic';
   template: `
   <ion-navbar *navbar>
     <button menuToggle>
-      <icon menu></icon>
+      <ion-icon name="menu"></ion-icon>
     </button>
     <ion-title>Contacts</ion-title>
   </ion-navbar>
diff --git a/demos/native/pages/device-motion.ts b/demos/native/pages/device-motion.ts
index 2d24b69515..2b51093288 100644
--- a/demos/native/pages/device-motion.ts
+++ b/demos/native/pages/device-motion.ts
@@ -5,7 +5,7 @@ import {IonicView, DeviceMotion} from 'ionic/ionic';
   template: `
   <ion-navbar *navbar>
     <button menuToggle>
-      <icon menu></icon>
+      <ion-icon name="menu"></ion-icon>
     </button>
     <ion-title>Device Motion</ion-title>
   </ion-navbar>
diff --git a/demos/native/pages/device-orientation.ts b/demos/native/pages/device-orientation.ts
index 4eead1c265..3807083f92 100644
--- a/demos/native/pages/device-orientation.ts
+++ b/demos/native/pages/device-orientation.ts
@@ -5,7 +5,7 @@ import {IonicView, DeviceOrientation} from 'ionic/ionic';
   template: `
   <ion-navbar *navbar>
     <button menuToggle>
-      <icon menu></icon>
+      <ion-icon name="menu"></ion-icon>
     </button>
     <ion-title>Device Orientation</ion-title>
   </ion-navbar>
diff --git a/demos/native/pages/device.ts b/demos/native/pages/device.ts
index 371830ea2e..f08613e8d4 100644
--- a/demos/native/pages/device.ts
+++ b/demos/native/pages/device.ts
@@ -5,7 +5,7 @@ import {IonicView, Device} from 'ionic/ionic';
   template: `
   <ion-navbar *navbar>
     <button menuToggle>
-      <icon menu></icon>
+      <ion-icon name="menu"></ion-icon>
     </button>
     <ion-title>Device</ion-title>
   </ion-navbar>
diff --git a/demos/native/pages/dialogs.ts b/demos/native/pages/dialogs.ts
index 622934453b..fc3a51f9a1 100644
--- a/demos/native/pages/dialogs.ts
+++ b/demos/native/pages/dialogs.ts
@@ -5,7 +5,7 @@ import {IonicView, Dialogs} from 'ionic/ionic';
   template: `
   <ion-navbar *navbar>
     <button menuToggle>
-      <icon menu></icon>
+      <ion-icon name="menu"></ion-icon>
     </button>
     <ion-title>Dialogs</ion-title>
   </ion-navbar>
diff --git a/demos/native/pages/geolocation.ts b/demos/native/pages/geolocation.ts
index 3cccb4fa13..5fd2475bda 100644
--- a/demos/native/pages/geolocation.ts
+++ b/demos/native/pages/geolocation.ts
@@ -6,7 +6,7 @@ import {Geolocation} from 'ionic/ionic';
   template: `
   <ion-navbar *navbar>
     <button menuToggle>
-      <icon menu></icon>
+      <ion-icon name="menu"></ion-icon>
     </button>
     <ion-title>Geolocation</ion-title>
   </ion-navbar>
diff --git a/demos/native/pages/statusbar.ts b/demos/native/pages/statusbar.ts
index 2c15a10ed9..d9b328c27d 100644
--- a/demos/native/pages/statusbar.ts
+++ b/demos/native/pages/statusbar.ts
@@ -6,7 +6,7 @@ import {StatusBar} from 'ionic/ionic';
   template: `
   <ion-navbar *navbar>
     <button menuToggle>
-      <icon menu></icon>
+      <ion-icon name="menu"></ion-icon>
     </button>
     <ion-title>StatusBar</ion-title>
   </ion-navbar>
@@ -20,7 +20,7 @@ import {StatusBar} from 'ionic/ionic';
     </div>
     <div>
       <div>
-        <input [(ng-model)]="colorHex">
+        <input [(ngModel)]="colorHex">
       </div>
       <button primary outline (click)="setColor()">Set Color</button>
     </div>
diff --git a/demos/native/pages/vibration.ts b/demos/native/pages/vibration.ts
index ef4e6ff54c..ddf7f19c13 100644
--- a/demos/native/pages/vibration.ts
+++ b/demos/native/pages/vibration.ts
@@ -6,7 +6,7 @@ import {Vibration} from 'ionic/ionic';
   template: `
   <ion-navbar *navbar>
     <button menuToggle>
-      <icon menu></icon>
+      <ion-icon name="menu"></ion-icon>
     </button>
     <ion-title>Vibration</ion-title>
   </ion-navbar>
diff --git a/demos/nav-params/main.html b/demos/nav-params/main.html
index 0a74f8923d..38fe4c6bd5 100644
--- a/demos/nav-params/main.html
+++ b/demos/nav-params/main.html
@@ -5,7 +5,7 @@
 <ion-content padding>
   <ion-row>
     <ion-input style="width: 100%">
-      <input type="text" placeholder="Params" [(ng-model)]="myParam">
+      <input type="text" placeholder="Params" [(ngModel)]="myParam">
     </ion-input>
   </ion-row>
   <ion-row>
diff --git a/demos/segment/main.html b/demos/segment/main.html
index 702564113a..d4efbabfff 100644
--- a/demos/segment/main.html
+++ b/demos/segment/main.html
@@ -1,4 +1,4 @@
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
 
   <ion-title>
     Segment
@@ -7,7 +7,7 @@
 </ion-navbar>
 
 <ion-toolbar [attr.primary]="isAndroid ? '' : null">
-  <ion-segment [(ng-model)]="pet">
+  <ion-segment [(ngModel)]="pet">
     <ion-segment-button value="puppies">
       Puppies
     </ion-segment-button>
@@ -27,8 +27,8 @@
 
   </div>  -->
 
-  <div [ng-switch]="pet">
-    <ion-list *ng-switch-when="'puppies'">
+  <div [ngSwitch]="pet">
+    <ion-list *ngSwitchWhen="'puppies'">
       <ion-item>
         <ion-thumbnail item-left>
           <img src="img/thumbnail-puppy-1.jpg">
@@ -55,7 +55,7 @@
       </ion-item>
     </ion-list>
 
-    <ion-list *ng-switch-when="'kittens'">
+    <ion-list *ngSwitchWhen="'kittens'">
       <ion-item>
         <ion-thumbnail item-left>
           <img src="img/thumbnail-kitten-1.jpg">
@@ -82,7 +82,7 @@
       </ion-item>
     </ion-list>
 
-    <ion-list *ng-switch-when="'ducklings'">
+    <ion-list *ngSwitchWhen="'ducklings'">
       <ion-item>
         <ion-thumbnail item-left>
           <img src="img/thumbnail-duckling-1.jpg">
diff --git a/demos/slides/main.html b/demos/slides/main.html
index d93835abfe..e9cad308ac 100644
--- a/demos/slides/main.html
+++ b/demos/slides/main.html
@@ -1,5 +1,5 @@
 <ion-slides [options]="extraOptions" id="slider" style="background-color: black" zoom>
-  <ion-slide *ng-for="#image of images">
+  <ion-slide *ngFor="#image of images">
     <img data-src="{{getImageUrl(image)}}" slide-lazy>
   </ion-slide>
 </ion-slides>
diff --git a/demos/toolbar/main.html b/demos/toolbar/main.html
index bb3f6c2cf7..787d134eff 100644
--- a/demos/toolbar/main.html
+++ b/demos/toolbar/main.html
@@ -12,15 +12,15 @@
   <ion-toolbar>
     <ion-buttons start>
       <button>
-        <icon ios=contact></icon>
+        <ion-icon name="contact"></ion-icon>
       </button>
       <button>
-        <icon search></icon>
+        <ion-icon name="search"></ion-icon>
       </button>
     </ion-buttons>
     <ion-buttons end>
       <button secondary>
-        <icon more></icon>
+        <ion-icon name="more"></ion-icon>
       </button>
     </ion-buttons>
     <ion-title>Defaults</ion-title>
@@ -29,10 +29,10 @@
   <ion-toolbar>
     <ion-buttons start>
       <button solid>
-        <icon contact></icon>
+        <ion-icon name="contact"></ion-icon>
       </button>
       <button solid>
-        <icon contact></icon>
+        <ion-icon name="contact"></ion-icon>
         Solid
       </button>
     </ion-buttons>
@@ -40,7 +40,7 @@
     <ion-buttons end>
       <button solid secondary>
         Help
-        <icon help-circle></icon>
+        <ion-icon name="help-circle"></ion-icon>
       </button>
     </ion-buttons>
   </ion-toolbar>
@@ -49,16 +49,16 @@
   <ion-toolbar>
     <ion-buttons start>
       <button outline>
-        <icon contact></icon>
+        <ion-icon name="contact"></ion-icon>
       </button>
       <button outline>
-        <icon star></icon>
+        <ion-icon name="star"></ion-icon>
         Star
       </button>
     </ion-buttons>
     <ion-buttons end>
       <button secondary outline>
-        <icon contact></icon>
+        <ion-icon name="contact"></ion-icon>
       </button>
     </ion-buttons>
     <ion-title>Outline</ion-title>
@@ -68,14 +68,14 @@
   <ion-toolbar>
     <ion-buttons start>
       <button>
-        <icon contact></icon>
+        <ion-icon name="contact"></ion-icon>
         Clear
       </button>
     </ion-buttons>
     <ion-buttons end>
       <button>
         Edit
-        <icon create></icon>
+        <ion-icon name="create"></ion-icon>
       </button>
     </ion-buttons>
     <ion-title>Icon/Color Attr</ion-title>
@@ -84,11 +84,11 @@
 
   <ion-toolbar>
     <button menuToggle>
-      <icon menu></icon>
+      <ion-icon name="menu"></ion-icon>
     </button>
     <ion-buttons start>
       <button>
-        <icon star></icon>
+        <ion-icon name="star"></ion-icon>
       </button>
     </ion-buttons>
     <ion-title>Left side menu toggle</ion-title>
@@ -98,19 +98,19 @@
   <ion-toolbar>
   <ion-buttons end>
     <button #button1 (click)="buttonClick(button1)">
-      <icon star></icon>
+      <ion-icon name="star"></ion-icon>
     </button>
   </ion-buttons>
     <ion-title>Right side menu toggle</ion-title>
     <button menuToggle right>
-      <icon menu></icon>
+      <ion-icon name="menu"></ion-icon>
     </button>
   </ion-toolbar>
 
   <ion-toolbar>
     <ion-buttons end>
       <button #button2 (click)="buttonClick(button2)">
-        <icon search></icon>
+        <ion-icon name="search"></ion-icon>
       </button>
     </ion-buttons>
     <ion-segment secondary>