use roles for button icons

ionic/components/button/button-icon.scss

@@ -4,41 +4,30 @@
 // --------------------------------------------------
 
 
-button,
-[button] {
+.button-icon-left icon {
+  margin-left: -0.3em;
+  padding-right: 0.3em;
+  font-size: 1.4em;
+  line-height: 0.67;
+  pointer-events: none;
+}
+
+.button-icon-right icon {
+  margin-right: -0.2em;
+  padding-left: 0.4em;
+  font-size: 1.4em;
+  line-height: 0.67;
+  pointer-events: none;
+}
+
+.button-icon-only {
+  padding: 0;
+  min-width: 0.9em;
 
   icon {
-    font-size: 1.4em;
-    background: none;
-    border: none;
-    pointer-events: none;
+    padding: 0 0.5em;
+    font-size: 1.8em;
     line-height: 0.67;
+    pointer-events: none;
   }
-
-  &.icon-left icon {
-    margin-left: -0.3em;
-    padding-right: 0.3em;
-  }
-
-  &.icon-right icon {
-    margin-right: -0.2em;
-    padding-left: 0.4em;
-  }
-
-  &.icon-only {
-    padding: 0;
-    min-width: 0.9em;
-
-    icon {
-      padding: 0 0.5em;
-      font-size: 1.8em;
-    }
-  }
-
-  &[small] icon {
-    margin-left: 0;
-    margin-right: 0;
-    font-size: 1.4em;
-  }
-
 }

ionic/components/button/button.ts

@@ -35,11 +35,12 @@ export class Button {
     private elementRef: ElementRef,
     private renderer: Renderer
   ) {
-    this._role = 'button'; // bar-button
-    this._size = null; // large
-    this._style = null; // outline
-    this._display = null; // block
-    this._colors = []; // primary
+    this._role = 'button'; // bar-button/item-button
+    this._size = null; // large/small
+    this._style = null; // outline/clear
+    this._display = null; // block/full
+    this._colors = []; // primary/secondary
+    this._icon = null; // left/right/only
 
     let element = elementRef.nativeElement;
 
@@ -54,7 +55,18 @@ export class Button {
     }
 
     this._readAttrs(element);
+    this._readIcon(element);
+  }
 
+  afterContentInit() {
+    this._assignCss(true);
+  }
+
+  setRole(val) {
+    this._role = val;
+  }
+
+  _readIcon(element) {
     // figure out if and where the icon lives in the button
     let childNodes = element.childNodes;
     let childNode;
@@ -82,23 +94,14 @@ export class Button {
 
     if (nodes.length > 1) {
       if (nodes[0] === ICON && nodes[1] === TEXT) {
-        renderer.setElementClass(elementRef, 'icon-left', true);
+        this._icon = 'icon-left';
 
       } else if (nodes[0] === TEXT && nodes[1] === ICON) {
-        renderer.setElementClass(elementRef, 'icon-right', true);
+        this._icon = 'icon-right';
       }
     } else if (nodes.length === 1 && nodes[0] === ICON) {
-      renderer.setElementClass(elementRef, 'icon-only', true);
+      this._icon = 'icon-only';
     }
-
-  }
-
-  afterContentInit() {
-    this._assignCss(true);
-  }
-
-  setRole(val) {
-    this._role = val;
   }
 
   _readAttrs(element) {
@@ -125,17 +128,22 @@ export class Button {
   }
 
   _assignCss(assignCssClass) {
-    let setElementClass = this.renderer.setElementClass;
-    let elementRef = this.elementRef;
     let role = this._role;
     if (role) {
-      setElementClass(elementRef, role, assignCssClass); // button
-      if (this._style) setElementClass(elementRef, role + '-' + this._style, assignCssClass); // button-clear
-      if (this._display) setElementClass(elementRef, role + '-' + this._display, assignCssClass); // button-full
-      if (this._size) setElementClass(elementRef, role + '-' + this._size, assignCssClass); // button-small
+      this.renderer.setElementClass(this.elementRef, role, assignCssClass); // button
+      this._setClass(this._style, assignCssClass); // button-clear
+      this._setClass(this._display, assignCssClass); // button-full
+      this._setClass(this._size, assignCssClass); // button-small
+      this._setClass(this._icon, assignCssClass); // button-icon-left
       this._colors.forEach(color => {
-        setElementClass(elementRef, role + '-' + color, assignCssClass); // button-secondary
-      });  
+        this._setClass(color, assignCssClass); // button-secondary
+      });
+    }
+  }
+
+  _setClass(type, assignCssClass) {
+    if (type) {
+      this.renderer.setElementClass(this.elementRef, this._role + '-' + type, assignCssClass);
     }
   }
 
@@ -149,7 +157,7 @@ export class Button {
 }
 
 const BUTTON_SIZE_ATTRS = ['large', 'small'];
-const BUTTON_STYLE_ATTRS = ['round', 'clear', 'outline', 'fab'];
+const BUTTON_STYLE_ATTRS = ['round', 'clear', 'outline', 'fab', 'solid'];
 const BUTTON_DISPLAY_ATTRS = ['block', 'full'];
 const IGNORE_ATTRS = /_ng/;
 

ionic/components/toolbar/modes/ios.scss

@@ -1,5 +1,6 @@
 @import "../../../globals.ios";
 @import "../toolbar";
+@import "../toolbar-button";
 
 // iOS Toolbar
 // --------------------------------------------------
@@ -17,72 +18,85 @@ $toolbar-ios-height:                        4.4rem !default;
 $toolbar-ios-button-font-size:              1.7rem !default;
 $toolbar-ios-title-font-size:               1.7rem !default;
 
+$navbar-ios-height:                         $toolbar-ios-height !default;
+
 
 .toolbar {
   padding: $toolbar-ios-padding;
   min-height: $toolbar-ios-height;
-
-  [menu-toggle] {
-    order: map-get($toolbar-order-ios, menu-toggle-primary);
-    cursor: pointer;
-  }
-
-  [menu-toggle][secondary] {
-    order: map-get($toolbar-order-ios, menu-toggle-secondary);
-  }
-
-  ion-segment-button[button] {
-    line-height: 2.4rem;
-    min-height: 2.4rem;
-    font-size: 1.2rem;
-  }
-
-  button,
-  [button] {
-    margin-top: 0;
-    margin-bottom: 0;
-    padding: 0 5px;
-    min-height: 32px;
-    color: $toolbar-ios-active-color;
-  }
-
-  button.icon-only,
-  [button].icon-only {
-    padding-right: 0;
-    padding-left: 0;
-  }
-
-  button icon,
-  [button] icon {
-    padding: 0;
-    min-width: 28px;
-  }
-
-  .back-button {
-    margin: 0;
-    min-height: 3.2rem;
-    line-height: 1;
-    order: map-get($toolbar-order-ios, 'back-button');
-    overflow: visible;
-  }
-
-  .back-button-icon {
-    display: inherit;
-    margin: 0;
-    min-width: 18px;
-    font-size: 3.2rem;
-  }
-
 }
 
-.toolbar button:hover:not(.disable-hover),
-.toolbar [button]:hover:not(.disable-hover),
-.toolbar button.activated,
-.toolbar [button].activated {
+ion-navbar-section {
+  min-height: $navbar-ios-height;
+}
+
+// iOS Toolbar Buttons
+// --------------------------------------------------
+
+.bar-button {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding: 0 5px;
+  min-height: 32px;
+  border: 0;
+  font-size: $toolbar-ios-button-font-size;
   color: $toolbar-ios-active-color;
   background-color: transparent;
 }
 
+.bar-button.icon-only {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.bar-button icon {
+  padding: 0;
+  min-width: 28px;
+}
+
+
+// iOS Back Button
+// --------------------------------------------------
+
+.back-button {
+  margin: 0;
+  min-height: 3.2rem;
+  line-height: 1;
+  order: map-get($toolbar-order-ios, 'back-button');
+  overflow: visible;
+  transform: translateZ(0px);
+}
+
+.back-button-icon {
+  display: inherit;
+  margin: 0;
+  min-width: 18px;
+  font-size: 3.2rem;
+}
+
+
+// iOS Menu Toggle
+// --------------------------------------------------
+
+[menu-toggle] {
+  order: map-get($toolbar-order-ios, menu-toggle-primary);
+  cursor: pointer;
+}
+
+[menu-toggle][secondary] {
+  order: map-get($toolbar-order-ios, menu-toggle-secondary);
+}
+
+ion-segment-button[button] {
+  line-height: 2.4rem;
+  min-height: 2.4rem;
+  font-size: 1.2rem;
+}
+
+
+// iOS Toolbar Background
+// --------------------------------------------------
+
 .toolbar-background {
   border-bottom-width: 1px;
   border-bottom-style: solid;
@@ -90,6 +104,14 @@ $toolbar-ios-title-font-size:               1.7rem !default;
   background-color: $toolbar-ios-background-color;
 }
 
+&.hairlines .toolbar-background {
+  border-bottom-width: 0.55px;
+}
+
+
+// iOS Toolbar Content
+// --------------------------------------------------
+
 ion-title {
   position: absolute;
   top: 0;
@@ -120,21 +142,22 @@ ion-nav-items[secondary] {
   order: map-get($toolbar-order-ios, secondary);
 }
 
-&.hairlines .toolbar-background {
-  border-bottom-width: 0.55px;
-}
 
-
-// iOS Navbar
+// iOS Toolbar Color Generation
 // --------------------------------------------------
 
-$navbar-ios-height:                        4.4rem !default;
+@each $color-name, $color-value in $colors-ios {
 
+  .toolbar[#{$color-name}] {
+
+    .toolbar-background {
+      background-color: $color-value;
+      border-color: darken($color-value, 10%);
+    }
+
+    .toolbar-title {
+      color: inverse($color-value);
+    }
+  }
 
-ion-navbar-section {
-  min-height: $navbar-ios-height;
-}
-
-.back-button {
-  transform: translateZ(0px);
 }

ionic/components/toolbar/modes/md.scss

@@ -1,5 +1,6 @@
 @import "../../../globals.md";
 @import "../toolbar";
+@import "../toolbar-button";
 
 // Material Design Toolbar
 // --------------------------------------------------
@@ -107,3 +108,23 @@ ion-navbar-section {
   font-weight: normal;
   text-align: left;
 }
+
+
+
+// Material Design Toolbar Color Generation
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-md {
+
+  .toolbar[#{$color-name}] {
+
+    .toolbar-background {
+      background-color: $color-value;
+    }
+
+    .toolbar-title {
+      color: inverse($color-value);
+    }
+  }
+
+}

ionic/components/toolbar/toolbar-button.scss

@@ -0,0 +1,68 @@
+@import "../../globals.core";
+
+// Toolbar Buttons
+// --------------------------------------------------
+
+.bar-button {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  text-align: center;
+  text-transform: none;
+
+  vertical-align: top; // the better option for most scenarios
+  vertical-align: -webkit-baseline-middle; // the best for those that support it
+
+  cursor: pointer;
+  @include user-select-none();
+  @include appearance(none);
+}
+
+
+// Menu Toggle
+// --------------------------------------------------
+
+.toolbar [menu-toggle] {
+  display: flex;
+  align-items: center;
+  margin: 0 6px;
+  padding: 0;
+  min-width: 36px;
+  order: map-get($toolbar-order, menu-toggle-primary);
+  box-shadow: none;
+}
+
+.toolbar [menu-toggle][secondary] {
+  order: map-get($toolbar-order, menu-toggle-secondary);
+}
+
+.toolbar [menu-toggle] icon {
+  padding: 0 6px;
+  font-size: 2.8rem;
+}
+
+
+// Back Button
+// --------------------------------------------------
+
+.back-button {
+  order: map-get($toolbar-order, backButton);
+
+  display: none;
+  &.show-back-button {
+    display: flex;
+  }
+}
+
+.back-button-text {
+  display: flex;
+  align-items: center;
+}

ionic/components/toolbar/toolbar.scss

@@ -5,11 +5,11 @@
 
 $toolbar-order: (
   backButton: 10,
-  menu-toggle-primary: 20,
+  menu-toggle-left: 20,
   content: 30,
-  primary: 40,
-  secondary: 50,
-  menu-toggle-secondary: 60,
+  left: 40,
+  right: 50,
+  menu-toggle-right: 60,
 );
 
 
@@ -37,7 +37,6 @@ $toolbar-order: (
   z-index: $z-index-toolbar-background;
 
   border: 0;
-
   pointer-events: none;
 }
 
@@ -65,34 +64,15 @@ ion-title {
   overflow: hidden;
 }
 
-.toolbar [menu-toggle] {
-  display: flex;
-  align-items: center;
-  margin: 0 6px;
-  padding: 0;
-  min-width: 36px;
-  order: map-get($toolbar-order, menu-toggle-primary);
-  box-shadow: none;
-}
-
-.toolbar [menu-toggle][secondary] {
-  order: map-get($toolbar-order, menu-toggle-secondary);
-}
-
-.toolbar [menu-toggle] icon {
-  padding: 0 6px;
-  font-size: 2.8rem;
-}
-
 ion-nav-items {
   display: block;
   margin: 0 0.2rem;
   pointer-events: none;
-  order: map-get($toolbar-order, primary);
+  order: map-get($toolbar-order, left);
 }
 
 ion-nav-items[secondary] {
-  order: map-get($toolbar-order, secondary);
+  order: map-get($toolbar-order, right);
 }
 
 ion-nav-items button,
@@ -115,43 +95,3 @@ ion-nav-items,
 ion-navbar.toolbar {
   display: flex;
 }
-
-.back-button {
-  order: map-get($toolbar-order, backButton);
-
-  display: none;
-  &.show-back-button {
-    display: flex;
-  }
-}
-
-.back-button-text {
-  display: flex;
-  align-items: center;
-}
-
-
-
-// Toolbar Color Generation
-// --------------------------------------------------
-
-@each $color-name, $color-value in $colors {
-
-  .toolbar[#{$color-name}] {
-
-    .toolbar-background {
-      background-color: $color-value;
-      border-color: darken($color-value, 10%);
-    }
-
-    .toolbar-title,
-    button,
-    [button],
-    button:hover:not(.disable-hover),
-    [button]:hover:not(.disable-hover),
-    a {
-      color: inverse($color-value);
-    }
-  }
-
-}