From 46baa7309e869cb4b41bfff1fa7d6a30bc766e26 Mon Sep 17 00:00:00 2001
From: Drew Rygh <drew.rygh@gmail.com>
Date: Wed, 6 Jan 2016 09:49:31 -0600
Subject: [PATCH] docs(demos): update icons and searchbar

---
 .../component-docs/badge/basic/template.html  |  4 +-
 .../buttons/components/components.html        |  8 +--
 demos/component-docs/buttons/fab/fab.html     | 10 +--
 demos/component-docs/buttons/icons/icons.html | 28 ++++----
 .../cards/advanced-map/template.html          | 24 +++----
 .../cards/advanced-social/template.html       | 12 ++--
 .../cards/advanced-weather/template.html      |  6 +-
 .../component-docs/cards/image/template.html  | 24 +++----
 demos/component-docs/cards/list/template.html | 12 ++--
 .../component-docs/icons/basic/template.html  | 66 +++++++++----------
 demos/component-docs/inputs/search/pages.ts   | 27 +++++---
 .../inputs/search/template.html               |  8 +--
 demos/component-docs/lists/icon/template.html | 22 +++----
 .../menus/basic/menu-events.html              |  2 +-
 .../menus/basic/menu-friends.html             |  2 +-
 .../component-docs/menus/basic/menu-home.html |  2 +-
 .../menus/basic/menu-places.html              |  2 +-
 .../modals/basic/modal-content.html           |  2 +-
 .../navigation/basic/navigation.html          |  8 +--
 19 files changed, 138 insertions(+), 131 deletions(-)

diff --git a/demos/component-docs/badge/basic/template.html b/demos/component-docs/badge/basic/template.html
index 77965ece5a..4f0132c0de 100644
--- a/demos/component-docs/badge/basic/template.html
+++ b/demos/component-docs/badge/basic/template.html
@@ -19,13 +19,13 @@
     </ion-card-content>
 
     <ion-item>
-      <icon musical-notes item-left style="color: #d03e84"></icon>
+      <ion-icon musical-notes item-left style="color: #d03e84"></ion-icon>
       Albums
       <ion-badge item-right>9</ion-badge>
     </ion-item>
 
     <ion-item>
-      <icon ion-social-twitter item-left style="color: #55acee"></icon>
+      <ion-icon ion-social-twitter item-left style="color: #55acee"></ion-icon>
       Followers
       <ion-badge item-right>260k</ion-badge>
     </ion-item>
diff --git a/demos/component-docs/buttons/components/components.html b/demos/component-docs/buttons/components/components.html
index 0107b17e31..30478389fd 100644
--- a/demos/component-docs/buttons/components/components.html
+++ b/demos/component-docs/buttons/components/components.html
@@ -4,12 +4,12 @@
 
   <ion-buttons start>
     <button>
-      <icon contact></icon>
+      <ion-icon contact></ion-icon>
     </button>
   </ion-buttons>
   <ion-buttons end>
   <button>
-    <icon search></icon>
+    <ion-icon search></ion-icon>
   </button>
   </ion-buttons>
 
@@ -40,7 +40,7 @@
     <ion-item>
       Left Icon Button
       <button item-right outline>
-        <icon star></icon>
+        <ion-icon star></ion-icon>
         Left Icon
       </button>
     </ion-item>
@@ -49,7 +49,7 @@
       Right Icon Button
       <button item-right outline>
         Right Icon
-        <icon star></icon>
+        <ion-icon star></ion-icon>
       </button>
     </ion-item>
 
diff --git a/demos/component-docs/buttons/fab/fab.html b/demos/component-docs/buttons/fab/fab.html
index 7cb7266880..f3c08cbf94 100644
--- a/demos/component-docs/buttons/fab/fab.html
+++ b/demos/component-docs/buttons/fab/fab.html
@@ -5,22 +5,22 @@
 <ion-content class="has-header components-demo">
   <p>
     <button fab primary fab-top fab-left>
