diff --git a/examples/app.html b/examples/app.html
index 45713042..cfb28f1b 100644
--- a/examples/app.html
+++ b/examples/app.html
@@ -10,6 +10,12 @@ <h2>
   </div>
 </md-toolbar>
 
+<md-tabs>
+  <template md-tab>Tab1</template>
+  <template md-tab>Tab2</template>
+  <template md-tab>Tab3</template>
+</md-tabs>
+
 <md-content class="examples" md-scroll-y layout-padding>
 
   <h1 class="examples-title">Getting Started</h1>
@@ -26,7 +32,6 @@ <h1>Components</h1>
   </nav>
 
 
-
   <section *ngFor="#value of meta" [id]="value.id">
     <h1>{{ value.name }}</h1>
     <example *ngFor="#demo of value.examples" [model]="demo"></example>
diff --git a/ng2-material/components/button/button.html b/ng2-material/components/button/button.html
deleted file mode 100644
index 4e3df0e2..00000000
--- a/ng2-material/components/button/button.html
+++ /dev/null
@@ -1 +0,0 @@
-<span class="md-button-wrapper"><ng-content></ng-content></span>
diff --git a/ng2-material/components/button/button.ts b/ng2-material/components/button/button.ts
index 89677dca..65cd459a 100644
--- a/ng2-material/components/button/button.ts
+++ b/ng2-material/components/button/button.ts
@@ -7,6 +7,8 @@ import {Ink} from "../../core/util/ink";
 import {Attribute} from "angular2/core";
 
 
+const BUTTON_TEMPLATE = `<span class="md-button-wrapper"><ng-content></ng-content></span>`;
+
 // TODO(jelbourn): Make the `isMouseDown` stuff done with one global listener.
 
 @Component({
@@ -19,8 +21,7 @@ import {Attribute} from "angular2/core";
   },
 })
 @View({
-  templateUrl: 'ng2-material/components/button/button.html',
-  //styleUrls: ['ng2-material/components/button/button.css'],
+  template: BUTTON_TEMPLATE,
   encapsulation: ViewEncapsulation.None,
 })
 export class MdButton {
@@ -72,7 +73,7 @@ export class MdButton {
   },
 })
 @View({
-  templateUrl: 'ng2-material/components/button/button.html',
+  template: BUTTON_TEMPLATE,
   encapsulation: ViewEncapsulation.None
 })
 export class MdAnchor extends MdButton implements OnChanges {
diff --git a/ng2-material/components/checkbox/checkbox.html b/ng2-material/components/checkbox/checkbox.html
deleted file mode 100644
index 86d69aba..00000000
--- a/ng2-material/components/checkbox/checkbox.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<div (click)="toggle($event)">
-  <div class="md-checkbox-container">
-    <div class="md-checkbox-icon"></div>
-  </div>
-  <div class="md-checkbox-label"><ng-content></ng-content></div>
-</div>
diff --git a/ng2-material/components/checkbox/checkbox.ts b/ng2-material/components/checkbox/checkbox.ts
index 5de2b252..4eeb7db1 100644
--- a/ng2-material/components/checkbox/checkbox.ts
+++ b/ng2-material/components/checkbox/checkbox.ts
@@ -19,7 +19,13 @@ import {Input, Output, EventEmitter} from 'angular2/core';
   }
 })
 @View({
-  templateUrl: 'ng2-material/components/checkbox/checkbox.html',
+  template: `
+    <div (click)="toggle($event)">
+      <div class="md-checkbox-container">
+        <div class="md-checkbox-icon"></div>
+      </div>
+      <div class="md-checkbox-label"><ng-content></ng-content></div>
+    </div>`,
   directives: [],
   encapsulation: ViewEncapsulation.None
 })
