docs(demos): update icons

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>
 

demos/config/app.html

@@ -1,2 +1 @@
 <ion-nav id="nav" [root]="rootPage" #content></ion-nav>
-<ion-overlay></ion-overlay>

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>

demos/config/tabs.html

@@ -1,5 +1,5 @@
 <ion-tabs>
-  <ion-tab tab-title="Music" [root]="tabOne"></ion-tab>
+  <ion-tab tabTitle="Music" [root]="tabOne"></ion-tab>
-  <ion-tab tab-title="Movies" [root]="tabOne"></ion-tab>
+  <ion-tab tabTitle="Movies" [root]="tabOne"></ion-tab>
-  <ion-tab tab-title="Games" [root]="tabOne"></ion-tab>
+  <ion-tab tabTitle="Games" [root]="tabOne"></ion-tab>
 </ion-tabs>

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>
 

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

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

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>

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

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>

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>

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>' +

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>
 

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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">
+  <div [ngSwitch]="pet">
-    <ion-list *ng-switch-when="'puppies'">
+    <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">

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>

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>