-      <icon add></icon>
+      <ion-icon add></ion-icon>
     </button>
     <button fab secondary fab-top fab-center>
-      <icon is-active="false" compass></icon>
+      <ion-icon is-active="false" compass></ion-icon>
     </button>
     <button fab danger fab-top fab-right>
-      <icon is-active="false" mic></icon>
+      <ion-icon is-active="false" mic></ion-icon>
     </button>
 <!--     <button fab dark fab-bottom fab-center id="demo-fab-bottom">
-      <icon is-active="false" heart></icon>
+      <ion-icon is-active="false" heart></ion-icon>
     </button> -->
   </p>
 </ion-content>
 
 <button fab dark fab-bottom fab-center style="z-index: 999">
-  <icon is-active="false" heart></icon>
+  <ion-icon is-active="false" heart></ion-icon>
 </button>
 
 <ion-toolbar id="subtle-footer">
diff --git a/demos/component-docs/buttons/icons/icons.html b/demos/component-docs/buttons/icons/icons.html
index 0ae1d1771d..e946b245cd 100644
--- a/demos/component-docs/buttons/icons/icons.html
+++ b/demos/component-docs/buttons/icons/icons.html
@@ -7,70 +7,70 @@
 
   <p>
     <button light>
-      <icon arrow-back></icon>
+      <ion-icon arrow-back></ion-icon>
       Back
     </button>
 
     <button light>
-      <icon arrow-down></icon>
+      <ion-icon arrow-down></ion-icon>
     </button>
 
     <button light>
-      <icon arrow-up></icon>
+      <ion-icon arrow-up></ion-icon>
     </button>
 
     <button light>
       Next
-      <icon arrow-forward></icon>
+      <ion-icon arrow-forward></ion-icon>
     </button>
   </p>
 
   <p>
     <button>
-      <icon home></icon>
+      <ion-icon home></ion-icon>
       Home
     </button>
     <button outline >
-      <icon briefcase is-active="false"></icon>
+      <ion-icon briefcase is-active="false"></ion-icon>
       Work
     </button>
     <button clear>
-      <icon beer is-active="false"></icon>
+      <ion-icon beer is-active="false"></ion-icon>
       Pub
     </button>
   </p>
 
   <p>
     <button secondary>
-      <icon people></icon>
+      <ion-icon people></ion-icon>
       Friends
     </button>
     <button secondary outline>
-      <icon paw is-active="false"></icon>
+      <ion-icon paw is-active="false"></ion-icon>
       Best Friend
     </button>
   </p>
 
   <p>
     <button danger>
-      <icon close></icon>
+      <ion-icon close></ion-icon>
       Remove
     </button>
     <button danger outline>
-      <icon remove-circle is-active="false"></icon>
+      <ion-icon remove-circle is-active="false"></ion-icon>
     </button>
     <button danger clear>
-      <icon trash is-active="false"></icon>
+      <ion-icon trash is-active="false"></ion-icon>
     </button>
   </p>
 
   <p>
     <button dark round>
-      <icon construct is-active="false"></icon>
+      <ion-icon construct is-active="false"></ion-icon>
       Tools
     </button>
     <button dark clear>
-      <icon hammer is-active="false"></icon>
+      <ion-icon hammer is-active="false"></ion-icon>
     </button>
   </p>
 
diff --git a/demos/component-docs/cards/advanced-map/template.html b/demos/component-docs/cards/advanced-map/template.html
index 2a19d91eb7..e6783e1189 100644
--- a/demos/component-docs/cards/advanced-map/template.html
+++ b/demos/component-docs/cards/advanced-map/template.html
@@ -9,19 +9,19 @@
   <div style="position: relative">
     <img src="img/advance-card-map-madison.png">
     <button fab fab-right fab-top class="fab-map">
-      <icon pin></icon>
+      <ion-icon pin></ion-icon>
     </button>
   </div>
   <ion-item>
     <ion-avatar item-left class="icon-avatar">
