diff --git a/ionic/components/icon/icon.js b/ionic/components/icon/icon.js
index f695c376ec..079c8e19b8 100644
--- a/ionic/components/icon/icon.js
+++ b/ionic/components/icon/icon.js
@@ -1,11 +1,21 @@
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {Directive, onInit} from 'angular2/src/core/annotations_impl/annotations';
+import {ElementRef} from 'angular2/src/core/compiler/element_ref';
 
 
 @Directive({
-  selector: 'ion-icon,ionicon,icon'
+  selector: 'icon',
+  properties: [
+    'name'
+  ],
+  lifecycle: [onInit]
 })
 export class Icon {
-  constructor() {
-    //ngEle.domElement.setAttribute('aria-hidden', 'hidden')
+  constructor(elementRef: ElementRef) {
+    this.domElement = elementRef.domElement;
+  }
+  onInit() {
+    if (this.name) {
+      this.domElement.classList.add(this.name);
+    }
   }
 }
diff --git a/ionic/components/tabs/tabs.js b/ionic/components/tabs/tabs.js
index 92095a2b11..0652e19959 100644
--- a/ionic/components/tabs/tabs.js
+++ b/ionic/components/tabs/tabs.js
@@ -8,6 +8,7 @@ import {NgFor} from 'angular2/angular2';
 import {IonicComponent} from '../../config/component';
 import {Tab} from './tab';
 import {TabButton} from './tab-button';
+import {Icon} from '../icon/icon';
 
 
 @Component({
@@ -23,7 +24,7 @@ import {TabButton} from './tab-button';
     <nav class="navbar-container tab-bar-container">
       <div class="tab-bar">
         <button *ng-for="#t of tabs" [tab]="t" class="tab-button">
-          <icon [class-name]="'tab-button-icon ' + t.tabIcon"></icon>
+          <icon [name]="t.tabIcon" class="tab-button-icon"></icon>
           <span class="tab-button-text">{{t.tabTitle}}</span>
         </button>
       </div>
@@ -32,7 +33,7 @@ import {TabButton} from './tab-button';
       <content></content>
     </section>
   `,
-  directives: [NgFor, TabButton]
+  directives: [NgFor, TabButton, Icon]
 })
 export class Tabs {
   constructor(elementRef: ElementRef, loader: DynamicComponentLoader, injector: Injector) {