diff --git a/ionic/components/action-sheet/action-sheet.ios.scss b/ionic/components/action-sheet/action-sheet.ios.scss
index fb2c1190ca..61f33a1f74 100644
--- a/ionic/components/action-sheet/action-sheet.ios.scss
+++ b/ionic/components/action-sheet/action-sheet.ios.scss
@@ -21,6 +21,7 @@ $action-sheet-ios-button-border-color:            #d1d3d6 !default;
 $action-sheet-ios-button-background-active-color: #e9e9e9 !default;
 
 $action-sheet-ios-destructive-button-text-color:  #f53d3d !default;
+$action-sheet-ios-cancel-button-background-color: #fff !default;
 
 
 ion-action-sheet {
@@ -78,6 +79,7 @@ ion-action-sheet {
 
 .action-sheet-cancel {
   font-weight: bold;
+  background: $action-sheet-ios-cancel-button-background-color;
 }
 
 &.hairlines {
diff --git a/ionic/components/action-sheet/action-sheet.ts b/ionic/components/action-sheet/action-sheet.ts
index 2583ba6bfe..3c2d5cb424 100644
--- a/ionic/components/action-sheet/action-sheet.ts
+++ b/ionic/components/action-sheet/action-sheet.ts
@@ -134,13 +134,13 @@ import {Animation} from '../../animations/animation';
           '<div class="action-sheet-title" *ngIf="d.title">{{d.title}}</div>' +
           '<div class="action-sheet-sub-title" *ngIf="d.subTitle">{{d.subTitle}}</div>' +
           '<button (click)="click(b)" *ngFor="#b of d.buttons" class="action-sheet-button disable-hover" [ngClass]="b.cssClass">' +
-            '<icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></icon> ' +
+            '<ion-icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></ion-icon> ' +
             '{{b.text}}' +
           '</button>' +
         '</div>' +
         '<div class="action-sheet-group" *ngIf="d.cancelButton">' +
           '<button (click)="click(d.cancelButton)" class="action-sheet-button action-sheet-cancel disable-hover" [ngClass]="d.cancelButton.cssClass">' +
-            '<icon [name]="d.cancelButton.icon" *ngIf="d.cancelButton.icon" class="action-sheet-icon"></icon> ' +
+            '<ion-icon [name]="d.cancelButton.icon" *ngIf="d.cancelButton.icon" class="action-sheet-icon"></ion-icon> ' +
             '{{d.cancelButton.text}}' +
           '</button>' +
         '</div>' +
diff --git a/ionic/components/button/button-fab.scss b/ionic/components/button/button-fab.scss
index eaa925c709..404104d99c 100644
--- a/ionic/components/button/button-fab.scss
+++ b/ionic/components/button/button-fab.scss
@@ -24,7 +24,7 @@ $button-fab-size:           56px !default;
 
   font-size: 14px;
 
-  icon {
+  ion-icon {
     flex: 1;
     font-size: 2.8rem;
   }
diff --git a/ionic/components/button/button-icon.scss b/ionic/components/button/button-icon.scss
index 4b6c2a057f..878e1d33a3 100644
--- a/ionic/components/button/button-icon.scss
+++ b/ionic/components/button/button-icon.scss
@@ -4,14 +4,14 @@
 // --------------------------------------------------
 
 
-.button-icon-left icon {
+.button-icon-left ion-icon {
   padding-right: 0.3em;
   font-size: 1.4em;
   line-height: 0.67;
   pointer-events: none;
 }
 
-.button-icon-right icon {
+.button-icon-right ion-icon {
   padding-left: 0.4em;
   font-size: 1.4em;
   line-height: 0.67;
@@ -22,7 +22,7 @@
   padding: 0;
   min-width: 0.9em;
 
-  icon {
+  ion-icon {
     padding: 0 0.5em;
     font-size: 1.8em;
     line-height: 0.67;
diff --git a/ionic/components/button/button.ios.scss b/ionic/components/button/button.ios.scss
index 93111aac7b..b0d17e7bb6 100644
--- a/ionic/components/button/button.ios.scss
+++ b/ionic/components/button/button.ios.scss
@@ -85,7 +85,7 @@ $button-ios-small-icon-font-size:     1.3em !default;
   font-size: $button-ios-small-font-size;
 }
 
-.button-small.button-icon-only icon {
+.button-small.button-icon-only ion-icon {
   font-size: $button-ios-small-icon-font-size;
 }
 
diff --git a/ionic/components/button/button.md.scss b/ionic/components/button/button.md.scss
index 43170ba19e..0443114710 100644
--- a/ionic/components/button/button.md.scss
+++ b/ionic/components/button/button.md.scss
@@ -104,7 +104,7 @@ $button-md-small-icon-font-size:           1.4em !default;
   font-size: $button-md-small-font-size;
 }
 
-.button-small.button-icon-only icon {
+.button-small.button-icon-only ion-icon {
   font-size: $button-md-small-icon-font-size;
 }
 
diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts
index 932be6f642..59f17fb82d 100644
--- a/ionic/components/button/button.ts
+++ b/ionic/components/button/button.ts
@@ -123,12 +123,12 @@ export class Button {
         }
 
       } else if (childNode.nodeType === 1) {
-        if (childNode.nodeName === 'ICON') {
+        if (childNode.nodeName === 'ION-ICON') {
           // icon element node
           nodes.push(ICON);
 
         } else {
-          // element other than an <icon>
+          // element other than an <ion-icon>
           nodes.push(TEXT);
         }
       }
diff --git a/ionic/components/button/test/block/main.html b/ionic/components/button/test/block/main.html
index b99513a59d..9809d4a1a7 100644
--- a/ionic/components/button/test/block/main.html
+++ b/ionic/components/button/test/block/main.html
@@ -11,8 +11,8 @@
   </p>
 
   <p>
-    <a button block href="#"><icon help-circle></icon> a[button][block] icon</a>
-    <button block><icon help-circle></icon> button[block] icon</button>
+    <a button block href="#"><ion-icon name="help-circle"></ion-icon> a[button][block] icon</a>
+    <button block><ion-icon name="help-circle"></ion-icon> button[block] icon</button>
   </p>
 
   <p>
diff --git a/ionic/components/button/test/fab/main.html b/ionic/components/button/test/fab/main.html
index d081de4cd5..88976834c3 100644
--- a/ionic/components/button/test/fab/main.html
+++ b/ionic/components/button/test/fab/main.html
@@ -1,24 +1,24 @@
 
 <button fab fab-left fab-top>
-  <icon add></icon>
+  <ion-icon name="add"></ion-icon>
 </button>
 
 <button fab fab-center fab-top secondary>
-  <icon add></icon>
+  <ion-icon name="add"></ion-icon>
 </button>
 
 <button fab fab-right fab-top danger>
-  <icon add></icon>
+  <ion-icon name="add"></ion-icon>
 </button>
 
 <button fab fab-left fab-bottom light>
-  <icon add></icon>
+  <ion-icon name="add"></ion-icon>
 </button>
 
 <button fab fab-center fab-bottom primary>
-  <icon add></icon>
+  <ion-icon name="add"></ion-icon>
 </button>
 
 <button fab fab-right fab-bottom dark>
-  <icon add></icon>
+  <ion-icon name="add"></ion-icon>
 </button>
diff --git a/ionic/components/button/test/icons/main.html b/ionic/components/button/test/icons/main.html
index 9dde8cf4a6..c6ab489375 100644
--- a/ionic/components/button/test/icons/main.html
+++ b/ionic/components/button/test/icons/main.html
@@ -7,11 +7,11 @@
 
   <div>
     <button>
-      <icon home></icon>
+      <ion-icon name="home"></ion-icon>
       Left Icon
     </button>
     <a button>
-      <icon home></icon>
+      <ion-icon name="home"></ion-icon>
       Left Icon
     </a>
   </div>
@@ -19,30 +19,30 @@
   <div>
     <button>
       Right Icon
-      <icon star></icon>
+      <ion-icon name="star"></ion-icon>
     </button>
     <a button>
       Right Icon
-      <icon star></icon>
+      <ion-icon name="star"></ion-icon>
     </a>
   </div>
 
   <div>
     <button>
-      <icon flag></icon>
+      <ion-icon name="flag"></ion-icon>
     </button>
     <a button>
-      <icon flag></icon>
+      <ion-icon name="flag"></ion-icon>
     </a>
   </div>
 
   <div>
     <button large>
-      <icon help-circle></icon>
+      <ion-icon name="help-circle"></ion-icon>
       Left, Large
     </button>
     <a button large>
-      <icon help-circle></icon>
+      <ion-icon name="help-circle"></ion-icon>
       Left, Large
     </a>
   </div>
@@ -50,30 +50,30 @@
   <div>
     <button large>
       Right, Large
-      <icon settings></icon>
+      <ion-icon name="settings"></ion-icon>
     </button>
     <a button large>
       Right, Large
-      <icon settings></icon>
+      <ion-icon name="settings"></ion-icon>
     </a>
   </div>
 
   <div>
     <button large>
-      <icon heart></icon>
+      <ion-icon name="heart"></ion-icon>
     </button>
     <a button large>
-      <icon heart></icon>
+      <ion-icon name="heart"></ion-icon>
     </a>
   </div>
 
   <div>
     <button small>
-      <icon checkmark></icon>
+      <ion-icon name="checkmark"></ion-icon>
       Left, Small
     </button>
     <a button small>
-      <icon checkmark></icon>
+      <ion-icon name="checkmark"></ion-icon>
       Left, Small
     </a>
   </div>
@@ -81,20 +81,20 @@
   <div>
     <button small>
       Right, Small
-      <icon arrow-forward></icon>
+      <ion-icon name="arrow-forward"></ion-icon>
     </button>
     <a button small>
       Right, Small
-      <icon arrow-forward></icon>
+      <ion-icon name="arrow-forward"></ion-icon>
     </a>
   </div>
 
   <div>
     <button small>
-      <icon search></icon>
+      <ion-icon name="search"></ion-icon>
     </button>
     <a button small>
-      <icon search></icon>
+      <ion-icon name="search"></ion-icon>
     </a>
   </div>
 
diff --git a/ionic/components/card/test/advanced/main.html b/ionic/components/card/test/advanced/main.html
index dbf00b7f19..f8d0adc594 100644
--- a/ionic/components/card/test/advanced/main.html
+++ b/ionic/components/card/test/advanced/main.html
@@ -22,13 +22,13 @@
     <ion-row no-padding>
       <ion-col>
         <button clear small>
-          <icon star></icon>
+          <ion-icon name="star"></ion-icon>
           Star
         </button>
       </ion-col>
       <ion-col text-right>
         <button clear small class="activated">
-          <icon share></icon>
+          <ion-icon name="share"></ion-icon>
           Share.activated
         </button>
       </ion-col>
@@ -58,17 +58,17 @@
     <ion-row no-padding>
       <ion-col>
         <button clear small>
-          <icon star></icon>
+          <ion-icon name="star"></ion-icon>
           Favorite
         </button>
         <button clear small>
-          <icon musical-notes></icon>
+          <ion-icon name="musical-notes"></ion-icon>
           Listen
         </button>
       </ion-col>
       <ion-col text-right>
         <button clear small danger class="activated">
-          <icon share></icon>
+          <ion-icon name="share"></ion-icon>
           Share.activated
         </button>
       </ion-col>
@@ -88,20 +88,20 @@
     <ion-row text-center no-padding>
       <ion-col>
         <button clear small dark>
-          <icon star></icon>
+          <ion-icon name="star"></ion-icon>
           Favorite
         </button>
       </ion-col>
 
       <ion-col>
         <button clear small dark>
-          <icon musical-notes></icon>
+          <ion-icon name="musical-notes"></ion-icon>
           Listen
         </button>
       </ion-col>
       <ion-col>
         <button clear small dark>
-          <icon share-alt></icon>
+          <ion-icon name="share-alt"></ion-icon>
           Share
         </button>
       </ion-col>
diff --git a/ionic/components/card/test/basic/main.html b/ionic/components/card/test/basic/main.html
index d0eb4153d0..3c2f5a7be1 100644
--- a/ionic/components/card/test/basic/main.html
+++ b/ionic/components/card/test/basic/main.html
@@ -20,7 +20,7 @@
   <ion-card>
 
     <ion-item>
-      <icon pin item-left></icon>
+      <ion-icon name="pin" item-left></ion-icon>
       ion-item in a card, icon left, button right
       <button outline item-right>View</button>
     </ion-item>
@@ -36,22 +36,22 @@
   <ion-card>
 
     <a ion-item href="#" class="activated">
-      <icon wifi item-left></icon>
+      <ion-icon name="wifi" item-left></ion-icon>
       Card Link Item 1 .activated
     </a>
 
     <a ion-item href="#">
-      <icon wine item-left></icon>
+      <ion-icon name="wine" item-left></ion-icon>
       Card Link Item 2
     </a>
 
     <button ion-item class="activated">
-      <icon warning item-left></icon>
+      <ion-icon name="warning" item-left></ion-icon>
       Card Button Item 1 .activated
     </button>
 
     <button ion-item>
-      <icon walk item-left></icon>
+      <ion-icon name="walk" item-left></ion-icon>
       Card Button Item 2
     </button>
 
diff --git a/ionic/components/card/test/list/main.html b/ionic/components/card/test/list/main.html
index 83f89ea809..69dd1f1614 100644
--- a/ionic/components/card/test/list/main.html
+++ b/ionic/components/card/test/list/main.html
@@ -12,12 +12,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
@@ -25,7 +25,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
@@ -45,12 +45,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
@@ -58,7 +58,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
@@ -76,12 +76,12 @@
     </ion-card-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
@@ -89,7 +89,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
diff --git a/ionic/components/checkbox/test/basic/main.html b/ionic/components/checkbox/test/basic/main.html
index 570ee0c08e..a2a16cb0d8 100644
--- a/ionic/components/checkbox/test/basic/main.html
+++ b/ionic/components/checkbox/test/basic/main.html
@@ -36,7 +36,7 @@
 
   </form>
 
-  <p aria-hidden="true" class="align-center">
+  <p aria-hidden="true" text-center>
     <button (click)="toggleGrapeChecked()" outline small class="e2eGrapeChecked">Grape Checked</button>
     <button (click)="toggleGrapeDisabled()" outline small class="e2eGrapeDisabled">Grape Disabled</button>
     <button (click)="doSubmit($event)" outline small class="e2eSubmit">Submit</button>
diff --git a/ionic/components/icon/icon.scss b/ionic/components/icon/icon.scss
index 516dcf5ff2..10d156c411 100644
--- a/ionic/components/icon/icon.scss
+++ b/ionic/components/icon/icon.scss
@@ -4,11 +4,11 @@
 // --------------------------------------------------
 
 
-icon {
+ion-icon {
   display: inline-block;
   font-size: 1.2em;
 }
 
-icon[small] {
+ion-icon[small] {
   font-size: 1.1em;
 }
diff --git a/ionic/components/icon/icon.ts b/ionic/components/icon/icon.ts
index 04ea84e87a..b71586fe14 100644
--- a/ionic/components/icon/icon.ts
+++ b/ionic/components/icon/icon.ts
@@ -6,18 +6,20 @@ import {Config} from '../../config/config';
 /**
  * @name Icon
  * @description
- * Icons can be used on their own, or inside of a number of Ionic components. For a full list of available icons,
- * check out the [Ionicons resource docs](../../../../resources/ionicons).
+ * Icons can be used on their own, or inside of a number of Ionic components.
+ * For a full list of available icons, check out the
+ * [Ionicons resource docs](../../../../resources/ionicons).
  *
  * @usage
  * ```html
- * <!-- use the appropriate home icon for ios and md -->
- * <icon home></icon>
+ * <!-- use the appropriate star icon for ios and md -->
+ * <ion-icon name="star"></ion-icon>
  *
  * <!-- explicity set the icon for each platform -->
- * <icon ios="ion-ios-home" md="ion-md-home"></icon>
+ * <ion-icon ios="ion-ios-home" md="ion-md-home"></ion-icon>
  * ```
  *
+ * @property {string} [name] - Use the appropriate icon for the mode.
  * @property {boolean} [isActive] - Whether or not the icon is active. Icons that are not active will use an outlined version of the icon.
  * If there is not an outlined version for the particular icon, it will use the default (full) version.
  * @property {string} [ios] - Explicitly set the icon to use on iOS.
@@ -26,7 +28,7 @@ import {Config} from '../../config/config';
  *
  */
 @Directive({
-  selector: 'icon',
+  selector: 'ion-icon,icon',
   inputs: [
     'name',
     'ios',
@@ -40,42 +42,29 @@ import {Config} from '../../config/config';
 export class Icon {
 
   constructor(
-    private _elementRef: ElementRef,
     config: Config,
+    private _elementRef: ElementRef,
     private _renderer: Renderer
   ) {
-    this.config = config;
     this.mode = config.get('iconMode');
-  }
 
-  /**
-   * @private
-   */
-  addClass(className) {
-    this._renderer.setElementClass(this._elementRef, className, true);
+    if (_elementRef.nativeElement.tagName === 'ICON') {
+      // deprecated warning
+      console.warn('<icon> has been renamed to <ion-icon>');
+      console.warn('<ion-icon> requires the "name" attribute w/ a value');
+      console.warn('<ion-icon name="home"></ion-icon> should now be <ion-icon name="home"></ion-icon>');
+    }
   }
 
   /**
    * @private
    */
   ngOnInit() {
-    let ele = this._elementRef.nativeElement;
-
     if (this.mode == 'ios' && this.ios) {
       this.name = this.ios;
 
     } else if (this.mode == 'md' && this.md) {
       this.name = this.md;
-
-    } else if (!this.name) {
-      // looping through native dom attributes, eww
-      // https://github.com/angular/angular/issues/1818
-      for (let i = 0, l = ele.attributes.length; i < l; i++) {
-        if (ele.attributes[i].value === '' && /_|item-|isActive|large|small|class/.test(ele.attributes[i].name) !== true) {
-          this.name = ele.attributes[i].name;
-          break;
-        }
-      }
     }
 
     if (!this.name) return;
@@ -89,6 +78,13 @@ export class Icon {
     this.update();
   }
 
+  /**
+   * @private
+   */
+  addClass(className) {
+    this._renderer.setElementClass(this._elementRef, className, true);
+  }
+
   get isActive() {
     return (this._isActive === undefined || this._isActive === true || this._isActive === 'true');
   }
diff --git a/ionic/components/icon/test/basic/main.html b/ionic/components/icon/test/basic/main.html
index 370c8cf947..e21ec144d0 100644
--- a/ionic/components/icon/test/basic/main.html
+++ b/ionic/components/icon/test/basic/main.html
@@ -8,72 +8,51 @@
   <ion-list>
 
     <ion-item>
-      <icon home item-left></icon>
+      <ion-icon name="home" item-left></ion-icon>
       <code>
-        &lt;icon home>&lt;/icon>
+        &lt;ion-icon name="home">&lt;/ion-icon>
       </code>
     </ion-item>
 
     <ion-item>
-      <icon home isActive="true" item-left></icon>
+      <ion-icon [name]="homeIcon" item-left></ion-icon>
       <code>
-        &lt;icon home isActive="true">&lt;/icon>
+        &lt;ion-icon [name]="homeIcon">&lt;/ion-icon>
       </code>
     </ion-item>
 
     <ion-item>
-      <icon home isActive="false" item-left></icon>
+      <ion-icon name="ion-social-twitter" item-left></ion-icon>
       <code>
-        &lt;icon home isActive="false">&lt;/icon>
+        &lt;ion-icon name="ion-social-twitter">&lt;/ion-icon>
       </code>
     </ion-item>
 
     <ion-item>
-      <icon name="home" item-left></icon>
+      <ion-icon ios="ion-social-apple" md="ion-social-android" item-left></ion-icon>
       <code>
-        &lt;icon name="home">&lt;/icon>
+        &lt;ion-icon ios="ion-social-apple" md="ion-social-android">&lt;/ion-icon>
       </code>
     </ion-item>
 
     <ion-item>
-      <icon [name]="homeIcon" item-left></icon>
+      <ion-icon [isActive]="isActive" ios="ion-social-apple" md="ion-social-android" item-left></ion-icon>
       <code>
-        &lt;icon [name]="homeIcon">&lt;/icon>
+        &lt;ion-icon [isActive]="isActive" ios="ion-social-apple" md="ion-social-android">&lt;/ion-icon>
       </code>
     </ion-item>
 
     <ion-item>
-      <icon ion-social-twitter item-left></icon>
+      <ion-icon ios="ion-social-apple" item-left></ion-icon>
       <code>
-        &lt;icon ion-social-twitter>&lt;/icon>
+        &lt;ion-icon ios="ion-social-apple">&lt;/ion-icon>
       </code>
     </ion-item>
 
     <ion-item>
-      <icon ios="ion-social-apple" md="ion-social-android" item-left></icon>
+      <ion-icon md="ion-social-android" item-left></ion-icon>
       <code>
-        &lt;icon ios="ion-social-apple" md="ion-social-android">&lt;/icon>
-      </code>
-    </ion-item>
-
-    <ion-item>
-      <icon [isActive]="isActive" ios="ion-social-apple" md="ion-social-android" item-left></icon>
-      <code>
-        &lt;icon [isActive]="isActive" ios="ion-social-apple" md="ion-social-android">&lt;/icon>
-      </code>
-    </ion-item>
-
-    <ion-item>
-      <icon ios="ion-social-apple" item-left></icon>
-      <code>
-        &lt;icon ios="ion-social-apple">&lt;/icon>
-      </code>
-    </ion-item>
-
-    <ion-item>
-      <icon md="ion-social-android" item-left></icon>
-      <code>
-        &lt;icon md="ion-social-android">&lt;/icon>
+        &lt;ion-icon md="ion-social-android">&lt;/ion-icon>
       </code>
     </ion-item>
 
diff --git a/ionic/components/item/item-media.scss b/ionic/components/item/item-media.scss
index ab77a2100d..c8752c82b3 100644
--- a/ionic/components/item/item-media.scss
+++ b/ionic/components/item/item-media.scss
@@ -4,19 +4,19 @@
 // --------------------------------------------------
 // Icons, avatars, thumbnails, notes, etc.
 
-.item > icon[small]:first-child,
-.item-inner > icon[small]:first-child {
+.item > ion-icon[small]:first-child,
+.item-inner > ion-icon[small]:first-child {
   min-width: 18px;
 }
 
-.item > icon:first-child,
-.item-inner > icon:first-child {
+.item > ion-icon:first-child,
+.item-inner > ion-icon:first-child {
   min-width: 24px;
   text-align: center;
 }
 
-.item > icon,
-.item-inner > icon {
+.item > ion-icon,
+.item-inner > ion-icon {
   line-height: 1;
   font-size: 2.4rem;
   min-height: 2.4rem;
@@ -28,7 +28,7 @@
 
   &[small] {
     font-size: 1.8rem;
-    min-height: 1.8rem;     
+    min-height: 1.8rem;
   }
 }
 
diff --git a/ionic/components/item/item.ios.scss b/ionic/components/item/item.ios.scss
index 0236f52253..a40f1459c7 100644
--- a/ionic/components/item/item.ios.scss
+++ b/ionic/components/item/item.ios.scss
@@ -121,7 +121,7 @@ ion-thumbnail[item-right] {
   min-height: 25px;
 }
 
-.button-icon-only icon,
+.button-icon-only ion-icon,
 .button-icon-only {
   padding: 0 1px;
 }
diff --git a/ionic/components/item/item.md.scss b/ionic/components/item/item.md.scss
index f546fb5f63..39edbda284 100644
--- a/ionic/components/item/item.md.scss
+++ b/ionic/components/item/item.md.scss
@@ -89,8 +89,8 @@ ion-item-content {
   margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom 0;
 }
 
-icon[item-left],
-icon[item-right] {
+ion-icon[item-left],
+ion-icon[item-right] {
   margin-top: $item-md-padding-icon-top;
   margin-bottom: $item-md-padding-icon-bottom;
   margin-left: 0;
@@ -102,7 +102,7 @@ icon[item-right] {
   font-size: 1.2rem;
 }
 
-.button-icon-only icon,
+.button-icon-only ion-icon,
 .button-icon-only {
   padding: 0 1px;
 }
@@ -112,8 +112,8 @@ icon[item-right] {
   line-height: $item-md-body-text-line-height;
 }
 
-icon[item-left] + .item-inner,
-icon[item-left] + .item-input {
+ion-icon[item-left] + .item-inner,
+ion-icon[item-left] + .item-input {
   margin-left: $item-md-padding-left + ($item-md-padding-left / 2);
 }
 
diff --git a/ionic/components/item/test/buttons/main.html b/ionic/components/item/test/buttons/main.html
index 4243ccc996..4a54f239ea 100644
--- a/ionic/components/item/test/buttons/main.html
+++ b/ionic/components/item/test/buttons/main.html
@@ -26,12 +26,12 @@
 
   <ion-item>
     <button item-left (click)="testClick($event)">
-      <icon home></icon>
+      <ion-icon name="home"></ion-icon>
       Left Icon
     </button>
     left icon buttons
     <button outline item-right (click)="testClick($event)">
-      <icon star></icon>
+      <ion-icon name="star"></ion-icon>
       Left Icon
     </button>
   </ion-item>
@@ -39,36 +39,36 @@
   <ion-item>
     <button item-left (click)="testClick($event)">
       Right Icon
-      <icon home></icon>
+      <ion-icon name="home"></ion-icon>
     </button>
     right icon buttons
     <button outline item-right (click)="testClick($event)">
       Right Icon
-      <icon star></icon>
+      <ion-icon name="star"></ion-icon>
     </button>
   </ion-item>
 
   <ion-item>
     <button clear item-left (click)="testClick($event)">
-      <icon navigate></icon>
+      <ion-icon name="navigate"></ion-icon>
     </button>
     icon only buttons
     <button clear item-right (click)="testClick($event)">
-      <icon navigate></icon>
+      <ion-icon name="navigate"></ion-icon>
     </button>
   </ion-item>
 
   <ion-item>
     ion-item right icon/text button
     <button item-right (click)="testClick($event)">
-      <icon refresh></icon>
+      <ion-icon name="refresh"></ion-icon>
       Refresh
     </button>
   </ion-item>
 
   <ion-item>
     <button clear item-left (click)="testClick($event)">
-      <icon settings></icon>
+      <ion-icon name="settings"></ion-icon>
       Settings
     </button>
     ion-item left clear button
diff --git a/ionic/components/item/test/icons/main.html b/ionic/components/item/test/icons/main.html
index facaaf4b36..7eec48af15 100644
--- a/ionic/components/item/test/icons/main.html
+++ b/ionic/components/item/test/icons/main.html
@@ -1,4 +1,6 @@
-<ion-toolbar><ion-title>Item Icons</ion-title></ion-toolbar>
+<ion-toolbar>
+  <ion-title>Item Icons</ion-title>
+</ion-toolbar>
 
 <ion-content>
 
@@ -16,44 +18,44 @@
 
   <a ion-item href="#">
     a[ion-item] w/ right side default icon
-    <icon information-circle item-right></icon>
+    <ion-icon name="information-circle" item-right></ion-icon>
   </a>
 
   <a ion-item href="#">
     a[ion-item] w/ right side large icon
-    <icon large information-circle item-right></icon>
+    <ion-icon name="information-circle" large item-right></ion-icon>
   </a>
 
   <a ion-item href="#">
     a[ion-item] w/ right side small icon
-    <icon small information-circle item-right></icon>
+    <ion-icon name="information-circle" small item-right></ion-icon>
   </a>
 
   <button ion-item>
-    <icon star item-left></icon>
+    <ion-icon name="star" item-left></ion-icon>
     button[ion-item] w/ left side icon
   </button>
 
   <button ion-item detail-none>
-    <icon flag item-left></icon>
+    <ion-icon name="flag" item-left></ion-icon>
     button[ion-item][detail-none]
   </button>
 
   <ion-item>
-    <icon flag item-left></icon>
+    <ion-icon name="flag" item-left></ion-icon>
     ion-item w/ both side icons
-    <icon checkmark item-right></icon>
+    <ion-icon name="checkmark" item-right></ion-icon>
   </ion-item>
 
   <a ion-item href="#">
     a[ion-item] w/ two right side icons
-    <icon checkmark-circle item-right></icon>
-    <icon shuffle item-right></icon>
+    <ion-icon name="checkmark-circle" item-right></ion-icon>
+    <ion-icon name="shuffle" item-right></ion-icon>
   </a>
 
   <button ion-item>
-    <icon clipboard item-left></icon>
-    <icon remove-circle item-left></icon>
+    <ion-icon name="clipboard" item-left></ion-icon>
+    <ion-icon name="remove-circle" item-left></ion-icon>
     button[ion-item] w/ two left side icons
   </button>
 
diff --git a/ionic/components/item/test/images/main.html b/ionic/components/item/test/images/main.html
index 53fa230b4b..c520540a90 100644
--- a/ionic/components/item/test/images/main.html
+++ b/ionic/components/item/test/images/main.html
@@ -7,12 +7,12 @@
   </ion-item>
 
   <ion-item>
-    <icon mail item-left></icon>
+    <ion-icon name="mail" item-left></ion-icon>
     One Line w/ Icon, div only text
   </ion-item>
 
   <ion-item>
-    <icon mail item-left></icon>
+    <ion-icon name="mail" item-left></ion-icon>
     <h2>Two Lines w/ Icon, H2 Header</h2>
     <p>Paragraph text.</p>
   </ion-item>
diff --git a/ionic/components/item/test/media/main.html b/ionic/components/item/test/media/main.html
index 9ff54689b5..1ed195fa61 100644
--- a/ionic/components/item/test/media/main.html
+++ b/ionic/components/item/test/media/main.html
@@ -56,7 +56,7 @@
     <p>Icon on right</p>
     <p>Vertically align top</p>
     <p>button.item</p>
-    <icon close-circle item-right></icon>
+    <ion-icon name="close-circle" item-right></ion-icon>
   </button>
 
 </ion-content>
diff --git a/ionic/components/item/test/sliding/main.html b/ionic/components/item/test/sliding/main.html
index 5b002df90b..9240f6b270 100644
--- a/ionic/components/item/test/sliding/main.html
+++ b/ionic/components/item/test/sliding/main.html
@@ -31,7 +31,7 @@
       </ion-item>
       <ion-item-options>
         <button primary (click)="archive(item)">Archive</button>
-        <button danger (click)="del(item)"><icon trash></icon></button>
+        <button danger (click)="del(item)"><ion-icon name="trash"></ion-icon></button>
       </ion-item-options>
     </ion-item-sliding>
 
@@ -50,7 +50,7 @@
 
     <ion-item-sliding #item>
       <ion-item>
-        <icon mail item-left></icon>
+        <ion-icon name="mail" item-left></ion-icon>
         One Line w/ Icon, div only text
       </ion-item>
       <ion-item-options>
diff --git a/ionic/components/list/test/headers/main.html b/ionic/components/list/test/headers/main.html
index f34b0f1a2d..da6ad7365a 100644
--- a/ionic/components/list/test/headers/main.html
+++ b/ionic/components/list/test/headers/main.html
@@ -9,12 +9,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
@@ -22,7 +22,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
@@ -39,12 +39,12 @@
     </ion-list-header>
 
     <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
@@ -61,7 +61,7 @@
     </ion-list-header>
 
     <ion-item>
-      <icon pizza item-left></icon>
+      <ion-icon name="pizza" item-left></ion-icon>
       Pizza
       <ion-note item-right>
         Always
@@ -69,7 +69,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
@@ -77,7 +77,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
@@ -90,12 +90,12 @@
   <ion-list>
 
     <ion-item>
-      <icon chatboxes item-left></icon>
+      <ion-icon name="chatboxes" item-left></ion-icon>
       New List, no header, Item 1
     </ion-item>
 
     <ion-item>
-      <icon chatboxes item-left></icon>
+      <ion-icon name="chatboxes" item-left></ion-icon>
       New List, no header, Item 2
     </ion-item>
 
diff --git a/ionic/components/list/test/inset/main.html b/ionic/components/list/test/inset/main.html
index 5a22689aff..d05096a5f0 100644
--- a/ionic/components/list/test/inset/main.html
+++ b/ionic/components/list/test/inset/main.html
@@ -11,12 +11,12 @@
     </ion-list-header>
 
     <a ion-item href="#">
-      <icon alarm item-left></icon>
+      <ion-icon name="alarm" item-left></ion-icon>
       List Link Item 1
     </a>
 
     <a ion-item href="#">
-      <icon analytics item-left></icon>
+      <ion-icon name="analytics" item-left></ion-icon>
       List Link Item 2
     </a>
 
@@ -29,12 +29,12 @@
     </ion-checkbox>
 
     <button ion-item>
-      <icon boat item-left></icon>
+      <ion-icon name="boat" item-left></ion-icon>
       List Button Item 1
     </button>
 
     <button ion-item>
-      <icon book item-left></icon>
+      <ion-icon name="book" item-left></ion-icon>
       List Button Item 2
     </button>
 
diff --git a/ionic/components/list/test/no-lines/main.html b/ionic/components/list/test/no-lines/main.html
index 47df913df1..5c61fb3111 100644
--- a/ionic/components/list/test/no-lines/main.html
+++ b/ionic/components/list/test/no-lines/main.html
@@ -7,12 +7,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
@@ -20,7 +20,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
@@ -34,7 +34,7 @@
     </ion-list-header>
 
     <ion-item no-lines>
-      <icon pizza item-left></icon>
+      <ion-icon name="pizza" item-left></ion-icon>
       Pizza
       <ion-note item-right>
         Always
@@ -42,7 +42,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
@@ -50,7 +50,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
@@ -64,7 +64,7 @@
     </ion-list-header>
 
     <ion-item>
-      <icon pizza item-left></icon>
+      <ion-icon name="pizza" item-left></ion-icon>
       Pizza
       <ion-note item-right>
         Always
@@ -72,7 +72,7 @@
     </ion-item>
 
     <ion-item no-lines>
-      <icon beer item-left></icon>
+      <ion-icon name="beer" item-left></ion-icon>
       Beer
       <ion-note item-right>
         Yes Plz
@@ -80,7 +80,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
@@ -94,7 +94,7 @@
     </ion-list-header>
 
     <ion-item>
-      <icon pizza item-left></icon>
+      <ion-icon name="pizza" item-left></ion-icon>
       Pizza
       <ion-note item-right>
         Always
@@ -102,7 +102,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
@@ -110,7 +110,7 @@
     </ion-item>
 
     <ion-item no-lines>
-      <icon wine item-left></icon>
+      <ion-icon name="wine" item-left></ion-icon>
       Wine
       <ion-note item-right>
         All the time
diff --git a/ionic/components/list/test/repeat-headers/main.html b/ionic/components/list/test/repeat-headers/main.html
index 73fc2a7842..881693e249 100644
--- a/ionic/components/list/test/repeat-headers/main.html
+++ b/ionic/components/list/test/repeat-headers/main.html
@@ -9,7 +9,7 @@
     <ion-item *ngFor="#component of person.components">
       {{component}}
       <div item-right>
-        <icon pin></icon>
+        <ion-icon name="pin"></ion-icon>
       </div>
     </ion-item>
   </ion-list>
diff --git a/ionic/components/menu/test/basic/page1.html b/ionic/components/menu/test/basic/page1.html
index ab07ea9b11..a4d51fd547 100644
--- a/ionic/components/menu/test/basic/page1.html
+++ b/ionic/components/menu/test/basic/page1.html
@@ -2,7 +2,7 @@
 <ion-navbar *navbar>
 
   <button menuToggle="leftMenu">
-    <icon menu></icon>
+    <ion-icon name="menu"></ion-icon>
   </button>
 
   <ion-title>
@@ -11,18 +11,18 @@
 
   <ion-buttons end>
     <button>
-      <icon football></icon>
+      <ion-icon name="football"></ion-icon>
     </button>
   </ion-buttons>
 
   <ion-buttons start>
     <button>
-      <icon baseball></icon>
+      <ion-icon name="baseball"></ion-icon>
     </button>
   </ion-buttons>
 
   <button menuToggle="rightMenu" right secondary>
-    <icon menu></icon>
+    <ion-icon name="menu"></ion-icon>
   </button>
 
 </ion-navbar>
diff --git a/ionic/components/menu/test/basic/page2.html b/ionic/components/menu/test/basic/page2.html
index 95d2059180..542adc9b2f 100644
--- a/ionic/components/menu/test/basic/page2.html
+++ b/ionic/components/menu/test/basic/page2.html
@@ -2,7 +2,7 @@
 <ion-navbar *navbar>
 
   <button menuToggle="leftMenu">
-    <icon menu></icon>
+    <ion-icon name="menu"></ion-icon>
   </button>
 
   <ion-title>
diff --git a/ionic/components/menu/test/basic/page3.html b/ionic/components/menu/test/basic/page3.html
index d243f7b761..519d0cfc93 100644
--- a/ionic/components/menu/test/basic/page3.html
+++ b/ionic/components/menu/test/basic/page3.html
@@ -6,7 +6,7 @@
   </ion-title>
 
   <button menuToggle="rightMenu" right>
-    <icon menu></icon>
+    <ion-icon name="menu"></ion-icon>
   </button>
 
 </ion-navbar>
diff --git a/ionic/components/menu/test/multiple/page1.html b/ionic/components/menu/test/multiple/page1.html
index c81521a0af..b808df44ab 100644
--- a/ionic/components/menu/test/multiple/page1.html
+++ b/ionic/components/menu/test/multiple/page1.html
@@ -1,7 +1,7 @@
 
 <ion-navbar *navbar>
   <button [menuToggle]="activeMenu">
-    <icon menu></icon>
+    <ion-icon name="menu"></ion-icon>
   </button>
   <ion-title>
     Multiple Menus
diff --git a/ionic/components/menu/test/overlay/page1.html b/ionic/components/menu/test/overlay/page1.html
index e2970ea621..727f99b717 100644
--- a/ionic/components/menu/test/overlay/page1.html
+++ b/ionic/components/menu/test/overlay/page1.html
@@ -2,7 +2,7 @@
 <ion-navbar *navbar>
 
   <button menuToggle="leftMenu">
-    <icon menu></icon>
+    <ion-icon name="menu"></ion-icon>
   </button>
 
   <ion-title>
diff --git a/ionic/components/menu/test/push/page1.html b/ionic/components/menu/test/push/page1.html
index 7ffd124cb4..11883cb781 100644
--- a/ionic/components/menu/test/push/page1.html
+++ b/ionic/components/menu/test/push/page1.html
@@ -2,7 +2,7 @@
 <ion-navbar *navbar>
 
   <button menuToggle="leftMenu">
-    <icon menu></icon>
+    <ion-icon name="menu"></ion-icon>
   </button>
 
   <ion-title>
diff --git a/ionic/components/menu/test/reveal/page1.html b/ionic/components/menu/test/reveal/page1.html
index 547a5035ca..a014cad793 100644
--- a/ionic/components/menu/test/reveal/page1.html
+++ b/ionic/components/menu/test/reveal/page1.html
@@ -2,7 +2,7 @@
 <ion-navbar *navbar>
 
   <button menuToggle="leftMenu">
-    <icon menu></icon>
+    <ion-icon name="menu"></ion-icon>
   </button>
 
   <ion-title>
diff --git a/ionic/components/nav/test/basic/index.ts b/ionic/components/nav/test/basic/index.ts
index 16410a095a..21534ef3ad 100644
--- a/ionic/components/nav/test/basic/index.ts
+++ b/ionic/components/nav/test/basic/index.ts
@@ -6,7 +6,7 @@ import {NavParams, NavController, ViewController, IONIC_DIRECTIVES} from 'ionic/
 
 @Component({
   selector: 'my-cmp',
-  template: `<p>My Custom Component Test <icon star></icon></p>`,
+  template: `<p>My Custom Component Test <ion-icon name="star"></ion-icon></p>`,
   directives: [IONIC_DIRECTIVES]
 })
 class MyCmpTest{}
@@ -17,7 +17,7 @@ class MyCmpTest{}
     <ion-navbar *navbar>
       <ion-title>{{title}}</ion-title>
       <ion-buttons start>
-        <button><icon star></icon></button>
+        <button><ion-icon name="star"></ion-icon></button>
       </ion-buttons>
       <ion-buttons end>
         <button>S1</button>
diff --git a/ionic/components/nav/test/nested/index.ts b/ionic/components/nav/test/nested/index.ts
index 2a0fdc885e..64db097b61 100644
--- a/ionic/components/nav/test/nested/index.ts
+++ b/ionic/components/nav/test/nested/index.ts
@@ -76,7 +76,7 @@ export class Account {
   template: `
     <ion-navbar *navbar primary>
       <button menuToggle>
-        <icon menu></icon>
+        <ion-icon name="menu"></ion-icon>
       </button>
       <ion-title>Account Dashboard</ion-title>
     </ion-navbar>
@@ -107,7 +107,7 @@ export class Dashboard {
   template: `
     <ion-navbar *navbar danger>
       <button menuToggle>
-        <icon menu></icon>
+        <ion-icon name="menu"></ion-icon>
       </button>
       <ion-title>Account Profile</ion-title>
     </ion-navbar>
diff --git a/ionic/components/nav/test/routing/view1.html b/ionic/components/nav/test/routing/view1.html
index f6f36fec09..c1e93d4493 100644
--- a/ionic/components/nav/test/routing/view1.html
+++ b/ionic/components/nav/test/routing/view1.html
@@ -1,7 +1,7 @@
 
 <ion-navbar *navbar>
   <button menuToggle>
-    <icon menu></icon>
+    <ion-icon name="menu"></ion-icon>
   </button>
   <ion-title>First View</ion-title>
 </ion-navbar>
diff --git a/ionic/components/nav/test/routing/view2.html b/ionic/components/nav/test/routing/view2.html
index 3ee8d3f3df..32406a1ee5 100644
--- a/ionic/components/nav/test/routing/view2.html
+++ b/ionic/components/nav/test/routing/view2.html
@@ -3,7 +3,7 @@
   <ion-title>Second View</ion-title>
   <ion-buttons end>
     <button>
-      <icon help></icon>
+      <ion-icon name="help"></ion-icon>
     </button>
   </ion-buttons>
 </ion-navbar>
diff --git a/ionic/components/navbar/navbar.ts b/ionic/components/navbar/navbar.ts
index 824236bad6..2cf5ab4d6e 100644
--- a/ionic/components/navbar/navbar.ts
+++ b/ionic/components/navbar/navbar.ts
@@ -94,7 +94,7 @@ class ToolbarBackground {
   template:
     '<div class="toolbar-background"></div>' +
     '<button class="back-button bar-button bar-button-default" [hidden]="hideBackButton">' +
-      '<icon class="back-button-icon" [name]="bbIcon"></icon>' +
+      '<ion-icon class="back-button-icon" [name]="bbIcon"></ion-icon>' +
       '<span class="back-button-text">' +
         '<span class="back-default">{{bbText}}</span>' +
       '</span>' +
diff --git a/ionic/components/radio/test/basic/main.html b/ionic/components/radio/test/basic/main.html
index f727972ee6..66f7b69ea4 100644
--- a/ionic/components/radio/test/basic/main.html
+++ b/ionic/components/radio/test/basic/main.html
@@ -32,7 +32,7 @@
 
   </form>
 
-  <div aria-hidden="true" class="align-center">
+  <div aria-hidden="true" text-center>
     <button (click)="setApple()" outline small>Select Apple</button>
     <button (click)="setBanana()" outline small>Select Banana</button>
     <button class="e2eCherry" (click)="setCherry()" outline small>Select Cherry</button>
diff --git a/ionic/components/searchbar/searchbar.ts b/ionic/components/searchbar/searchbar.ts
index 158296669d..1eb8f8dd3f 100644
--- a/ionic/components/searchbar/searchbar.ts
+++ b/ionic/components/searchbar/searchbar.ts
@@ -62,7 +62,7 @@ export class SearchbarInput {
   template:
     '<div class="searchbar-input-container">' +
       '<button (click)="cancelSearchbar()" (mousedown)="cancelSearchbar()" clear dark class="searchbar-md-cancel">' +
-        '<icon arrow-back></icon>' +
+        '<ion-icon name="arrow-back"></ion-icon>' +
       '</button>' +
       '<div class="searchbar-search-icon"></div>' +
       '<input [value]="value" (keyup)="inputChanged($event)" (blur)="inputBlurred()" (focus)="inputFocused()" class="searchbar-input" type="search" [attr.placeholder]="placeholder">' +
diff --git a/ionic/components/segment/test/basic/main.html b/ionic/components/segment/test/basic/main.html
index 2a43dff194..8ccdca9188 100644
--- a/ionic/components/segment/test/basic/main.html
+++ b/ionic/components/segment/test/basic/main.html
@@ -12,7 +12,7 @@
 <ion-toolbar>
   <ion-buttons end>
     <button>
-      <icon search></icon>
+      <ion-icon name="search"></ion-icon>
     </button>
   </ion-buttons>
   <ion-segment secondary>
diff --git a/ionic/components/segment/test/nav/index.ts b/ionic/components/segment/test/nav/index.ts
index e74ded5595..7bdae186f2 100644
--- a/ionic/components/segment/test/nav/index.ts
+++ b/ionic/components/segment/test/nav/index.ts
@@ -20,7 +20,7 @@ class SegmentPage {
   template: `
     <ion-navbar *navbar hideBackButton>
       <button menuToggle>
-        <icon menu></icon>
+        <ion-icon name="menu"></ion-icon>
       </button>
       <ion-title>
         Second Page
diff --git a/ionic/components/tabs/tabs.ios.scss b/ionic/components/tabs/tabs.ios.scss
index 14e0a6233c..8ca9c39771 100644
--- a/ionic/components/tabs/tabs.ios.scss
+++ b/ionic/components/tabs/tabs.ios.scss
@@ -70,7 +70,7 @@ ion-tabs[tabbarPlacement=top] tabbar {
     margin-bottom: 0;
   }
 
-  icon {
+  ion-icon {
     min-width: 24px;
     height: 26px;
     font-size: 24px;
diff --git a/ionic/components/tabs/tabs.md.scss b/ionic/components/tabs/tabs.md.scss
index 0e2aeac82e..48b835d656 100644
--- a/ionic/components/tabs/tabs.md.scss
+++ b/ionic/components/tabs/tabs.md.scss
@@ -58,7 +58,7 @@ tabbar {
 [tabbarIcons=left] .tab-button {
   padding-bottom: 10px;
 
-  icon {
+  ion-icon {
     min-width: 24px;
   }
 }
diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts
index ba1eabe21b..a24c2f879e 100644
--- a/ionic/components/tabs/tabs.ts
+++ b/ionic/components/tabs/tabs.ts
@@ -49,7 +49,7 @@ import {rafFrames} from '../../util/dom';
     '<ion-tabbar-section>' +
       '<tabbar role="tablist">' +
         '<a *ngFor="#t of _tabs" [tab]="t" class="tab-button" role="tab">' +
-          '<icon [name]="t.tabIcon" [isActive]="t.isSelected" class="tab-button-icon"></icon>' +
+          '<ion-icon [name]="t.tabIcon" [isActive]="t.isSelected" class="tab-button-icon"></ion-icon>' +
           '<span class="tab-button-text">{{t.tabTitle}}</span>' +
         '</a>' +
         '<tab-highlight></tab-highlight>' +
diff --git a/ionic/components/tabs/test/basic/index.ts b/ionic/components/tabs/test/basic/index.ts
index f44c44e8ba..d1357ef7ca 100644
--- a/ionic/components/tabs/test/basic/index.ts
+++ b/ionic/components/tabs/test/basic/index.ts
@@ -72,7 +72,7 @@ class Tab2 {
   template: `
     <ion-navbar *navbar>
       <button menuToggle>
-        <icon menu></icon>
+        <ion-icon name="menu"></ion-icon>
       </button>
       <ion-title>Stopwatch</ion-title>
     </ion-navbar>
diff --git a/ionic/components/tabs/test/ghost/index.ts b/ionic/components/tabs/test/ghost/index.ts
index d71b3cf5db..dabcba3148 100644
--- a/ionic/components/tabs/test/ghost/index.ts
+++ b/ionic/components/tabs/test/ghost/index.ts
@@ -47,7 +47,7 @@ class Tab2 {
   template: `
     <ion-navbar *navbar>
       <button menuToggle>
-        <icon menu></icon>
+        <ion-icon name="menu"></ion-icon>
       </button>
       <ion-title>Stopwatch</ion-title>
     </ion-navbar>
@@ -69,7 +69,7 @@ class Tab3 {
   template: `
     <ion-navbar *navbar>
       <button menuToggle>
-        <icon menu></icon>
+        <ion-icon name="menu"></ion-icon>
       </button>
       <ion-title>Quesarito</ion-title>
     </ion-navbar>
diff --git a/ionic/components/text-input/test/fixed-inline-labels/main.html b/ionic/components/text-input/test/fixed-inline-labels/main.html
index 5214021011..2171e4e359 100644
--- a/ionic/components/text-input/test/fixed-inline-labels/main.html
+++ b/ionic/components/text-input/test/fixed-inline-labels/main.html
@@ -20,7 +20,7 @@
       <ion-label>From</ion-label>
       <input value="Text 3" type="text">
       <button clear item-right>
-        <icon power></icon>
+        <ion-icon name="power"></ion-icon>
       </button>
     </ion-input>
 
@@ -30,25 +30,25 @@
     </ion-input>
 
     <ion-input fixed-label>
-      <icon globe item-left></icon>
+      <ion-icon name="globe" item-left></ion-icon>
       <ion-label>Website</ion-label>
       <input value="http://ionic.io/" type="url">
     </ion-input>
 
     <ion-input fixed-label>
-      <icon mail item-left></icon>
+      <ion-icon name="mail" item-left></ion-icon>
       <ion-label>Email</ion-label>
       <input value="email6@email.com" type="email">
     </ion-input>
 
     <ion-input fixed-label>
-      <icon call item-left></icon>
+      <ion-icon name="call" item-left></ion-icon>
       <ion-label>Phone</ion-label>
       <input value="867-5309" type="tel">
     </ion-input>
 
     <ion-input fixed-label>
-      <icon contact item-left></icon>
+      <ion-icon name="contact" item-left></ion-icon>
       <input placeholder="Placeholder Text" type="text">
     </ion-input>
 
@@ -69,7 +69,7 @@
     </ion-input>
 
     <ion-input fixed-label>
-      <icon create item-left></icon>
+      <ion-icon name="create" item-left></ion-icon>
       <ion-label>Message</ion-label>
       <textarea>To infinity and beyond</textarea>
     </ion-input>
diff --git a/ionic/components/text-input/test/inline-labels/main.html b/ionic/components/text-input/test/inline-labels/main.html
index 38668016bb..4079e5bbf3 100644
--- a/ionic/components/text-input/test/inline-labels/main.html
+++ b/ionic/components/text-input/test/inline-labels/main.html
@@ -22,7 +22,7 @@
         <ion-label>From:</ion-label>
         <input value="Text 3" type="text">
         <button clear item-right>
-          <icon power></icon>
+          <ion-icon name="power"></ion-icon>
         </button>
       </ion-input>
 
@@ -32,19 +32,19 @@
       </ion-input>
 
       <ion-input>
-        <icon globe item-left></icon>
+        <ion-icon name="globe" item-left></ion-icon>
         <ion-label>Website:</ion-label>
         <input value="http://ionic.io/" type="url">
       </ion-input>
 
       <ion-input>
-        <icon mail item-left></icon>
+        <ion-icon name="mail" item-left></ion-icon>
         <ion-label>Email:</ion-label>
         <input value="email6@email.com" type="email">
       </ion-input>
 
       <ion-input>
-        <icon create item-left></icon>
+        <ion-icon name="create" item-left></ion-icon>
         <ion-label>Feedback:</ion-label>
         <textarea placeholder="Placeholder Text"></textarea>
       </ion-input>
@@ -52,7 +52,7 @@
       <ion-input>
         <ion-label>More Info:</ion-label>
         <input placeholder="Placeholder Text" type="text">
-        <icon flag item-right></icon>
+        <ion-icon name="flag" item-right></ion-icon>
       </ion-input>
 
       <ion-input>
diff --git a/ionic/components/text-input/test/input-focus/main.html b/ionic/components/text-input/test/input-focus/main.html
index dc4ec0c07b..cc22868d22 100644
--- a/ionic/components/text-input/test/input-focus/main.html
+++ b/ionic/components/text-input/test/input-focus/main.html
@@ -38,7 +38,7 @@
       <ion-label>Text 3:</ion-label>
       <input type="text">
       <button clear item-right>
-        <icon power></icon>
+        <ion-icon name="power"></ion-icon>
       </button>
     </ion-input>
 
@@ -48,19 +48,19 @@
     </ion-input>
 
     <ion-input>
-      <icon globe item-left></icon>
+      <ion-icon name="globe" item-left></ion-icon>
       <ion-label>Website:</ion-label>
       <input value="http://ionic.io/" type="url">
     </ion-input>
 
     <ion-input>
-      <icon mail item-left></icon>
+      <ion-icon name="mail" item-left></ion-icon>
       <ion-label>Email:</ion-label>
       <input value="email6@email.com" type="email">
     </ion-input>
 
     <ion-input>
-      <icon create item-left></icon>
+      <ion-icon name="create" item-left></ion-icon>
       <ion-label>Feedback:</ion-label>
       <textarea placeholder="Placeholder Text"></textarea>
     </ion-input>
@@ -72,7 +72,7 @@
     <ion-input>
       <ion-label>More Info:</ion-label>
       <input placeholder="Placeholder Text" type="text">
-      <icon flag item-right></icon>
+      <ion-icon name="flag" item-right></ion-icon>
     </ion-input>
 
     <ion-checkbox>
diff --git a/ionic/components/text-input/test/inset-inputs/main.html b/ionic/components/text-input/test/inset-inputs/main.html
index 4b8476c78b..49e8deb153 100644
--- a/ionic/components/text-input/test/inset-inputs/main.html
+++ b/ionic/components/text-input/test/inset-inputs/main.html
@@ -1,5 +1,7 @@
 
-<ion-toolbar><ion-title>Inset Inputs</ion-title></ion-toolbar>
+<ion-toolbar>
+  <ion-title>Inset Inputs</ion-title>
+</ion-toolbar>
 
 
 <ion-content class="outer-content">
@@ -8,17 +10,17 @@
   <ion-list inset>
 
     <ion-input>
-      <icon search item-left></icon>
+      <ion-icon name="search" item-left></ion-icon>
       <input value="Input inside an inset list" type="text">
     </ion-input>
 
     <ion-input>
-      <icon call item-left></icon>
+      <ion-icon name="call" item-left></ion-icon>
       <input type="tel">
     </ion-input>
 
     <ion-input>
-      <icon mail item-left></icon>
+      <ion-icon name="mail" item-left></ion-icon>
       <input placeholder="Placeholder text" type="text">
     </ion-input>
 
@@ -28,13 +30,13 @@
   <ion-list inset>
 
     <ion-input inset>
-      <icon search item-left></icon>
+      <ion-icon name="search" item-left></ion-icon>
       <input value="Inset input inside an inset list" type="text">
     </ion-input>
 
     <ion-input inset>
       <input value="Inset input inside an inset list" type="text">
-      <icon mic item-right></icon>
+      <ion-icon name="mic" item-right></ion-icon>
     </ion-input>
 
   </ion-list>
@@ -43,7 +45,7 @@
   <ion-list>
 
     <ion-input inset>
-      <icon search item-left></icon>
+      <ion-icon name="search" item-left></ion-icon>
       <input value="Inset input inside a list" type="text">
       <button outline item-right>Search</button>
     </ion-input>
@@ -54,13 +56,13 @@
   <ion-card>
 
     <ion-input>
-      <icon search item-left></icon>
+      <ion-icon name="search" item-left></ion-icon>
       <input value="Input inside a card" type="text">
     </ion-input>
 
     <ion-input>
       <input value="Input inside a card" type="text">
-      <icon mic item-right></icon>
+      <ion-icon name="mic" item-right></ion-icon>
     </ion-input>
 
   </ion-card>
diff --git a/ionic/components/text-input/test/placeholder-labels/main.html b/ionic/components/text-input/test/placeholder-labels/main.html
index dfdcfd6b26..f2b63d61bc 100644
--- a/ionic/components/text-input/test/placeholder-labels/main.html
+++ b/ionic/components/text-input/test/placeholder-labels/main.html
@@ -15,12 +15,12 @@
     </ion-input>
 
     <ion-input>
-      <icon call item-left></icon>
+      <ion-icon name="call" item-left></ion-icon>
       <input placeholder="Text Input Placeholder" type="text">
     </ion-input>
 
     <ion-input>
-      <icon call item-left></icon>
+      <ion-icon name="call" item-left></ion-icon>
       <input placeholder="Text Input Placeholder" value="Text Input Value" type="text">
     </ion-input>
 
@@ -45,12 +45,12 @@
     </ion-input>
 
     <ion-input>
-      <icon call item-left></icon>
+      <ion-icon name="call" item-left></ion-icon>
       <input placeholder="Inset List: Text Input Placeholder" type="text">
     </ion-input>
 
     <ion-input>
-      <icon call item-left></icon>
+      <ion-icon name="call" item-left></ion-icon>
       <input placeholder="Inset List: Text Input Placeholder" value="Inset List: Text Input Value" type="text">
     </ion-input>
 
diff --git a/ionic/components/text-input/text-input.ts b/ionic/components/text-input/text-input.ts
index a930c66402..440dad39ee 100644
--- a/ionic/components/text-input/text-input.ts
+++ b/ionic/components/text-input/text-input.ts
@@ -1,4 +1,4 @@
-import {Component, Directive, Attribute, forwardRef, Host, Optional, ElementRef, Renderer, Input, Output, EventEmitter, ContentChild, HostListener} from 'angular2/core';
+import {Component, Directive, Attribute, forwardRef, Host, Optional, ElementRef, Renderer, Input, Output, EventEmitter, ContentChild, ContentChildren, HostListener} from 'angular2/core';
 import {NgIf} from 'angular2/common';
 
 import {NavController} from '../nav/nav-controller';
@@ -10,6 +10,7 @@ import {Content} from '../content/content';
 import {CSS, hasFocus, pointerCoord, hasPointerMoved}  from '../../util/dom';
 import {Platform} from '../../platform/platform';
 import {Button} from '../button/button';
+import {Icon} from '../icon/icon';
 
 
 /**
@@ -263,6 +264,28 @@ export class TextInput {
     this.label = label;
   }
 
+  /**
+   * @private
+   */
+  @ContentChildren(Button)
+  set _buttons(buttons) {
+    buttons.toArray().forEach(button => {
+      if (!button.isItem) {
+        button.addClass('item-button');
+      }
+    });
+  }
+
+  /**
+   * @private
+   */
+  @ContentChildren(Icon)
+  set _icons(icons) {
+    icons.toArray().forEach(icon => {
+      icon.addClass('item-icon');
+    });
+  }
+
   /**
    * @private
    * On Initialization check for attributes
diff --git a/ionic/components/toggle/test/basic/main.html b/ionic/components/toggle/test/basic/main.html
index 569215b24e..65b48fe0e3 100644
--- a/ionic/components/toggle/test/basic/main.html
+++ b/ionic/components/toggle/test/basic/main.html
@@ -36,7 +36,7 @@
 
   </form>
 
-  <p aria-hidden="true" class="align-center">
+  <p aria-hidden="true" text-center>
     <button (click)="toggleGrapeChecked()" outline small class="e2eGrapeChecked">Grape Checked</button>
     <button (click)="toggleGrapeDisabled()" outline small class="e2eGrapeDisabled">Grape Disabled</button>
     <button (click)="doSubmit($event)" outline small class="e2eSubmit">Submit</button>
diff --git a/ionic/components/toolbar/test/colors/main.html b/ionic/components/toolbar/test/colors/main.html
index 9db7fcfb1d..13b57159ae 100644
--- a/ionic/components/toolbar/test/colors/main.html
+++ b/ionic/components/toolbar/test/colors/main.html
@@ -7,15 +7,15 @@
 <ion-toolbar primary>
   <ion-buttons start>
     <button>
-      <icon ios=contact></icon>
+      <ion-icon ios="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>Primary</ion-title>
@@ -25,15 +25,15 @@
 <ion-toolbar primary>
   <ion-buttons start>
     <button class="activated">
-      <icon ios="contact"></icon>
+      <ion-icon ios="contact"></ion-icon>
     </button>
     <button class="activated">
-      <icon search></icon>
+      <ion-icon name="search"></ion-icon>
     </button>
   </ion-buttons>
   <ion-buttons end>
     <button secondary class="activated">
-      <icon more></icon>
+      <ion-icon name="more"></ion-icon>
     </button>
   </ion-buttons>
   <ion-title>Primary.activated</ion-title>
@@ -43,10 +43,10 @@
 <ion-toolbar secondary>
   <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>
@@ -54,7 +54,7 @@
   <ion-buttons end>
     <button solid danger>
       Help
-      <icon help-circle></icon>
+      <ion-icon name="help-circle"></ion-icon>
     </button>
   </ion-buttons>
 </ion-toolbar>
@@ -63,10 +63,10 @@
 <ion-toolbar secondary>
   <ion-buttons start>
     <button solid class="activated">
-      <icon contact></icon>
+      <ion-icon name="contact"></ion-icon>
     </button>
     <button solid class="activated">
-      <icon contact></icon>
+      <ion-icon name="contact"></ion-icon>
       Solid
     </button>
   </ion-buttons>
@@ -74,7 +74,7 @@
   <ion-buttons end>
     <button solid danger class="activated">
       Help
-      <icon help-circle></icon>
+      <ion-icon name="help-circle"></ion-icon>
     </button>
   </ion-buttons>
 </ion-toolbar>
@@ -83,16 +83,16 @@
 <ion-toolbar dark>
   <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>Dark</ion-title>
@@ -102,16 +102,16 @@
 <ion-toolbar dark>
   <ion-buttons start>
     <button outline class="activated">
-      <icon contact></icon>
+      <ion-icon name="contact"></ion-icon>
     </button>
     <button outline class="activated">
-      <icon star></icon>
+      <ion-icon name="star"></ion-icon>
       Star
     </button>
   </ion-buttons>
   <ion-buttons end>
     <button secondary outline class="activated">
-      <icon contact></icon>
+      <ion-icon name="contact"></ion-icon>
     </button>
   </ion-buttons>
   <ion-title>Dark.activated</ion-title>
@@ -121,14 +121,14 @@
 <ion-toolbar danger>
   <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>Danger</ion-title>
@@ -137,11 +137,11 @@
 
 <ion-toolbar danger>
   <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>Danger</ion-title>
@@ -151,12 +151,12 @@
 <ion-toolbar transparent>
   <ion-buttons end>
     <button #button1 (click)="buttonClick(button1)">
-      <icon star></icon>
+      <ion-icon name="star"></ion-icon>
     </button>
   </ion-buttons>
   <ion-title>Transparent</ion-title>
   <button menuToggle right>
-    <icon menu></icon>
+    <ion-icon name="menu"></ion-icon>
   </button>
 </ion-toolbar>
 
diff --git a/ionic/components/toolbar/test/scenarios/main.html b/ionic/components/toolbar/test/scenarios/main.html
index f4d9aff040..b7539d630a 100644
--- a/ionic/components/toolbar/test/scenarios/main.html
+++ b/ionic/components/toolbar/test/scenarios/main.html
@@ -7,15 +7,15 @@
 <ion-toolbar>
   <ion-buttons start>
     <button>
-      <icon ios=contact></icon>
+      <ion-icon ios="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>
@@ -25,15 +25,15 @@
 <ion-toolbar>
   <ion-buttons start>
     <button class="activated">
-      <icon ios="contact"></icon>
+      <ion-icon ios="contact"></ion-icon>
     </button>
     <button class="activated">
-      <icon search></icon>
+      <ion-icon name="search"></ion-icon>
     </button>
   </ion-buttons>
   <ion-buttons end>
     <button secondary class="activated">
-      <icon more></icon>
+      <ion-icon name="more"></ion-icon>
     </button>
   </ion-buttons>
   <ion-title>Defaults.activated</ion-title>
@@ -43,10 +43,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>
@@ -54,7 +54,7 @@
   <ion-buttons end>
     <button solid secondary>
       Help
-      <icon help-circle></icon>
+      <ion-icon name="help-circle"></ion-icon>
     </button>
   </ion-buttons>
 </ion-toolbar>
@@ -63,10 +63,10 @@
 <ion-toolbar>
   <ion-buttons start>
     <button solid class="activated">
-      <icon contact></icon>
+      <ion-icon name="contact"></ion-icon>
     </button>
     <button solid class="activated">
-      <icon contact></icon>
+      <ion-icon name="contact"></ion-icon>
       Solid
     </button>
   </ion-buttons>
@@ -74,7 +74,7 @@
   <ion-buttons end>
     <button solid secondary class="activated">
       Help
-      <icon help-circle></icon>
+      <ion-icon name="help-circle"></ion-icon>
     </button>
   </ion-buttons>
 </ion-toolbar>
@@ -83,16 +83,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>
@@ -102,16 +102,16 @@
 <ion-toolbar>
   <ion-buttons start>
     <button outline class="activated">
-      <icon contact></icon>
+      <ion-icon name="contact"></ion-icon>
     </button>
     <button outline class="activated">
-      <icon star></icon>
+      <ion-icon name="star"></ion-icon>
       Star
     </button>
   </ion-buttons>
   <ion-buttons end>
     <button secondary outline class="activated">
-      <icon contact></icon>
+      <ion-icon name="contact"></ion-icon>
     </button>
   </ion-buttons>
   <ion-title>Outline.activated</ion-title>
@@ -121,14 +121,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>
@@ -137,11 +137,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>
@@ -151,19 +151,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>
diff --git a/ionic/components/toolbar/toolbar.ios.scss b/ionic/components/toolbar/toolbar.ios.scss
index 211a728ce1..47283e87ab 100644
--- a/ionic/components/toolbar/toolbar.ios.scss
+++ b/ionic/components/toolbar/toolbar.ios.scss
@@ -223,7 +223,7 @@ ion-buttons[right] {
 // iOS Toolbar Button Icon
 // --------------------------------------------------
 
-.bar-button-icon-left icon {
+.bar-button-icon-left ion-icon {
   margin-left: -0.1em;
   padding-right: 0.3em;
   font-size: 1.4em;
@@ -231,7 +231,7 @@ ion-buttons[right] {
   pointer-events: none;
 }
 
-.bar-button-icon-right icon {
+.bar-button-icon-right ion-icon {
   padding-left: 0.4em;
   font-size: 1.4em;
   line-height: 0.67;
@@ -242,7 +242,7 @@ ion-buttons[right] {
   padding: 0;
   min-width: 0.9em;
 
-  icon {
+  ion-icon {
     padding: 0 0.1em;
     font-size: 1.8em;
     line-height: 0.67;
@@ -280,7 +280,7 @@ ion-buttons[right] {
   min-width: 36px;
   order: map-get($toolbar-order-ios, menu-toggle-start);
 
-  icon {
+  ion-icon {
     padding: 0 6px;
     font-size: 2.8rem;
   }
diff --git a/ionic/components/toolbar/toolbar.md.scss b/ionic/components/toolbar/toolbar.md.scss
index ba183bd3e3..e716193d14 100644
--- a/ionic/components/toolbar/toolbar.md.scss
+++ b/ionic/components/toolbar/toolbar.md.scss
@@ -223,7 +223,7 @@ ion-buttons[right] {
 // Material Design Toolbar Button Icon
 // --------------------------------------------------
 
-.bar-button-icon-left icon {
+.bar-button-icon-left ion-icon {
   margin-left: -0.1em;
   padding-right: 0.3em;
   font-size: 1.4em;
@@ -231,7 +231,7 @@ ion-buttons[right] {
   pointer-events: none;
 }
 
-.bar-button-icon-right icon {
+.bar-button-icon-right ion-icon {
   padding-left: 0.4em;
   font-size: 1.4em;
   line-height: 0.67;
@@ -241,7 +241,7 @@ ion-buttons[right] {
 .bar-button-icon-only {
   padding: 0;
 
-  icon {
+  ion-icon {
     padding: 0 0.1em;
     font-size: 1.8em;
     line-height: 0.67;
@@ -277,7 +277,7 @@ ion-buttons[right] {
   min-width: 44px;
   order: map-get($toolbar-order-md, menu-toggle-start);
 
-  icon {
+  ion-icon {
     padding: 0 6px;
     font-size: 2.4rem;
   }
diff --git a/ionic/fonts/ionicons.scss b/ionic/fonts/ionicons.scss
index dc6f011de4..a7f3086d07 100644
--- a/ionic/fonts/ionicons.scss
+++ b/ionic/fonts/ionicons.scss
@@ -15,7 +15,7 @@ $ionicons-version: "3.0.0" !default;
  font-style: normal;
 }
 
-icon,
+ion-icon,
 [icon],
 .icon {
   display: inline-block;