-      <icon football></icon>
+      <ion-icon football></ion-icon>
     </ion-avatar>
     <h2>Museum of Football</h2>
     <p>11 N. Way St, Madison, WI 53703</p>
   </ion-item>
   <ion-item>
     <ion-avatar item-left class="icon-avatar">
-      <icon wine></icon>
+      <ion-icon wine></ion-icon>
     </ion-avatar>
     <h2>Institute of Fine Cocktails</h2>
     <p>14 S. Hop Avenue, Madison, WI 53703</p>
@@ -30,7 +30,7 @@
     <span item-left class="item-bold">18 min</span>
     <span item-left class="item-subtle">(2.6 mi)</span>
     <button primary clear item-right>
-      <icon navigate></icon>
+      <ion-icon navigate></ion-icon>
       Start
     </button>
   </ion-item>
@@ -41,19 +41,19 @@
   <div style="position: relative">
     <img src="img/advance-card-map-mario.png">
     <button danger fab fab-right fab-top class="fab-map">
-      <icon pin></icon>
+      <ion-icon pin></ion-icon>
     </button>
   </div>
   <ion-item>
     <ion-avatar item-left class="icon-avatar">
-      <icon cloud></icon>
+      <ion-icon cloud></ion-icon>
     </ion-avatar>
     <h2>Yoshi's Island</h2>
     <p>Iggy Koopa</p>
   </ion-item>
   <ion-item>
     <ion-avatar item-left class="icon-avatar">
-      <icon leaf></icon>
+      <ion-icon leaf></ion-icon>
     </ion-avatar>
     <h2>Forest of Illusion</h2>
     <p>Roy Koopa</p>
@@ -62,7 +62,7 @@
     <span item-left class="item-bold">3 hr</span>
     <span item-left class="item-subtle">(4.8 mi)</span>
     <button danger clear item-right>
-      <icon navigate></icon>
+      <ion-icon navigate></ion-icon>
       Start
     </button>
   </ion-item>
@@ -73,19 +73,19 @@
   <div style="position: relative">
     <img src="img/advance-card-map-paris.png">
     <button secondary fab fab-right fab-top class="fab-map">
-      <icon pin></icon>
+      <ion-icon pin></ion-icon>
     </button>
   </div>
   <ion-item>
     <ion-avatar item-left class="icon-avatar">
-      <icon information-circle></icon>
+      <ion-icon information-circle></ion-icon>
     </ion-avatar>
     <h2>Museum of Information</h2>
     <p>44 Rue de Info, 75010 Paris, France</p>
   </ion-item>
   <ion-item>
     <ion-avatar item-left class="icon-avatar">
-      <icon leaf></icon>
+      <ion-icon leaf></ion-icon>
     </ion-avatar>
     <h2>General Pharmacy</h2>
     <p>1 Avenue Faux, 75010 Paris, France</p>
@@ -94,7 +94,7 @@
     <span item-left secondary class="item-bold">26 min</span>
     <span item-left class="item-subtle">(8.1 mi)</span>
     <button secondary clear item-right>
-      <icon navigate></icon>
+      <ion-icon navigate></ion-icon>
       Start
     </button>
   </ion-item>
diff --git a/demos/component-docs/cards/advanced-social/template.html b/demos/component-docs/cards/advanced-social/template.html
index ad7248df65..e42e1582e9 100644
--- a/demos/component-docs/cards/advanced-social/template.html
+++ b/demos/component-docs/cards/advanced-social/template.html
@@ -23,11 +23,11 @@
 
   <ion-item actions class="demo-card">
     <button primary clear item-left>
-      <icon thumbs-up></icon>
+      <ion-icon thumbs-up></ion-icon>
       <div>12 Likes</div>
     </button>
     <button primary clear item-left>
-      <icon text></icon>
+      <ion-icon text></ion-icon>
       <div>4 Comments</div>
     </button>
     <p item-left class="time-ago">