diff --git a/ng2-material/components/dialog/dialog.html b/ng2-material/components/dialog/dialog.html
deleted file mode 100644
index f965d6a8..00000000
--- a/ng2-material/components/dialog/dialog.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<md-dialog-content></md-dialog-content>
-<div tabindex="0" (focus)="wrapFocus()"></div>
-
diff --git a/ng2-material/components/dialog/dialog.ts b/ng2-material/components/dialog/dialog.ts
index 28161343..446fccaf 100644
--- a/ng2-material/components/dialog/dialog.ts
+++ b/ng2-material/components/dialog/dialog.ts
@@ -213,7 +213,9 @@ export class MdDialogConfig {
 })
 @View({
   encapsulation: ViewEncapsulation.None,
-  templateUrl: 'ng2-material/components/dialog/dialog.html',
+  template: `
+    <md-dialog-content></md-dialog-content>
+    <div tabindex="0" (focus)="wrapFocus()"></div>`,
   directives: [forwardRef(() => MdDialogContent)]
 })
 class MdDialogContainer {
diff --git a/ng2-material/components/grid_list/grid_list.html b/ng2-material/components/grid_list/grid_list.html
deleted file mode 100644
index 6a1d43b5..00000000
--- a/ng2-material/components/grid_list/grid_list.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="md-grid-list">
-  <ng-content></ng-content>
-</div>
diff --git a/ng2-material/components/grid_list/grid_list.ts b/ng2-material/components/grid_list/grid_list.ts
index 6c135e6c..575adcf2 100644
--- a/ng2-material/components/grid_list/grid_list.ts
+++ b/ng2-material/components/grid_list/grid_list.ts
@@ -29,7 +29,10 @@ class RowHeightMode {
 
 @Component({selector: 'md-grid-list', inputs: ['cols', 'rowHeight', 'gutterSize']})
 @View({
-  templateUrl: 'ng2-material/components/grid_list/grid_list.html',
+  template: `
+    <div class="md-grid-list">
+      <ng-content></ng-content>
+    </div>`,
   encapsulation: ViewEncapsulation.None
 })
 export class MdGridList implements AfterContentChecked {
@@ -226,7 +229,11 @@ export class MdGridList implements AfterContentChecked {
   }
 })
 @View({
-  templateUrl: 'ng2-material/components/grid_list/grid_tile.html',
+  template: `
+    <style>@import "ng2-material/components/grid_list/grid-list.css";</style>
+    <figure>
+      <ng-content></ng-content>
+    </figure>`,
   encapsulation: ViewEncapsulation.None
 })
 export class MdGridTile implements OnDestroy,
diff --git a/ng2-material/components/grid_list/grid_tile.html b/ng2-material/components/grid_list/grid_tile.html
deleted file mode 100644
index 8fb81735..00000000
--- a/ng2-material/components/grid_list/grid_tile.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<style>@import "source/ui/material/components/grid_list/grid-list.css";</style>
-
-<figure>
-  <ng-content></ng-content>
-</figure>
diff --git a/ng2-material/components/icon/icon.html b/ng2-material/components/icon/icon.html
deleted file mode 100644
index 0d8b32a2..00000000
--- a/ng2-material/components/icon/icon.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<span class="md-icon" [ng-switch]="type">
-  <template [ng-switch-when]="'image'">
-    <img [src]="icon"/>
-  </template>
-  <template [ng-switch-when]="'svg'">
-    <svg xmlns="http://www.w3.org/2000/svg"></svg>
-  </template>
-  <template [ng-switch-when]="'font'">
-    <i class="material-icons" [inner-text]="name"></i>
-  </template>
-</span>
diff --git a/ng2-material/components/list/list.ts b/ng2-material/components/list/list.ts
index 03697498..0f1479d6 100644
--- a/ng2-material/components/list/list.ts
+++ b/ng2-material/components/list/list.ts
@@ -75,9 +75,11 @@ export class MdList {
   properties: ['wrap']
 })
 @View({
-  templateUrl: 'ng2-material/components/list/list_item.html'
+  template: `
+    <div class="md-no-style md-list-item-inner">
+      <ng-content></ng-content>
+    </div>`
 })
