diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index 397cf9e2e6..907a49fab6 100644
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -20,11 +20,12 @@ $button-small-height:             2.8rem !default;
 $button-small-padding:            1.1rem !default;
 $button-small-icon-size:          2.1rem !default;
 
-$button-fab-size:                56px;
+$button-fab-size:                 56px;
 
 $button-round-border-radius:      64px !default;
 $button-round-padding:            0 2.6rem !default;
 
+
 // Core Button
 // --------------------------------------------------
 
diff --git a/ionic/components/icon/icon.ts b/ionic/components/icon/icon.ts
index 4515030fbd..3801b54130 100644
--- a/ionic/components/icon/icon.ts
+++ b/ionic/components/icon/icon.ts
@@ -1,4 +1,4 @@
-import {Directive, View, CSSClass, onInit, ElementRef} from 'angular2/angular2';
+import {Directive, View, CSSClass, ElementRef} from 'angular2/angular2';
 
 import {IonicConfig} from '../../config/config';
 import {IonicComponent} from '../../config/annotations';
@@ -54,21 +54,20 @@ Custom Font Icon
   selector: 'icon',
   properties: [
     'name',
+    'iconName'
   ],
   host: {
     '[attr.aria-label]': 'label',
-    'role': 'img'
-  },
-  lifecycle: [onInit]
+    'role': 'img',
+    '[className]': 'className'
+  }
 })
 export class IconDirective {
-  constructor(elementRef: ElementRef) {
-    this.ele = elementRef.nativeElement;
-  }
   onInit() {
-    if (this.name) {
-      this.ele.classList.add(this.name);
-      this.label = this.name.replace('ion-', '').replace('ios-', '').replace('md-', '').replace('-', '');
+    let name = this.name || this.iconName;
+    if (name) {
+      this.className = name;
+      this.label = name.replace('ion-', '').replace('ios-', '').replace('md-', '').replace('-', '');
     }
   }
 }
diff --git a/ionic/components/nav-bar/nav-bar.ts b/ionic/components/nav-bar/nav-bar.ts
index 2502b59eee..6788a80d28 100644
--- a/ionic/components/nav-bar/nav-bar.ts
+++ b/ionic/components/nav-bar/nav-bar.ts
@@ -1,12 +1,11 @@
 import {Directive, View, Parent, ElementRef, forwardRef} from 'angular2/angular2';
 import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref';
 
-import {Ion} from '../ion';
+import {ToolbarBase} from '../toolbar/toolbar';
 import {IonicConfig} from '../../config/config';
 import {IonicComponent, IonicView} from '../../config/annotations';
 import {IonicApp} from '../app/app';
 import {ViewItem} from '../view/view-item';
-import * as dom from '../../util/dom';
 
 
 @IonicComponent({
@@ -45,13 +44,11 @@ import * as dom from '../../util/dom';
     forwardRef(() => NavbarItem)
   ]
 })