@@ -56,11 +56,11 @@
 
   <ion-item actions class="demo-card">
     <button primary clear item-left>
-      <icon thumbs-up></icon>
+      <ion-icon thumbs-up></ion-icon>
       <div>30 Likes</div>
     </button>
     <button primary clear item-left>
-      <icon text></icon>
+      <ion-icon text></ion-icon>
       <div>64 Comments</div>
     </button>
     <p item-left class="time-ago">
@@ -89,11 +89,11 @@
 
   <ion-item actions class="demo-card">
       <button primary clear item-left>
-        <icon thumbs-up></icon>
+        <ion-icon thumbs-up></ion-icon>
         <div>46 Likes</div>
       </button>
       <button primary clear item-left>
-        <icon text></icon>
+        <ion-icon text></ion-icon>
         <div>66 Comments</div>
       </button>
       <p item-left class="time-ago">2d ago</p>
diff --git a/demos/component-docs/cards/advanced-weather/template.html b/demos/component-docs/cards/advanced-weather/template.html
index 67360b427e..0cf8a00b8b 100644
--- a/demos/component-docs/cards/advanced-weather/template.html
+++ b/demos/component-docs/cards/advanced-weather/template.html
@@ -14,7 +14,7 @@
   </ion-item>
 
   <p class="advanced-background-title advanced-background-title-large">
-    <icon moon></icon>
+    <ion-icon moon></ion-icon>
     <span>23&deg;</span>
   </p>
 
@@ -34,7 +34,7 @@
   </ion-item>
 
   <p class="advanced-background-title advanced-background-title-large">
-    <icon Sunny></icon>
+    <ion-icon sunny></ion-icon>
     <span>78&deg;</span>
   </p>
 
@@ -54,7 +54,7 @@
   </ion-item>
 
   <p class="advanced-background-title advanced-background-title-large">
-    <icon thunderstorm></icon>
+    <ion-icon thunderstorm></ion-icon>
     <span>41&deg;</span>
   </p>
 
diff --git a/demos/component-docs/cards/image/template.html b/demos/component-docs/cards/image/template.html
index f4e55d4c3b..597ca07e5e 100644
--- a/demos/component-docs/cards/image/template.html
+++ b/demos/component-docs/cards/image/template.html
@@ -20,15 +20,15 @@
 
     <ion-item actions class="demo-card">
       <button clear item-left danger>
-        <icon star></icon>
+        <ion-icon star></ion-icon>
         Favorite
       </button>
       <button clear item danger>
-        <icon musical-notes></icon>
+        <ion-icon musical-notes></ion-icon>
         Listen
       </button>
       <button clear item-right danger>
-        <icon share-alt></icon>
+        <ion-icon share-alt></ion-icon>
         Share
       </button>
     </ion-item>
@@ -52,15 +52,15 @@
 
     <ion-item actions class="demo-card">
       <button clear item-left danger>
-        <icon star></icon>
+        <ion-icon star></ion-icon>
         Favorite
       </button>
       <button clear item danger>
-        <icon musical-notes></icon>
+        <ion-icon musical-notes></ion-icon>
         Listen
       </button>
       <button clear item-right danger>
-        <icon share-alt></icon>
+        <ion-icon share-alt></ion-icon>
         Share
       </button>
     </ion-item>
@@ -84,15 +84,15 @@
 
     <ion-item actions class="demo-card">
       <button clear item-left danger>
-        <icon star></icon>
+        <ion-icon star></ion-icon>
         Favorite
       </button>
       <button clear item danger>
-        <icon musical-notes></icon>
+        <ion-icon musical-notes></ion-icon>
         Listen
       </button>
       <button clear item-right danger>
-        <icon share-alt></icon>
+        <ion-icon share-alt></ion-icon>
         Share
       </button>
     </ion-item>
@@ -116,15 +116,15 @@
 
     <ion-item actions class="demo-card">
       <button clear item-left danger>
