diff --git a/ionic/components/icon/icon.ts b/ionic/components/icon/icon.ts
index d3c25c8c2f..94128fa381 100644
--- a/ionic/components/icon/icon.ts
+++ b/ionic/components/icon/icon.ts
@@ -38,13 +38,15 @@ export class Icon {
   ) {
     let ele = elementRef.nativeElement;
 
-    this.mode = config.setting('mode');
+    this.mode = config.setting('iconMode');
+
     this.iconLeft = this.iconRight = this.iconOnly = false;
     this.ariaHidden = true;
+    this.isInactive = ele.hasAttribute('inactive');
 
     this.iconAttr = null;
     for (let i = 0, l = ele.attributes.length; i < l; i++) {
-      if (ele.attributes[i].value === '') {
+      if (ele.attributes[i].value === '' && /_|item-|inactive|class/.test(ele.attributes[i].name) !== true) {
         this.iconAttr = ele.attributes[i].name;
       }
     }
diff --git a/ionic/components/icon/test/basic/main.html b/ionic/components/icon/test/basic/main.html
index f72073ce70..2f2db26c03 100644
--- a/ionic/components/icon/test/basic/main.html
+++ b/ionic/components/icon/test/basic/main.html
@@ -1,28 +1,61 @@
 
-<ion-row>
-  <ion-col>
+<ion-toolbar>
+  <ion-title>Icons</ion-title>
+</ion-toolbar>
 
-    <icon ion-home></icon>
+<ion-content>
 
-  </ion-col>
-  <ion-col>
+  <ion-list>
 
-    <icon name="ion-home"></icon>
+    <ion-item>
+      <icon ion-home item-left></icon>
+      <code>
+        &lt;icon ion-home>&lt;/icon>
+      </code>
+    </ion-item>
 
-  </ion-col>
-  <ion-col>
+    <ion-item>
+      <icon inactive ion-home item-left></icon>
+      <code>
+        &lt;icon inactive ion-home>&lt;/icon>
+      </code>
+    </ion-item>
 
-    <icon [name]="homeIcon"></icon>
+    <ion-item>
+      <icon name="ion-home" item-left></icon>
+      <code>
+        &lt;icon name="ion-home">&lt;/icon>
+      </code>
+    </ion-item>
 
-  </ion-col>
-  <ion-col>
+    <ion-item>
+      <icon [name]="homeIcon" item-left></icon>
+      <code>
+        &lt;icon [name]="homeIcon">&lt;/icon>
+      </code>
+    </ion-item>
 
-    <icon ios="ion-social-apple" md="ion-social-android"></icon>
+    <ion-item>
+      <icon ios="ion-social-apple" md="ion-social-android" item-left></icon>
+      <code>
+        &lt;icon ios="ion-social-apple" md="ion-social-android">&lt;/icon>
+      </code>
+    </ion-item>
 
-  </ion-col>
-  <ion-col>
+    <ion-item>
+      <icon inactive ios="ion-social-apple" md="ion-social-android" item-left></icon>
+      <code>
+        &lt;icon inactive ios="ion-social-apple" md="ion-social-android">&lt;/icon>
+      </code>
+    </ion-item>
 
-    <icon ion-social-twitter></icon>
+  </ion-list>
 
-  </ion-col>
-</ion-row>
+</ion-content>
+
+<style>
+  /*to ensure ng css encapsulation doesn't mess with icon attributes*/
+  code {
+    font-size: 0.8em;
+  }
+</style>