diff --git a/demos/component-docs/helpers.ts b/demos/component-docs/helpers.ts
index ff238fa617..1cea3fc647 100644
--- a/demos/component-docs/helpers.ts
+++ b/demos/component-docs/helpers.ts
@@ -54,7 +54,11 @@ import {ModalsPage} from './modals/modals';
 import {NavigationPage} from './navigation/navigation';
 import {PopupsPage} from './popups/popups';
 import {SlidesPage} from './slides/slides';
+
 import {TabsPage} from './tabs/tabs';
+import {TabsIconPage} from './tabs/tabs-icon';
+import {TabsIconTextPage} from './tabs/tabs-icon-text';
+
 
 @Directive({
   selector: '.android-attr',
@@ -160,7 +164,10 @@ export function getPageFor(hash) {
         'navigation': NavigationPage,
         'popups': PopupsPage,
         'slides': SlidesPage,
-        'tabs': TabsPage
+
+        'tabs': TabsPage,
+        'tabs-icon': TabsIconPage,
+        'tabs-icon-text': TabsIconTextPage,
     }[hash]
 }
 
diff --git a/demos/component-docs/tabs/tabs-icon-text.ts b/demos/component-docs/tabs/tabs-icon-text.ts
new file mode 100644
index 0000000000..ba2a6feeb4
--- /dev/null
+++ b/demos/component-docs/tabs/tabs-icon-text.ts
@@ -0,0 +1,40 @@
+import {NavController, NavParams} from 'ionic/ionic';
+import {Page, ViewController} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import * as helpers from '../helpers';
+
+
+@Page({
+  template: '' +
+  '<ion-navbar *navbar hide-back-button class="android-attr">' +
+  '<ion-title>Tabs</ion-title>' +
+  '</ion-navbar>' +
+  '<ion-content>' +
+  '</ion-content>',
+  directives: [forwardRef(() => helpers.AndroidAttribute)],
+})
+class TabIconTextCtrl {
+  constructor(nav: NavController, view: ViewController) {
+    this.nav = nav;
+    this.view = view;
+  }
+}
+
+@Page({
+  template:
+  '<ion-tabs>' +
+  '<ion-tab tab-icon="water" tab-title="Water" [root]="tabOne"></ion-tab>' +
+  '<ion-tab tab-icon="leaf" tab-title="Life" [root]="tabTwo"></ion-tab>' +
+  '<ion-tab tab-icon="flame" tab-title="Fire" [root]="tabThree"></ion-tab>' +
+  '<ion-tab tab-icon="magnet" tab-title="Force" [root]="tabFour"></ion-tab>' +
+  '</ion-tabs>',
+})
+export class TabsIconTextPage {
+  constructor(nav: NavController, params: NavParams) {
+    this.nav = nav;
+    this.tabOne = TabIconTextCtrl;
+    this.tabTwo = TabIconTextCtrl;
+    this.tabThree = TabIconTextCtrl;
+    this.tabFour = TabIconTextCtrl;
+  }
+}
diff --git a/demos/component-docs/tabs/tabs-icon.ts b/demos/component-docs/tabs/tabs-icon.ts
new file mode 100644
index 0000000000..24c242563b
--- /dev/null
+++ b/demos/component-docs/tabs/tabs-icon.ts
@@ -0,0 +1,40 @@
+import {NavController, NavParams} from 'ionic/ionic';
+import {Page, ViewController} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import * as helpers from '../helpers';
+
+
+@Page({
+  template: '' +
+  '<ion-navbar *navbar hide-back-button class="android-attr">' +
+  '<ion-title>Tabs</ion-title>' +
+  '</ion-navbar>' +
+  '<ion-content>' +
+  '</ion-content>',
+  directives: [forwardRef(() => helpers.AndroidAttribute)],
+})
+class TabIconCtrl {
+  constructor(nav: NavController, view: ViewController) {
+    this.nav = nav;
+    this.view = view;
+  }
+}
+
+@Page({
+  template:
+  '<ion-tabs>' +
+  '<ion-tab tab-icon="contact" [root]="tabOne"></ion-tab>' +
+  '<ion-tab tab-icon="compass" [root]="tabTwo"></ion-tab>' +
+  '<ion-tab tab-icon="analytics" [root]="tabThree"></ion-tab>' +
+  '<ion-tab tab-icon="settings" [root]="tabFour"></ion-tab>' +
+  '</ion-tabs>',
+})
+export class TabsIconPage {
+  constructor(nav: NavController, params: NavParams) {
+    this.nav = nav;
+    this.tabOne = TabIconCtrl;
+    this.tabTwo = TabIconCtrl;
+    this.tabThree = TabIconCtrl;
+    this.tabFour = TabIconCtrl;
+  }
+}