-        <icon star></icon>
+        <ion-icon star></ion-icon>
         Favorite
       </button>
       <button clear item danger>
-        <icon musical-notes></icon>
+        <ion-icon musical-notes></ion-icon>
         Listen
       </button>
       <button clear item-right danger>
-        <icon share-alt></icon>
+        <ion-icon share-alt></ion-icon>
         Share
       </button>
     </ion-item>
diff --git a/demos/component-docs/cards/list/template.html b/demos/component-docs/cards/list/template.html
index f1b44624aa..2b6b3b169b 100644
--- a/demos/component-docs/cards/list/template.html
+++ b/demos/component-docs/cards/list/template.html
@@ -12,32 +12,32 @@
 
     <ion-list>
       <button ion-item>
-        <icon cart item-left></icon>
+        <ion-icon cart item-left></ion-icon>
         Shopping
       </button>
 
       <button ion-item>
-        <icon medical item-left></icon>
+        <ion-icon medical item-left></ion-icon>
         Hospital
       </button>
 
       <button ion-item>
-        <icon cafe item-left></icon>
+        <ion-icon cafe item-left></ion-icon>
         Cafe
       </button>
 
       <button ion-item>
-        <icon paw item-left></icon>
+        <ion-icon paw item-left></ion-icon>
         Dog Park
       </button>
 
       <button ion-item>
-        <icon beer item-left></icon>
+        <ion-icon beer item-left></ion-icon>
         Pub
       </button>
 
       <button ion-item>
-        <icon planet item-left></icon>
+        <ion-icon planet item-left></ion-icon>
         Space
       </button>
 
diff --git a/demos/component-docs/icons/basic/template.html b/demos/component-docs/icons/basic/template.html
index 59b6bbe249..68084e5ec7 100644
--- a/demos/component-docs/icons/basic/template.html
+++ b/demos/component-docs/icons/basic/template.html
@@ -6,69 +6,69 @@
 <ion-content class="has-header preview-icons">
 
   <ion-row>
-    <ion-col><icon ionic></icon></ion-col>
-    <ion-col><icon ion-social-angular></icon></ion-col>
-    <ion-col><icon ionitron></icon></ion-col>
+    <ion-col><ion-icon ionic></ion-icon></ion-col>
+    <ion-col><ion-icon ion-social-angular></ion-icon></ion-col>
+    <ion-col><ion-icon ionitron></ion-icon></ion-col>
   </ion-row>
 
   <ion-row>
-    <ion-col><icon heart></icon></ion-col>
-    <ion-col><icon apps></icon></ion-col>
-    <ion-col><icon happy></icon></ion-col>
+    <ion-col><ion-icon heart></ion-icon></ion-col>
+    <ion-col><ion-icon apps></ion-icon></ion-col>
+    <ion-col><ion-icon happy></ion-icon></ion-col>
   </ion-row>
 
   <ion-row>
-    <ion-col><icon people></icon></ion-col>
-    <ion-col><icon person></icon></ion-col>
-    <ion-col><icon contact></icon></ion-col>
+    <ion-col><ion-icon people></ion-icon></ion-col>
+    <ion-col><ion-icon person></ion-icon></ion-col>
+    <ion-col><ion-icon contact></ion-icon></ion-col>
   </ion-row>
 
   <ion-row>
-    <ion-col><icon lock></icon></ion-col>
-    <ion-col><icon key></icon></ion-col>
-    <ion-col><icon unlock></icon></ion-col>
+    <ion-col><ion-icon lock></ion-icon></ion-col>
+    <ion-col><ion-icon key></ion-icon></ion-col>
+    <ion-col><ion-icon unlock></ion-icon></ion-col>
   </ion-row>
 
   <ion-row>