-
 export class MdListItem implements AfterViewInit {
   constructor(private _element: ElementRef) {
   }
diff --git a/ng2-material/components/list/list_item.html b/ng2-material/components/list/list_item.html
deleted file mode 100644
index 629066b2..00000000
--- a/ng2-material/components/list/list_item.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<div class="md-no-style md-list-item-inner">
-  <ng-content></ng-content>
-</div>
-<!--<md-button #button *ng-if="wrap=='button'" class="md-no-style">-->
-  <!--<div class="md-list-item-inner"></div>-->
-<!--</md-button>-->
diff --git a/ng2-material/components/progress_circular/progress_circular.html b/ng2-material/components/progress_circular/progress_circular.html
deleted file mode 100644
index 162cb601..00000000
--- a/ng2-material/components/progress_circular/progress_circular.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="md-spinner-wrapper">
-  <div class="md-inner">
-    <div class="md-gap"></div>
-    <div class="md-left">
-      <div class="md-half-circle"></div>
-    </div>
-    <div class="md-right">
-      <div class="md-half-circle"></div>
-    </div>
-  </div>
-</div>
diff --git a/ng2-material/components/progress_circular/progress_circular.ts b/ng2-material/components/progress_circular/progress_circular.ts
index a8a5208e..5e9786e4 100644
--- a/ng2-material/components/progress_circular/progress_circular.ts
+++ b/ng2-material/components/progress_circular/progress_circular.ts
@@ -3,7 +3,18 @@ import {MdProgressLinear} from '../progress_linear/progress_linear';
 
 @Component({selector: 'md-progress-circular'})
 @View({
-  templateUrl: 'ng2-material/components/progress_circular/progress_circular.html',
+  template: `
+    <div class="md-spinner-wrapper">
+      <div class="md-inner">
+        <div class="md-gap"></div>
+        <div class="md-left">
+          <div class="md-half-circle"></div>
+        </div>
+        <div class="md-right">
+          <div class="md-half-circle"></div>
+        </div>
+      </div>
+    </div>`,
   encapsulation: ViewEncapsulation.None
 })
 export class MdProgressCircular extends MdProgressLinear {
diff --git a/ng2-material/components/progress_linear/progress_linear.html b/ng2-material/components/progress_linear/progress_linear.html
deleted file mode 100644
index f3f431f3..00000000
--- a/ng2-material/components/progress_linear/progress_linear.html
+++ /dev/null
@@ -1,8 +0,0 @@
-
-<div class="md-progress-linear-container md-ready">
-  <div class="md-progress-linear-dashed"></div>
-  <div class="md-progress-linear-bar md-progress-linear-bar1"
-      [style.transform]="secondaryBarTransform"></div>
-  <div class="md-progress-linear-bar md-progress-linear-bar2"
-      [style.transform]="primaryBarTransform"></div>
-</div>
diff --git a/ng2-material/components/progress_linear/progress_linear.ts b/ng2-material/components/progress_linear/progress_linear.ts
index 9d76e018..5162607d 100644
--- a/ng2-material/components/progress_linear/progress_linear.ts
+++ b/ng2-material/components/progress_linear/progress_linear.ts
@@ -24,7 +24,14 @@ class ProgressMode {
   }
 })
 @View({
-  templateUrl: 'ng2-material/components/progress_linear/progress_linear.html',
+  template: `
+    <div class="md-progress-linear-container md-ready">
+      <div class="md-progress-linear-dashed"></div>
+      <div class="md-progress-linear-bar md-progress-linear-bar1"
+          [style.transform]="secondaryBarTransform"></div>
+      <div class="md-progress-linear-bar md-progress-linear-bar2"
+          [style.transform]="primaryBarTransform"></div>
+    </div>`,
   directives: [],
   encapsulation: ViewEncapsulation.None
 })
diff --git a/ng2-material/components/radio/radio_button.html b/ng2-material/components/radio/radio_button.html
deleted file mode 100644
index 1f7678d9..00000000
--- a/ng2-material/components/radio/radio_button.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!-- TODO(jelbourn): render the radio on either side of the content -->
-
-<label role="radio" class="md-radio-root"
-    [class.md-radio-checked]="checked">
-  <!-- The actual `radio` part of the control. -->
-  <div class="md-radio-container">
-    <div class="md-radio-off"></div>
-    <div class="md-radio-on"></div>
-  </div>
-
-  <!-- The label for radio control. -->
-  <div class="md-radio-label">
-      <ng-content></ng-content>
-  </div>
-</label>
diff --git a/ng2-material/components/radio/radio_button.ts b/ng2-material/components/radio/radio_button.ts
index 5b99c46a..e52b57c4 100644
--- a/ng2-material/components/radio/radio_button.ts
+++ b/ng2-material/components/radio/radio_button.ts
@@ -41,7 +41,7 @@ var _uniqueIdCounter: number = 0;
   }
 })
 @View({
-  templateUrl: 'ng2-material/components/radio/radio_group.html',
+  template: `<ng-content></ng-content>`,
   encapsulation: ViewEncapsulation.None
 })
 export class MdRadioGroup implements OnChanges {
@@ -220,7 +220,21 @@ export class MdRadioGroup implements OnChanges {
   }
 })
 @View({
-  templateUrl: 'ng2-material/components/radio/radio_button.html',
+  template: `
+    <!-- TODO(jelbourn): render the radio on either side of the content -->
+    <label role="radio" class="md-radio-root"
+        [class.md-radio-checked]="checked">
+      <!-- The actual radio part of the control. -->
+      <div class="md-radio-container">
+        <div class="md-radio-off"></div>
+        <div class="md-radio-on"></div>
+      </div>
+
+      <!-- The label for radio control. -->
+      <div class="md-radio-label">
+          <ng-content></ng-content>
+      </div>
+    </label>`,
   directives: [],
   encapsulation: ViewEncapsulation.None
 })
