button icons

ionic/components/button/button.scss

@@ -203,19 +203,6 @@ button,
   margin-top: 0;
 }
 
-.icon-left:before {
-  font-size: 1.5em;
-  margin-top: -0.1em;
-  margin-right: 0.25em;
-}
-
-.icon-right:before {
-  order: 2;
-  font-size: 1.5em;
-  margin-top: -0.1em;
-  margin-left: 0.25em;
-}
-
 
 // Button Misc
 // --------------------------------------------------

ionic/components/button/button.ts

@@ -1,14 +1,24 @@
-import {Directive, ElementRef, Optional, Ancestor, onDestroy, NgZone} from 'angular2/angular2';
+import {Directive, ElementRef, Optional, Ancestor, onDestroy, NgZone, Query, QueryList} from 'angular2/angular2';
 
+import {Icon} from '../icon/icon';
 import {IonicConfig} from '../../config/config';
 import {Activator} from '../../util/activator';
 import * as dom  from '../../util/dom';
 
 
 @Directive({
-  selector: 'button,[button]'
+  selector: 'button,[button]',
+  host: {
+    '[class.icon-left]': 'icon.iconLeft',
+    '[class.icon-right]': 'icon.iconRight',
+    '[class.icon-only]': 'icon.iconOnly'
+  }
 })