-    <ion-col><icon map></icon></ion-col>
-    <ion-col><icon navigate></icon></ion-col>
-    <ion-col><icon pin></icon></ion-col>
+    <ion-col><ion-icon map></ion-icon></ion-col>
+    <ion-col><ion-icon navigate></ion-icon></ion-col>
+    <ion-col><ion-icon pin></ion-icon></ion-col>
   </ion-row>
 
   <ion-row>
-    <ion-col><icon mic></icon></ion-col>
-    <ion-col><icon musical-notes></icon></ion-col>
-    <ion-col><icon volume-up></icon></ion-col>
+    <ion-col><ion-icon mic></ion-icon></ion-col>
+    <ion-col><ion-icon musical-notes></ion-icon></ion-col>
+    <ion-col><ion-icon volume-up></ion-icon></ion-col>
   </ion-row>
 
   <ion-row>
-    <ion-col><icon cafe></icon></ion-col>
-    <ion-col><icon calculator></icon></ion-col>
-    <ion-col><icon bus></icon></ion-col>
+    <ion-col><ion-icon cafe></ion-icon></ion-col>
+    <ion-col><ion-icon calculator></ion-icon></ion-col>
+    <ion-col><ion-icon bus></ion-icon></ion-col>
   </ion-row>
 
   <ion-row>
-    <ion-col><icon camera></icon></ion-col>
-    <ion-col><icon cube></icon></ion-col>
-    <ion-col><icon image></icon></ion-col>
+    <ion-col><ion-icon camera></ion-icon></ion-col>
+    <ion-col><ion-icon cube></ion-icon></ion-col>
+    <ion-col><ion-icon image></ion-icon></ion-col>
   </ion-row>
 
   <ion-row>
-    <ion-col><icon star></icon></ion-col>
-    <ion-col><icon wine></icon></ion-col>
-    <ion-col><icon pin></icon></ion-col>
+    <ion-col><ion-icon star></ion-icon></ion-col>
+    <ion-col><ion-icon wine></ion-icon></ion-col>
+    <ion-col><ion-icon pin></ion-icon></ion-col>
   </ion-row>
 
   <ion-row>
-    <ion-col><icon arrow-back></icon></ion-col>
-    <ion-col><icon arrow-dropdown></icon></ion-col>
-    <ion-col><icon arrow-forward></icon></ion-col>
+    <ion-col><ion-icon arrow-back></ion-icon></ion-col>
+    <ion-col><ion-icon arrow-dropdown></ion-icon></ion-col>
+    <ion-col><ion-icon arrow-forward></ion-icon></ion-col>
   </ion-row>
 
   <ion-row>
-    <ion-col><icon sunny></icon></ion-col>
-    <ion-col><icon umbrella></icon></ion-col>
-    <ion-col><icon rainy></icon></ion-col>
+    <ion-col><ion-icon sunny></ion-icon></ion-col>
+    <ion-col><ion-icon umbrella></ion-icon></ion-col>
+    <ion-col><ion-icon rainy></ion-icon></ion-col>
   </ion-row>
 
 </ion-content>
