Icon stuff

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

@@ -6,11 +6,11 @@ import {App, IonicView, Register} from 'ionic/ionic';
   template: '<ion-navbar *navbar primary>' +
     '<ion-title>Heading</ion-title>' +
     '<ion-nav-items primary>' +
-      '<button>P1</button>' +
+      '<button icon><i class="icon ion-navicon"></i></button>' +
     '</ion-nav-items>' +
     '<ion-nav-items secondary>' +
-      '<button>S1</button>' +
-      '<button icon><i class="icon ion-navicon"></i></button>' +
+      '<button><ion-icon md="ion-android-search" ios="ion-ios-search-strong"></i></button>' +
+      '<button><i class="icon ion-android-more-vertical"></i></button>' +
     '</ion-nav-items>' +
   '</ion-navbar>' +
   '<ion-content>' +

ionic/components/icon/icon.ts

@@ -1,10 +1,14 @@
-import {Directive, onInit, ElementRef} from 'angular2/angular2';
+import {Directive, View, CSSClass, onInit, ElementRef} from 'angular2/angular2';
 
+import {IonicConfig} from '../../config/config';
+import {IonicComponent} from '../../config/annotations';
+import {Ion} from '../ion';
+import {Platform} from '../../platform/platform';
 
 @Directive({
   selector: 'icon',
   properties: [
-    'name'
+    'name',
   ],
   host: {
     '[attr.aria-label]': 'label',
@@ -12,7 +16,7 @@ import {Directive, onInit, ElementRef} from 'angular2/angular2';
   },
   lifecycle: [onInit]
 })
-export class Icon {
+export class IconDirective {
   constructor(elementRef: ElementRef) {
     this.ele = elementRef.nativeElement;
   }
@@ -23,3 +27,30 @@ export class Icon {
     }
   }
 }
+
+@IonicComponent({
+  selector: 'ion-icon',
+  properties: [
+    'md',
+    'ios'
+  ],
+  host: {
+    'mode': 'mode'
+  }
+})
+@View({
+  template: '<i class="icon" [class]="iconClass">',
+  directives: [CSSClass]
+})
+export class Icon extends Ion {
+  constructor(elementRef: ElementRef, ionicConfig: IonicConfig) {
+    super(elementRef, ionicConfig);
+  }
+  onIonInit() {
+    this.iconClass = this.ios;
+    console.log('ICON', this.mode);
+    setTimeout(() => {
+      console.log('MODE', this.mode);
+    });
+  }
+}

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

@@ -2,12 +2,19 @@
 // Material Design Navbar
 // --------------------------------------------------
 
+$navbar-order-material: (
+  back-button: 10,
+  primary: 20,
+  title: 30,
+  secondary: 40
+);
+
 $navbar-material-height:                  6.4rem !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-material-button-font-size:        24px !default;
+$navbar-material-button-text-color:       #fff !default; //#007aff !default;
 
 
 .nav[mode="md"] .navbar-container {
@@ -18,6 +25,26 @@ $navbar-material-button-text-color:       #007aff !default;
     padding: 0px 16px;
   }
 
+  .toolbar-inner {
+    padding: 0px 16px;
+  }
+
+  .toolbar-title {
+    order: map-get($navbar-order-ios, 'title');
+  }
+
+  .toolbar-primary-item {
+    order: map-get($navbar-order-ios, 'primary');
+  }
+
+  .toolbar-secondary-item {
+    order: map-get($navbar-order-ios, 'secondary');
+  }
+
+  .toolbar-primary-item ion-nav-items button:first-child {
+    margin-left: 0;
+  }
+
   ion-title {
     font-size: $navbar-material-title-font-size;
     font-weight: 500;

ionic/config/annotations.ts

@@ -11,6 +11,7 @@ import {
   List, Item, ItemGroup, ItemGroupTitle,
   Toolbar,
   Icon,
+  IconDirective,
   Checkbox, TapInput, Switch,
   Input, TextInput, Label,
   Segment, SegmentButton, SegmentControlValueAccessor,
@@ -51,6 +52,7 @@ export const IonicDirectives = [
 
   // Media
   forwardRef(() => Icon),
+  forwardRef(() => IconDirective),
 
   // Form
   forwardRef(() => Segment),