-export class Button {}
+export class Button {
+  registerIcon(icon) {
+    this.icon = icon;
+  }
+}
 
 
 @Directive({

ionic/components/button/extensions/material.scss

@@ -90,7 +90,6 @@ $button-material-border-radius:            3px !default;
 
         &.activated {
           opacity: 1;
-          background: transparent;
         }
       }
 

ionic/components/button/test/icons/main.html

@@ -2,77 +2,95 @@
 <div class="padding">
 
   <div>
-    <button primary class="ion-home icon-left">
+    <button primary>
+      <icon name="ion-home"></icon>
       Left Icon
     </button>
-    <a button primary class="ion-home icon-left">
+    <a button primary>
+      <icon name="ion-home"></icon>
       Left Icon
     </a>
   </div>
 
   <div>
-    <button primary class="ion-star icon-right">
+    <button primary>
       Right Icon
+      <icon name="ion-star"></icon>
     </button>
-    <a button primary class="ion-star icon-right">
+    <a button primary>
       Right Icon
+      <icon name="ion-star"></icon>
     </a>
   </div>
 
   <div>
-    <button primary class="ion-ionic button-icon">
+    <button primary>
+      <icon name="ion-flag"></icon>
     </button>
-    <a button primary class="ion-ionic button-icon">
+    <a button primary>
+      <icon name="ion-flag"></icon>
     </a>
   </div>
 
   <div>
-    <button large primary class="ion-home icon-left">
+    <button large primary>
+      <icon name="ion-help-circled"></icon>
       Left, Large
     </button>
-    <a button large primary class="ion-home icon-left">
+    <a button large primary>
+      <icon name="ion-help-circled"></icon>
       Left, Large
     </a>
   </div>
 
   <div>
-    <button large primary class="ion-star icon-right">
+    <button large primary>
       Right, Large
+      <icon name="ion-settings"></icon>
     </button>
-    <a button large primary class="ion-star icon-right">
+    <a button large primary>
       Right, Large
+      <icon name="ion-settings"></icon>
     </a>
   </div>
 
   <div>
-    <button primary class="ion-ionic button-icon button-large">
+    <button large primary>
+      <icon name="ion-heart"></icon>
     </button>
-    <a button primary class="ion-ionic button-icon button-large">
+    <a button large primary>
+      <icon name="ion-heart"></icon>
     </a>
   </div>
 
   <div>
-    <button small primary class="ion-home icon-left">
-      Left Icon, Small
+    <button small primary>
+      <icon name="ion-checkmark"></icon>
+      Left, Small
     </button>
-    <a button small primary class="ion-home icon-left">
-      Left Icon, Small
+    <a button small primary>
+      <icon name="ion-checkmark"></icon>
+      Left, Small
     </a>
   </div>
 
   <div>
-    <button small primary class="ion-star icon-right">
-      Right Icon, Small
+    <button small primary>
+      Right, Small
+      <icon name="ion-forward"></icon>
     </button>
-    <a button small primary class="ion-star icon-right">
-      Right Icon, Small
+    <a button small primary>
+      Right, Small
+      <icon name="ion-forward"></icon>
     </a>
   </div>
 
   <div>
-    <button small icon primary class="ion-ionic">
+    <button small primary>
+      <icon name="ion-search"></icon>
     </button>
-    <a button small icon primary class="ion-ionic">
+    <a button small primary>
+      <icon name="ion-search"></icon>
     </a>
   </div>
 

ionic/components/icon/icon.ts

@@ -1,9 +1,10 @@
-import {Directive, View, CSSClass, ElementRef} from 'angular2/angular2';
+import {Directive, View, CSSClass, ElementRef, Optional, Parent} from 'angular2/angular2';
 
 import {IonicConfig} from '../../config/config';
 import {IonicComponent} from '../../config/annotations';
 import {Ion} from '../ion';
 import {Platform} from '../../platform/platform';
+import {Button} from '../button/button';
 
 
 /*
@@ -58,19 +59,59 @@ Custom Font Icon
   ],
   host: {
     '[attr.aria-label]': 'label',
-    'role': 'img'
+    '[attr.role]': 'role',
+    '[attr.aria-hidden]': 'hidden'
   }
 })
 export class IconDirective {
-  constructor(elementRef: ElementRef) {
-    this.ele = elementRef.nativeElement;
+  constructor(elementRef: ElementRef, @Optional() @Parent() parentButton: Button) {
+    var ele = this.ele = elementRef.nativeElement;
+
+    this.previousText = (ele.previousSibling && ele.previousSibling.textContent || '').trim();
+    this.nextText = (ele.nextSibling && ele.nextSibling.textContent || '').trim();
+
+    if (parentButton) {
+      this.withinButton = true;
+      this.iconLeft = !!this.nextText;
+      this.iconRight = !!this.previousText;
+      this.iconOnly = !this.iconLeft && !this.iconRight;
+
+      parentButton.registerIcon(this);
+    }
   }
 
   onInit() {
-    if (this.name) {
-      this.ele.classList.add(this.name);
+    if (!this.name) return;
+
+    // add the css class
+    this.ele.classList.add(this.name);
+
+
+    if (this.withinButton && !this.iconOnly) {
+      // icon's within a button that has text
+      this.hidden = true;
+
+    } else {
+      // either not within a button, or it's not a icon only button
+      this.role = 'img';
+      this.hidden = false;
       this.label = this.name.replace('ion-', '').replace('ios-', '').replace('md-', '').replace('-', '');
     }
+
+
+    if (this.iconOnly) {
+      // this is an icon within a button that has not text label
+
+    } else {
+
+    }
+
+
+
+  }
+
+  onDestroy() {
+    this.ele = null;
   }
 }
 

ionic/components/modal/test/basic/index.ts

@@ -53,9 +53,8 @@ export class ContactModal {
 
 @IonicView({
   template: `
-    <ion-navbar *navbar><ion-title>First Page Header: {{ val }}</ion-title><ion-nav-items primary><button id="e2eCloseMenu" (click)="closeModal()">Close</button></ion-nav-items></ion-navbar>
+    <ion-navbar *navbar><ion-title>First Page Header</ion-title><ion-nav-items primary><button id="e2eCloseMenu" (click)="closeModal()">Close</button></ion-nav-items></ion-navbar>
     <ion-content class="padding">
-      <p>First Page: {{ val }}</p>
       <p>
         <button primary (click)="push()">Push (Go to 2nd)</button>
       </p>
@@ -77,7 +76,6 @@ export class ModalFirstPage {
     actionMenu: ActionMenu
   ) {
     this.nav = nav;
-    this.val = Math.round(Math.random() * 8999) + 1000;
     this.modal = modal;
     this.actionMenu = actionMenu;
   }