diff --git a/demos/component-docs/inputs/search/pages.ts b/demos/component-docs/inputs/search/pages.ts
index 74e8000ec5..5238990bdb 100644
--- a/demos/component-docs/inputs/search/pages.ts
+++ b/demos/component-docs/inputs/search/pages.ts
@@ -9,6 +9,10 @@ import {AndroidAttribute} from '../../helpers';
 export class SearchPage{
   constructor() {
     this.searchQuery = '';
+    this.initializeItems();
+  }
+
+  initializeItems() {
     this.items = [
       'Amsterdam',
       'Bogota',
@@ -50,20 +54,23 @@ export class SearchPage{
     ];
   }
 
-  getItems() {
-    var q = this.searchQuery;
-    if(q.trim() == '') {
-      return this.items;
+  getItems(searchbar) {
+    // Reset items back to all of the items
+    this.initializeItems();
+
+    // set q to the value of the searchbar
+    var q = searchbar.value;
+
+    // if the value is an empty string don't filter the items
+    if (q.trim() == '') {
+      return;
     }
-    return this.items.filter((v) => {
-      if(v.toLowerCase().indexOf(q.toLowerCase()) >= 0) {
+
+    this.items = this.items.filter((v) => {
+      if (v.toLowerCase().indexOf(q.toLowerCase()) > -1) {
         return true;
       }
       return false;
     })
   }
-
-
-  
-
 }
diff --git a/demos/component-docs/inputs/search/template.html b/demos/component-docs/inputs/search/template.html
index f02ae0ac12..4e15014f82 100644
--- a/demos/component-docs/inputs/search/template.html
+++ b/demos/component-docs/inputs/search/template.html
@@ -5,10 +5,10 @@
 </ion-navbar>
 
 <ion-content>
-  <ion-searchbar [(ng-model)]="searchQuery"></ion-searchbar>
-  <ion-list #list>
-    <ion-item *ngFor="#item of getItems()">
-      {{item}}
+  <ion-searchbar [(ngModel)]="searchQuery" (input)="getItems($event)"></ion-searchbar>
+  <ion-list>
+    <ion-item *ngFor="#item of items">
+      {{ item }}
     </ion-item>
   </ion-list>
 </ion-content>
diff --git a/demos/component-docs/lists/icon/template.html b/demos/component-docs/lists/icon/template.html
index e2f4fa2a2a..58a6f636b9 100644
--- a/demos/component-docs/lists/icon/template.html
+++ b/demos/component-docs/lists/icon/template.html
@@ -11,7 +11,7 @@
     </ion-list-header>
 
     <ion-item>
-      <icon planet item-left></icon>
+      <ion-icon planet item-left></ion-icon>
       Astronomy
       <ion-note item-right>
       To the moon
@@ -19,18 +19,18 @@
     </ion-item>
 
     <ion-toggle checked="false">
-      <icon body item-left></icon>
+      <ion-icon body item-left></ion-icon>
       Muggle Studies
     </ion-toggle>
 
     <ion-item>
-      <icon leaf item-left></icon>
+      <ion-icon leaf item-left></ion-icon>
       Herbology
-      <icon rose item-right id="secondary"></icon>
+      <ion-icon rose item-right id="secondary"></ion-icon>
     </ion-item>
 
     <ion-item>
-      <icon flask item-left></icon>
+      <ion-icon flask item-left></ion-icon>
       Potions
       <ion-note item-right>
       Poisonous
@@ -50,17 +50,17 @@
 
     <ion-item>
       Incantation
-      <icon color-wand item-left></icon>
+      <ion-icon color-wand item-left></ion-icon>
       <ion-note item-right>Crucio!</ion-note>
     </ion-item>
 
     <ion-toggle checked="true">
-      <icon brush item-left></icon>
+      <ion-icon brush item-left></ion-icon>
       Quidditch Practice
     </ion-toggle>
 
     <ion-item>
-      <icon wine item-left></icon>
+      <ion-icon wine item-left></ion-icon>
       Mead Drinking
       <ion-note item-right>Yes please</ion-note>
     </ion-item>
@@ -75,19 +75,19 @@
     </ion-list-header>
 
     <ion-item>
-      <icon flash item-left></icon>
+      <ion-icon flash item-left></ion-icon>
       Harry
       <ion-note item-right>The boy who lived</ion-note>
     </ion-item>
 
     <ion-item>
-      <icon book item-left></icon>
+      <ion-icon book item-left></ion-icon>
       Hermoine
       <ion-note item-right>Muggle-born</ion-note>
     </ion-item>
 
     <ion-item>
-      <icon beer item-left></icon>
+      <ion-icon beer item-left></ion-icon>
       Ron
       <ion-note item-right>Brilliant!</ion-note>
     </ion-item>
diff --git a/demos/component-docs/menus/basic/menu-events.html b/demos/component-docs/menus/basic/menu-events.html
index a752f2dfff..bab26625f9 100644
--- a/demos/component-docs/menus/basic/menu-events.html
+++ b/demos/component-docs/menus/basic/menu-events.html
@@ -2,7 +2,7 @@
 <ion-navbar *navbar hideBackButton class="android-attr">
 
   <button menuToggle>
-    <icon menu></icon>
+    <ion-icon menu></ion-icon>
   </button>
 
   <ion-title>
diff --git a/demos/component-docs/menus/basic/menu-friends.html b/demos/component-docs/menus/basic/menu-friends.html
index 6805d6700e..0d5303f58b 100644
--- a/demos/component-docs/menus/basic/menu-friends.html
+++ b/demos/component-docs/menus/basic/menu-friends.html
@@ -1,7 +1,7 @@
 <ion-navbar *navbar hideBackButton class="android-attr">
 
   <button menuToggle="leftMenu">
-    <icon menu></icon>
+    <ion-icon menu></ion-icon>
   </button>
 
   <ion-title>
diff --git a/demos/component-docs/menus/basic/menu-home.html b/demos/component-docs/menus/basic/menu-home.html
index da8e6d2d50..d5272122dd 100644
--- a/demos/component-docs/menus/basic/menu-home.html
+++ b/demos/component-docs/menus/basic/menu-home.html
@@ -1,7 +1,7 @@
 <ion-navbar *navbar hideBackButton class="android-attr">
 
   <button menuToggle>
-    <icon menu></icon>
+    <ion-icon menu></ion-icon>
   </button>
 
   <ion-title>
diff --git a/demos/component-docs/menus/basic/menu-places.html b/demos/component-docs/menus/basic/menu-places.html
index 9ef36293bc..9bca6ad3bd 100644
--- a/demos/component-docs/menus/basic/menu-places.html
+++ b/demos/component-docs/menus/basic/menu-places.html
@@ -1,7 +1,7 @@
 <ion-navbar *navbar hideBackButton class="android-attr">
 
   <button menuToggle="leftMenu">
-    <icon menu></icon>
+    <ion-icon menu></ion-icon>
   </button>
 
   <ion-title>
diff --git a/demos/component-docs/modals/basic/modal-content.html b/demos/component-docs/modals/basic/modal-content.html
index eb361254a5..a8e9f24984 100644
--- a/demos/component-docs/modals/basic/modal-content.html
+++ b/demos/component-docs/modals/basic/modal-content.html
@@ -7,7 +7,7 @@
       Cancel
     </button>
     <button (click)="close()" *ng-if=" currentPlatform === 'android' ">
-      <icon close></icon>
+      <ion-icon close></ion-icon>
     </button>
   </ion-buttons>
 </ion-toolbar>
diff --git a/demos/component-docs/navigation/basic/navigation.html b/demos/component-docs/navigation/basic/navigation.html
index 7244e8bd56..aa02198dd2 100644
--- a/demos/component-docs/navigation/basic/navigation.html
+++ b/demos/component-docs/navigation/basic/navigation.html
@@ -7,22 +7,22 @@
   <ion-list>
 
     <button ion-item (click)="openNavDetailsPage('Angular')">
-      <icon ion-social-angular item-left></icon>
+      <ion-icon ion-social-angular item-left></ion-ion-icon>
       Angular
     </button>
 
     <button ion-item (click)="openNavDetailsPage('CSS3')">
-      <icon ion-social-css3 item-left></icon>
+      <ion-icon ion-social-css3 item-left></ion-ion-icon>
       CSS3
     </button>
 
     <button ion-item (click)="openNavDetailsPage('HTML5')">
-      <icon ion-social-html5 item-left></icon>
+      <ion-icon ion-social-html5 item-left></ion-ion-icon>
       HTML5
     </button>
 
     <button ion-item (click)="openNavDetailsPage('Sass')">
-      <icon ion-social-sass item-left></icon>
+      <ion-icon ion-social-sass item-left></ion-ion-icon>
       Sass
     </button>