-export class Navbar extends Ion {
+export class Navbar extends ToolbarBase {
   constructor(item: ViewItem, elementRef: ElementRef, config: IonicConfig, app: IonicApp) {
     super(elementRef, config);
 
     this.app = app;
-    this.eleRef = elementRef;
-    this.itemEles = [];
     item.navbarView(this);
 
     this.bbClass = config.setting('backButtonIcon');
@@ -59,10 +56,6 @@ export class Navbar extends Ion {
     this.bbText = '';
   }
 
-  element() {
-    return this.eleRef;
-  }
-
   backButtonElement(eleRef) {
     if (arguments.length) {
       this._bbEle = eleRef;
@@ -77,71 +70,9 @@ export class Navbar extends Ion {
     return this._bbTxEle;
   }
 
-  titleElement(eleRef) {
-    if (arguments.length) {
-      this._nbTlEle = eleRef;
-    }
-    return this._nbTlEle;
-  }
-
-  itemElements(eleRef) {
-    if (arguments.length) {
-      this.itemEles.push(eleRef);
-    }
-    return this.itemEles;
-  }
-
-  titleText(eleRef) {
-    if (arguments.length) {
-      this._ttTxt.push(eleRef);
-    }
-    return this._ttTxt;
-  }
-
-  alignTitle() {
-    // called after the navbar/title has had a moment to
-    // finish rendering in their correct locations
-    const toolbarEle = this.eleRef.nativeElement;
-    const titleEle = this._ttEle || (this._ttEle = toolbarEle.querySelector('ion-title'));
-
-    // don't bother if there's no title element
-    if (!titleEle) return;
-
-    // get the computed style of the title element
-    const titleStyle = this._ttStyle || (this._ttStyle = window.getComputedStyle(titleEle));
-
-    // don't bother if we're not trying to center align the title
-    if (titleStyle.textAlign !== 'center') return;
-
-    // get all the dimensions
-    const titleOffsetLeft = titleEle.offsetLeft;
-    const titleOffsetRight = toolbarEle.offsetWidth - (titleOffsetLeft + titleEle.offsetWidth);
-
-    let marginLeft = 0;
-    let marginRight = 0;
-    if (titleOffsetLeft < titleOffsetRight) {
-      marginLeft = (titleOffsetRight - titleOffsetLeft) + 5;
-
-    } else if (titleOffsetLeft > titleOffsetRight) {
-      marginRight = (titleOffsetLeft - titleOffsetRight) - 5;
-    }
-
-    let margin = `0 ${marginRight}px 0 ${marginLeft}px`;
-
-    if ((marginLeft || marginRight) && margin !== this._ttMargin) {
-      // only do an update if it has to
-      const innerTitleEle = this._innerTtEle || (this._innerTtEle = toolbarEle.querySelector('.toolbar-inner-title'));
-      innerTitleEle.style.margin = this._ttMargin = margin;
-    }
-  }
-
   didEnter() {
-    const titleEle = this._ttEle || (this._ttEle = this.eleRef.nativeElement.querySelector('ion-title'));
+    const titleEle = this._ttEle || (this._ttEle = this.getNativeElement().querySelector('ion-title'));
     this.app.title(titleEle.textContent);
-
-    setTimeout(() => {
-      //this.titleText((titleEle && titleEle.textContent) || '');
-    }, 32);
   }
 }
 
diff --git a/ionic/components/toolbar/extensions/ios.scss b/ionic/components/toolbar/extensions/ios.scss
index c37f4e3deb..a5e3fcf6df 100644
--- a/ionic/components/toolbar/extensions/ios.scss
+++ b/ionic/components/toolbar/extensions/ios.scss
@@ -42,12 +42,6 @@ $toolbar-ios-title-font-size:               1.7rem !default;
 
   button,
   [button] {
-    padding: 0;
-    margin: 0 1rem;
-
-    min-width: 0;
-    min-height: $toolbar-ios-height;
-
     font-size: $toolbar-ios-button-font-size;
   }
 
diff --git a/ionic/components/toolbar/extensions/material.scss b/ionic/components/toolbar/extensions/material.scss
index bce0617181..708a7a59b9 100644
--- a/ionic/components/toolbar/extensions/material.scss
+++ b/ionic/components/toolbar/extensions/material.scss
@@ -8,12 +8,8 @@ $toolbar-material-button-font-size:        24px !default;
 
 .toolbar[mode="md"] {
 
-  .toolbar-inner {
-    padding: 0px 16px;
-  }
-
   .toolbar-inner-title {
-    padding: 0;
+    padding: 0px 16px;
   }
 
   ion-title {
@@ -27,12 +23,6 @@ $toolbar-material-button-font-size:        24px !default;
 
   button,
   [button] {
-    padding: 0;
-    margin: 0 1rem;
-
-    min-width: 0;
-
-    box-shadow: none;
     font-size: $toolbar-material-button-font-size;
   }
 
diff --git a/ionic/components/toolbar/test/scenarios/e2e.ts b/ionic/components/toolbar/test/scenarios/e2e.ts
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/ionic/components/toolbar/test/scenarios/e2e.ts
@@ -0,0 +1 @@
+
diff --git a/ionic/components/toolbar/test/scenarios/index.ts b/ionic/components/toolbar/test/scenarios/index.ts
new file mode 100644
index 0000000000..2dac2b7a35
--- /dev/null
+++ b/ionic/components/toolbar/test/scenarios/index.ts
@@ -0,0 +1,7 @@
+import {App} from 'ionic/ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class IonicApp {}
diff --git a/ionic/components/toolbar/test/scenarios/main.html b/ionic/components/toolbar/test/scenarios/main.html
new file mode 100644
index 0000000000..66dfda16be
--- /dev/null
+++ b/ionic/components/toolbar/test/scenarios/main.html
@@ -0,0 +1,32 @@
+
+<ion-toolbar><ion-title>Title Only</ion-title></ion-toolbar>
+
+
+<ion-toolbar><ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title></ion-toolbar>
+
+
+<ion-toolbar><ion-nav-items primary><button>Pri. Item</button></ion-nav-items><ion-title>Title</ion-title></ion-toolbar>
+
+
+<ion-toolbar><ion-nav-items secondary><button>Sec. Item</button></ion-nav-items><ion-title>Title</ion-title></ion-toolbar>
+
+
+<ion-toolbar><ion-nav-items primary><button primary>Btn</button></ion-nav-items><ion-title>Title</ion-title><ion-nav-items secondary><button secondary>Btn</button><button secondary>Btn</button><button secondary>Btn</button></ion-nav-items></ion-toolbar>
+
+
+<ion-toolbar><ion-nav-items primary><button><icon name="ion-navicon"></icon></button><button><icon name="ion-heart"></icon></button></ion-nav-items><ion-nav-items secondary><button><icon name="ion-home"></icon></button></ion-nav-items><ion-title>Title</ion-title></ion-toolbar>
+
+
+<ion-toolbar><ion-nav-items primary><button primary><icon name="ion-navicon"></icon></button primary><button primary><icon name="ion-star"></icon></button></ion-nav-items><ion-nav-items secondary><button secondary><icon name="ion-ionic"></icon></button></ion-nav-items><ion-title>Title</ion-title></ion-toolbar>
+
+<ion-toolbar><ion-nav-items primary><button primary outline><icon name="ion-navicon"></icon></button primary><button primary outline><icon name="ion-star"></icon></button></ion-nav-items><ion-nav-items secondary><button secondary outline><icon name="ion-flag"></icon></button></ion-nav-items><ion-title>Title</ion-title></ion-toolbar>
+
+
+<ion-toolbar><ion-nav-items primary><button><icon name="ion-navicon"></icon>Menu</button></ion-nav-items><ion-title>Title</ion-title></ion-toolbar>
+
+
+<style>
+  ion-toolbar {
+    border-bottom: 1px solid black;
+  }
+</style>
diff --git a/ionic/components/toolbar/toolbar-buttons.scss b/ionic/components/toolbar/toolbar-buttons.scss
new file mode 100644
index 0000000000..0b72fee8c9
--- /dev/null
+++ b/ionic/components/toolbar/toolbar-buttons.scss
@@ -0,0 +1,20 @@
+
+// Toolbar Buttons
+// --------------------------------------------------
+
+
+.toolbar ion-nav-items {
+  display: block;
+
+  button,
+  [button] {
+    margin: 0 4px;
+    padding: 0 4px;
+
+    min-width: 3.2rem;
+    min-height: 2.8rem;
+
+    box-shadow: none;
+  }
+}
+
diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss
index 34bbada9c1..4e37826d1d 100644
--- a/ionic/components/toolbar/toolbar.scss
+++ b/ionic/components/toolbar/toolbar.scss
@@ -21,6 +21,7 @@ $toolbar-title-text-color:              #000 !default;
   width: 100%;
   height: 100%;
   min-height: 4.4rem;
+  padding: 5px;
 
   display: flex;
   flex-direction: row;
diff --git a/ionic/components/toolbar/toolbar.ts b/ionic/components/toolbar/toolbar.ts
index 07660a8ba1..7c12fb5034 100644
--- a/ionic/components/toolbar/toolbar.ts
+++ b/ionic/components/toolbar/toolbar.ts
@@ -3,45 +3,15 @@ import {Directive, View, Parent, onInit, ElementRef, forwardRef} from 'angular2/
 import {Ion} from '../ion';
 import {IonicConfig} from '../../config/config';
 import {IonicComponent} from '../../config/annotations';
-import * as dom from '../../util/dom';
 
 
-@IonicComponent({
-  selector: 'ion-toolbar'
-})
-@View({
-  template: `
-    <div class="toolbar-inner">
-      <div class="toolbar-title">
-        <div class="toolbar-inner-title">
-          <content select="ion-title"></content>
-        </div>
-      </div>
-      <div class="toolbar-item toolbar-primary-item">
-        <content select="[primary]"></content>
-      </div>
-      <div class="toolbar-item toolbar-secondary-item">
-        <content select="[secondary]"></content>
-      </div>
-    </div>
-  `,
-  directives: [
-    forwardRef(() => ToolbarTitle),
-    forwardRef(() => ToolbarItem)
-  ]
-})
-export class Toolbar extends Ion {
-  constructor(elementRef: ElementRef, ionicConfig: IonicConfig) {
-    super(elementRef, ionicConfig);
+export class ToolbarBase extends Ion  {
 
-    this.eleRef = elementRef;
+  constructor(elementRef: ElementRef, config: IonicConfig) {
+    super(elementRef, config);
     this.itemEles = [];
   }
 
-  element() {
-    return this.eleRef;
-  }
-
   titleElement(eleRef) {
     if (arguments.length) {
       this._nbTlEle = eleRef;
@@ -66,7 +36,7 @@ export class Toolbar extends Ion {
   alignTitle() {
     // called after the navbar/title has had a moment to
     // finish rendering in their correct locations
-    const toolbarEle = this.eleRef.nativeElement;
+    const toolbarEle = this.getNativeElement();
     const titleEle = this._ttEle || (this._ttEle = toolbarEle.querySelector('ion-title'));
 
     // don't bother if there's no title element
@@ -103,6 +73,45 @@ export class Toolbar extends Ion {
 }
 
 
+@IonicComponent({
+  selector: 'ion-toolbar'
+})
+@View({
+  template: `
+    <div class="toolbar-inner">
+      <div class="toolbar-title">
+        <div class="toolbar-inner-title">
+          <content select="ion-title"></content>
+        </div>
+      </div>
+      <div class="toolbar-item toolbar-primary-item">
+        <content select="[primary]"></content>
+      </div>
+      <div class="toolbar-item toolbar-secondary-item">
+        <content select="[secondary]"></content>
+      </div>
+    </div>
+  `,
+  directives: [
+    forwardRef(() => ToolbarTitle),
+    forwardRef(() => ToolbarItem)
+  ]
+})
+export class Toolbar extends ToolbarBase {
+  constructor(elementRef: ElementRef, ionicConfig: IonicConfig) {
+    super(elementRef, ionicConfig);
+    this.itemEles = [];
+  }
+
+  onIonInit() {
+    setTimeout(() => {
+      this.alignTitle()
+    }, 32);
+  }
+
+}
+
+
 @Directive({
   selector: '.toolbar-title'
 })
diff --git a/ionic/components/view/view-item.ts b/ionic/components/view/view-item.ts
index ec7be2f67a..6a62933e71 100644
--- a/ionic/components/view/view-item.ts
+++ b/ionic/components/view/view-item.ts
@@ -206,7 +206,7 @@ export class ViewItem {
   navbarElement() {
     let navbarView = this.navbarView();
     if (navbarView) {
-      return navbarView.element();
+      return navbarView.getElementRef();
     }
   }
 
diff --git a/ionic/ionic.scss b/ionic/ionic.scss
index d037af116c..1d83d05da0 100755
--- a/ionic/ionic.scss
+++ b/ionic/ionic.scss
@@ -24,6 +24,7 @@
 // Core Components
 @import
   "components/toolbar/toolbar",
+  "components/toolbar/toolbar-buttons",
   "components/action-menu/action-menu",
   "components/alert/alert",
   "components/aside/aside",