MATERIAL

ionic/components/app/extensions/material.scss

@@ -0,0 +1,5 @@
+.mode-md {
+  ion-app, .ion-app {
+    font-family: 'RobotoDraft','Roboto',-apple-system,'Helvetica Neue',sans-serif;
+  }
+}

ionic/components/app/test/material/index.ts

@@ -0,0 +1,49 @@
+import {Component, Directive} from 'angular2/angular2';
+
+import {App, IonicView, Register} from 'ionic/ionic';
+
+@IonicView({
+  template: '<ion-navbar *navbar primary>' +
+    '<ion-title>Heading</ion-title>' +
+    '<ion-nav-items primary>' +
+      '<button>P1</button>' +
+    '</ion-nav-items>' +
+    '<ion-nav-items secondary>' +
+      '<button>S1</button>' +
+      '<button icon><i class="icon ion-navicon"></i></button>' +
+    '</ion-nav-items>' +
+  '</ion-navbar>' +
+  '<ion-content>' +
+    `<ion-list>
+      <ion-item>
+        All Genres
+      </ion-item>
+      <ion-item>
+        Alternative
+      </ion-item>
+      <ion-item>
+        Blues
+      </ion-item>
+    </ion-list>
+    ` +
+  '</ion-content>'
+})
+export class FirstPage {
+  constructor() {
+  }
+}
+
+@App({
+  template: `<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700,500' rel='stylesheet' type='text/css'><ion-nav></ion-nav>`,
+  routes: [
+    {
+      path: '/first',
+      component: FirstPage,
+      root: true
+    }
+  ]
+})
+class MyApp {
+  constructor() {
+  }
+}

ionic/components/app/typography.scss

@@ -4,8 +4,8 @@
 // All font sizes use rem units
 
 
-$font-family-sans-serif:          "Helvetica Neue", "Roboto", sans-serif !default;
-$font-family-light-sans-serif:    "HelveticaNeue-Light", "Roboto-Light", sans-serif-light !default;
+$font-family-sans-serif:          -apple-system, "Helvetica Neue", "Roboto", sans-serif !default;
+$font-family-light-sans-serif:    -apple-system, "HelveticaNeue-Light", "Roboto-Light", sans-serif-light !default;
 
 $font-family-base:                $font-family-sans-serif !default;
 $font-size-root:                  62.5% !default;

ionic/components/item/extensions/material.scss

@@ -0,0 +1,19 @@
+$item-material-min-height:          56px;
+$item-material-font-size:           16px;
+$item-material-label-color:         #222;
+
+.list[mode="md"] {
+  .item {
+    padding-left: 16px;
+  }
+  .item-content {
+    min-height: $item-material-min-height;
+    padding-right: 16px;
+    border-bottom: 1px solid #DBDBDB;
+  }
+
+  .item-label {
+    color: $item-material-label-color;
+    font-size: $item-material-font-size;
+  }
+}

ionic/components/list/extensions/material.scss

@@ -0,0 +1,2 @@
+.list[mode="md"] {
+}

ionic/components/nav-bar/extensions/material.scss

@@ -3,19 +3,20 @@
 // --------------------------------------------------
 
 $navbar-material-height:                  6.4rem !default;
-$navbar-material-background:              #f7f7f8 !default;
+$navbar-material-background:              #f7f7f8; //get-color(primary, base) !default;//#f7f7f8 !default;
 
 $navbar-material-title-font-size:         2rem !default;
 $navbar-material-button-font-size:        2rem !default;
 $navbar-material-button-text-color:       #007aff !default;
 
 
-.navbar[mode="md"] {
+.nav[mode="md"] .navbar-container {
   height: $navbar-material-height;
   background: $navbar-material-background;
 
-  .navbar-title {
+  ion-title {
     font-size: $navbar-material-title-font-size;
+    font-weight: bold;
   }
 
   button,

ionic/components/nav-bar/nav-bar.scss

@@ -35,3 +35,22 @@
   display: flex;
   align-items: center;
 }
+
+// Core Nav Bar Color Generation
+// --------------------------------------------------
+
+@each $color, $value in $colors {
+
+  .navbar[#{$color}] {
+      background-color: get-color($color, base);
+
+      ion-title {
+        color: white;
+      }
+      button,
+      [button] {
+        color: white;
+      }
+  }
+
+}

ionic/components/nav/test/basic/pages/first-page.ts

@@ -7,7 +7,7 @@ import {ThirdPage} from './third-page';
 
 @IonicView({
   template: '' +
-    '<ion-navbar *navbar>' +
+    '<ion-navbar *navbar primary>' +
       '<ion-title>First Page: {{ val }}</ion-title>' +
       '<ion-nav-items primary>' +
         '<button>P1</button>' +

ionic/components/nav/test/basic/pages/second-page.ts

@@ -5,7 +5,7 @@ import {FirstPage} from './first-page';
 
 @IonicView({
   template: `
-    <ion-navbar *navbar><ion-title>Second Page Header</ion-title></ion-navbar>
+    <ion-navbar *navbar primary><ion-title>Second Page Header</ion-title></ion-navbar>
     <ion-content class="padding">
       <p><button primary (click)="pop()">Pop (Go back to 1st)</button></p>
       <p><button primary nav-pop>Pop with NavPop (Go back to 1st)</button></p>

ionic/ionic.scss

@@ -73,8 +73,12 @@
 
 // Material Design Components
 @import
+  "components/app/extensions/material",
   "components/alert/extensions/material",
   "components/button/extensions/material",
+  "components/item/extensions/material",
+  "components/list/extensions/material",
+  "components/nav-bar/extensions/material",
   "components/tabs/extensions/material";