diff --git a/ng2-material/components/radio/radio_group.html b/ng2-material/components/radio/radio_group.html
deleted file mode 100644
index 6dbc7430..00000000
--- a/ng2-material/components/radio/radio_group.html
+++ /dev/null
@@ -1 +0,0 @@
-<ng-content></ng-content>
diff --git a/ng2-material/components/switcher/switch.html b/ng2-material/components/switcher/switch.html
deleted file mode 100644
index 6dd68442..00000000
--- a/ng2-material/components/switcher/switch.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<div class="md-switch-container">
-  <div class="md-switch-bar"></div>
-  <div class="md-switch-thumb-container">
-    <div class="md-switch-thumb"></div>
-  </div>
-</div>
-<div class="md-switch-label">
-  <ng-content></ng-content>
-</div>
diff --git a/ng2-material/components/switcher/switch.ts b/ng2-material/components/switcher/switch.ts
index c16877fb..d2e346b0 100644
--- a/ng2-material/components/switcher/switch.ts
+++ b/ng2-material/components/switcher/switch.ts
@@ -16,7 +16,16 @@ import {MdCheckbox} from '../checkbox/checkbox';
   }
 })
 @View({
-  templateUrl: 'ng2-material/components/switcher/switch.html',
+  template: `
+    <div class="md-switch-container">
+      <div class="md-switch-bar"></div>
+      <div class="md-switch-thumb-container">
+        <div class="md-switch-thumb"></div>
+      </div>
+    </div>
+    <div class="md-switch-label">
+      <ng-content></ng-content>
+    </div>`,
   directives: [],
   encapsulation: ViewEncapsulation.None
 })
diff --git a/ng2-material/components/tabs/tabs.html b/ng2-material/components/tabs/tabs.html
deleted file mode 100644
index 9dfb7d69..00000000
--- a/ng2-material/components/tabs/tabs.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<md-tabs-wrapper>
-  <md-tab-data></md-tab-data>
-  <md-tabs-canvas role="tablist">
-    <md-pagination-wrapper>
-      <md-tab-item tabindex="-1"
-                   class="md-tab"
-                   (click)="onTabClick(pane,$event)"
-                   [class.md-active]="selected == pane"
-                   [disabled]="pane.disabled"
-                   [style.max-width]="maxTabWidth + 'px'"
-                   *ngFor="#pane of panes"
-                   role="tab">
-        {{pane.label}}
-      </md-tab-item>
-      <md-ink-bar></md-ink-bar>
-    </md-pagination-wrapper>
-  </md-tabs-canvas>
-</md-tabs-wrapper>
-<md-tabs-content-wrapper>
-  <md-tab-content role="tabpanel" class="md-active"
-                  [class.md-no-scroll]="mdNoScroll">
-    <ng-content></ng-content>
-  </md-tab-content>
-</md-tabs-content-wrapper>
diff --git a/ng2-material/components/tabs/tabs.ts b/ng2-material/components/tabs/tabs.ts
index e2199758..4341874c 100644
--- a/ng2-material/components/tabs/tabs.ts
+++ b/ng2-material/components/tabs/tabs.ts
@@ -5,6 +5,7 @@ import {
 import {isPresent} from "angular2/src/facade/lang";
 import {Ink} from "../../core/util/ink";
 import {ViewEncapsulation} from "angular2/core";
+import {NgFor} from "angular2/common";
 
 
 // TODO: behaviors to test
@@ -49,7 +50,32 @@ export class MdTab {
 
 @Component({
   selector: 'md-tabs',
-  templateUrl: 'ng2-material/components/tabs/tabs.html',
+  template: `
+    <md-tabs-wrapper>
+      <md-tab-data></md-tab-data>
+      <md-tabs-canvas role="tablist">
+        <md-pagination-wrapper>
+          <md-tab-item tabindex="-1"
+                       class="md-tab"
+                       (click)="onTabClick(pane,$event)"
+                       [class.md-active]="selected == pane"
+                       [disabled]="pane.disabled"
+                       [style.max-width]="maxTabWidth + 'px'"
+                       *ngFor="#pane of panes"
+                       role="tab">
+            {{pane.label}}
+          </md-tab-item>
+          <md-ink-bar></md-ink-bar>
+        </md-pagination-wrapper>
+      </md-tabs-canvas>
+    </md-tabs-wrapper>
+    <md-tabs-content-wrapper>
+      <md-tab-content role="tabpanel" class="md-active"
+                      [class.md-no-scroll]="mdNoScroll">
+        <ng-content></ng-content>
+      </md-tab-content>
+    </md-tabs-content-wrapper>`,
+  directives: [NgFor],
   encapsulation: ViewEncapsulation.None
 })
 export class MdTabs implements AfterContentInit {
@@ -85,7 +111,12 @@ export class MdTabs implements AfterContentInit {
   }
 
   select(pane: MdTab) {
-    this.panes.toArray().forEach((p: MdTab) => p.active = p == pane);
+    this.panes.toArray().forEach((p: MdTab, index: number) => {
+      p.active = p == pane;
+      if (p.active) {
+        this._selectedIndex = index;
+      }
+    });
   }
 
   onTabClick(pane: MdTab, event?) {