diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts
index 2de01fbd2e..c68036899f 100644
--- a/ionic/components/checkbox/checkbox.ts
+++ b/ionic/components/checkbox/checkbox.ts
@@ -1,4 +1,4 @@
-import {Component, Directive, Optional, NgControl, ElementRef, Renderer} from 'angular2/angular2';
+import {Component, Directive, Optional, NgControl, ElementRef} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {Form} from '../../util/form';
@@ -30,7 +30,8 @@ import {Form} from '../../util/form';
     '[attr.aria-checked]': 'checked',
     '[attr.aria-disabled]': 'disabled',
     '[attr.aria-labelledby]': 'labelId',
-    '(click)': 'click($event)'
+    '(click)': 'click($event)',
+    'class': 'item'
   },
   template:
     '<div class="item-inner">' +
@@ -47,10 +48,8 @@ export class Checkbox {
   constructor(
     form: Form,
     @Optional() ngControl: NgControl,
-    elementRef: ElementRef,
-    renderer: Renderer
+    elementRef: ElementRef
   ) {
-    renderer.setElementClass(elementRef, 'item', true);
     this.form = form;
     form.register(this);
 
diff --git a/ionic/components/item/item.ts b/ionic/components/item/item.ts
index 8d301ccbcf..4c63759ba2 100644
--- a/ionic/components/item/item.ts
+++ b/ionic/components/item/item.ts
@@ -5,16 +5,16 @@ import {Component} from 'angular2/angular2';
  * Creates a list-item that can easily be swiped,
  * deleted, reordered, edited, and more.
  *
- * There are three common ways to use an item: 
+ * There are three common ways to use an item:
  * - Use `<ion-item>` for something that is only non-clickable text.
  * - Use `<button ion-item>` for something that can be clicked/tapped. Typically this element will also have a `(click)` handler.
  * - Use `<a ion-item>` for when the item needs to contain a `href`.
  *
  * By default, `<button ion-item>` and `<a ion-item>` will receive a right arrow icon on iOS to signal that tapping the item will reveal more information.
- * To hide this icon, add the `detail-none` attribute to the item (eg: `<button ion-item detail-none>`). To add the icon when it is not displayed by default, 
+ * To hide this icon, add the `detail-none` attribute to the item (eg: `<button ion-item detail-none>`). To add the icon when it is not displayed by default,
  * add the `detail-push` attribute (eg: `<ion-item detail-push>`).
  *
- * 
+ *
  * @usage
  * ```html
  * <ion-list>
@@ -26,24 +26,20 @@ import {Component} from 'angular2/angular2';
  *   </ion-item>
  * </ion-list>
  *  ```
- * 
+ *
  */
 @Component({
   selector: 'ion-item,[ion-item]',
   template:
     '<ng-content select="[item-left]"></ng-content>' +
     '<div class="item-inner">' +
-      '<ng-content select="[item-right]"></ng-content>' +
       '<ion-item-content>' +
         '<ng-content></ng-content>'+
       '</ion-item-content>' +
+      '<ng-content select="[item-right]"></ng-content>' +
     '</div>',
   host: {
-    '[class.item]': 'isItem'
+    'class': 'item'
   }
 })
-export class Item {
-  constructor() {
-    this.isItem = true;
-  }
-}
+export class Item {}
diff --git a/ionic/components/list/list.ts b/ionic/components/list/list.ts
index f3bcebfb22..4b1ec19d21 100644
--- a/ionic/components/list/list.ts
+++ b/ionic/components/list/list.ts
@@ -1,4 +1,4 @@
-import {Directive, ElementRef, Renderer, NgZone} from 'angular2/angular2';
+import {Directive, ElementRef, NgZone} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {Config} from '../../config/config';
@@ -23,22 +23,18 @@ import * as util from 'ionic/util';
     'items',
     'virtual',
     'content'
-  ]
+  ],
+  host: {
+    'class': 'list'
+  }
 })
 export class List extends Ion {
-  /**
-   * TODO
-   * @param {ElementRef} elementRef  TODO
-   * @param {Config} config  TODO
-   */
-  constructor(elementRef: ElementRef, config: Config, renderer: Renderer, private zone: NgZone) {
+
+  constructor(elementRef: ElementRef, config: Config, private zone: NgZone) {
     super(elementRef, config);
-    renderer.setElementClass(elementRef, 'list', true);
     this.ele = elementRef.nativeElement;
   }
-  /**
-   * TODO
-   */
+
   onInit() {
     super.onInit();
 
diff --git a/ionic/components/navbar/navbar.ts b/ionic/components/navbar/navbar.ts
index 6f54900dd4..6ea34b94c5 100644
--- a/ionic/components/navbar/navbar.ts
+++ b/ionic/components/navbar/navbar.ts
@@ -78,7 +78,8 @@ class ToolbarBackground {
       '<ng-content></ng-content>' +
     '</toolbar-content>',
   host: {
-    '[hidden]': '_hidden'
+    '[hidden]': '_hidden',
+    'class': 'toolbar'
   },
   inputs: [
     'hideBackButton',
@@ -98,8 +99,6 @@ export class Navbar extends ToolbarBase {
     this.app = app;
     this.renderer = renderer;
 
-    renderer.setElementClass(elementRef, 'toolbar', true);
-
     let navbarStyle = config.get('navbarStyle');
     if (navbarStyle) {
       renderer.setElementAttribute(elementRef, navbarStyle, '');
diff --git a/ionic/components/radio/radio.ts b/ionic/components/radio/radio.ts
index ee055f7550..49819ebb2d 100644
--- a/ionic/components/radio/radio.ts
+++ b/ionic/components/radio/radio.ts
@@ -1,4 +1,4 @@
-import {Component, Directive, ElementRef, Renderer, Host, Optional, NgControl, Query, QueryList} from 'angular2/angular2';
+import {Component, Directive, ElementRef, Host, Optional, NgControl, Query, QueryList} from 'angular2/angular2';
 
 import {Config} from '../../config/config';
 import {Ion} from '../ion';
@@ -47,7 +47,8 @@ import {ListHeader} from '../list/list';
   host: {
     'role': 'radiogroup',
     '[attr.aria-activedescendant]': 'activeId',
-    '[attr.aria-describedby]': 'describedById'
+    '[attr.aria-describedby]': 'describedById',
+    'class': 'list'
   }
 })
 export class RadioGroup extends Ion {
@@ -63,12 +64,10 @@ export class RadioGroup extends Ion {
   constructor(
     elementRef: ElementRef,
     config: Config,
-    renderer: Renderer,
     @Optional() ngControl: NgControl,
     @Query(ListHeader) private headerQuery: QueryList<ListHeader>
   ) {
     super(elementRef, config);
-    renderer.setElementClass(elementRef, 'list', true);
 
     this.id = ++radioGroupIds;
     this.radioIds = -1;
@@ -179,7 +178,8 @@ export class RadioGroup extends Ion {
     '[attr.aria-checked]': 'checked',
     '[attr.aria-disabled]': 'disabled',
     '[attr.aria-labelledby]': 'labelId',
-    '(click)': 'click($event)'
+    '(click)': 'click($event)',
+    'class': 'item'
   },
   template:
     '<div class="item-inner">' +
@@ -201,11 +201,9 @@ export class RadioButton extends Ion {
   constructor(
     @Host() @Optional() group: RadioGroup,
     elementRef: ElementRef,
-    config: Config,
-    renderer: Renderer
+    config: Config
   ) {
     super(elementRef, config);
-    renderer.setElementClass(elementRef, 'item', true);
 
     this.group = group;
     this.tabIndex = 0;
diff --git a/ionic/components/switch/switch.ts b/ionic/components/switch/switch.ts
index 36ed79f25f..740b6cadec 100644
--- a/ionic/components/switch/switch.ts
+++ b/ionic/components/switch/switch.ts
@@ -1,4 +1,4 @@
-import {Component, Directive, ElementRef, Renderer, Host, Optional, NgControl, Inject, forwardRef} from 'angular2/angular2';
+import {Component, Directive, ElementRef, Host, Optional, NgControl, Inject, forwardRef} from 'angular2/angular2';
 
 import {Form} from '../../util/form';
 import {Config} from '../../config/config';
@@ -83,7 +83,8 @@ class MediaSwitch {
     '(touchstart)': 'pointerDown($event)',
     '(mousedown)': 'pointerDown($event)',
     '(touchend)': 'pointerUp($event)',
-    '(mouseup)': 'pointerUp($event)'
+    '(mouseup)': 'pointerUp($event)',
+    'class': 'item'
   },
   template:
     '<ng-content select="[item-left]"></ng-content>' +
@@ -108,14 +109,11 @@ export class Switch {
     form: Form,
     elementRef: ElementRef,
     config: Config,
-    renderer: Renderer,
     @Optional() private ngControl: NgControl
   ) {
     this.form = form;
     form.register(this);
 
-    renderer.setElementClass(elementRef, 'item', true);
-
     this.lastTouch = 0;
     this.mode = config.get('mode');
 
diff --git a/ionic/components/text-input/text-input.ts b/ionic/components/text-input/text-input.ts
index ec17c5626e..a8fcfe8799 100644
--- a/ionic/components/text-input/text-input.ts
+++ b/ionic/components/text-input/text-input.ts
@@ -17,7 +17,8 @@ import {Platform} from '../../platform/platform';
   host: {
     '(touchstart)': 'pointerStart($event)',
     '(touchend)': 'pointerEnd($event)',
-    '(mouseup)': 'pointerEnd($event)'
+    '(mouseup)': 'pointerEnd($event)',
+    'class': 'item'
   },
   template:
     '<div class="item-inner">' +
@@ -37,7 +38,6 @@ export class TextInput {
     platform: Platform,
     @Optional() @Host() scrollView: Content
   ) {
-    renderer.setElementClass(elementRef, 'item', true);
     this.renderer = renderer;
 
     this.form = form;
diff --git a/ionic/components/toolbar/toolbar.ts b/ionic/components/toolbar/toolbar.ts
index 0ac708a463..4ced7355c5 100644
--- a/ionic/components/toolbar/toolbar.ts
+++ b/ionic/components/toolbar/toolbar.ts
@@ -1,4 +1,4 @@
-import {Component, Directive, Host, ElementRef, Renderer, Optional, forwardRef, Inject} from 'angular2/angular2';
+import {Component, Directive, Host, ElementRef, Optional, forwardRef, Inject} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {Config} from '../../config/config';
@@ -64,16 +64,17 @@ export class ToolbarBase extends Ion  {
     '<ng-content select="ion-nav-items[secondary]"></ng-content>' +
     '<toolbar-content>' +
       '<ng-content></ng-content>' +
-    '</toolbar-content>'
+    '</toolbar-content>',
+  host: {
+    'class': 'toolbar'
+  }
 })
 export class Toolbar extends ToolbarBase {
   constructor(
     elementRef: ElementRef,
-    config: Config,
-    renderer: Renderer
+    config: Config
   ) {
     super(elementRef, config);
-    renderer.setElementClass(elementRef, 'toolbar', true);
   }
 
 }