button icons

ionic/components/button/button-fab.scss

@@ -0,0 +1,51 @@
+
+// FABulous Buttons (Floating Action Button from material)
+// --------------------------------------------------
+
+$button-fab-size:                 56px;
+
+
+button,
+[button] {
+
+  &[fab] {
+    position: absolute;
+    width: $button-fab-size;
+    height: $button-fab-size;
+    line-height: $button-fab-size;
+    min-width: 0;
+    vertical-align: middle;
+
+    border-radius: 50%;
+    background-clip: padding-box;
+
+    overflow: hidden;
+
+    transition: .2s linear;
+    transition-property: background-color;
+
+    font-size: 14px;
+
+    &[fab-center] {
+      left: 50%;
+      margin-left: -$button-fab-size / 2;
+    }
+    &[fab-top] {
+      top: 16px;
+    }
+    &[fab-right] {
+      right: 16px;
+    }
+    &[fab-bottom] {
+      bottom: 16px;
+    }
+    &[fab-left] {
+      left: 16px;
+    }
+
+    .icon {
+      flex: 1;
+    }
+  }
+
+}

ionic/components/button/button-icon.scss

@@ -0,0 +1,43 @@
+
+// Button Icons
+// --------------------------------------------------
+
+
+button,
+[button] {
+
+  &.icon-left icon {
+    margin-left: -0.6rem;
+    padding-right: 0.6rem;
+  }
+
+  &.icon-right icon {
+    margin-right: -0.6rem;
+    padding-left: 0.6rem;
+  }
+
+  &.icon-only {
+    padding: 0;
+
+    icon {
+      padding: 0 1.6rem;
+    }
+  }
+
+  icon {
+    background: none;
+    border: none;
+  }
+
+  &[large] icon {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  &[small] icon {
+    margin-left: 0;
+    margin-right: 0;
+    font-size: 1.4em;
+  }
+
+}

ionic/components/button/button.scss

@@ -8,19 +8,14 @@ $button-padding:                  0 2rem !default;
 $button-height:                   4.4rem !default;
 $button-border-width:             1px !default;
 $button-border-radius:            4px !default;
-$button-icon-size:                2.5rem !default;
 
 $button-large-font-size:          2rem !default;
 $button-large-height:             5.4rem !default;
 $button-large-padding:            1.4rem !default;
-$button-large-icon-size:          3.6rem !default;
 
 $button-small-font-size:          1.3rem !default;
 $button-small-height:             2.8rem !default;
 $button-small-padding:            1.1rem !default;
-$button-small-icon-size:          2.1rem !default;
-
-$button-fab-size:                 56px;
 
 $button-round-border-radius:      64px !default;
 $button-round-padding:            0 2.6rem !default;
@@ -62,7 +57,7 @@ button,
   border: 1px solid #ccc;
   padding: $button-padding;
   min-height: $button-height;
-  // Default button has no background
+
   background: transparent;
 
   text-align: center;
@@ -70,21 +65,11 @@ button,
   border: transparent;
   border-radius: $button-border-radius;
 
-  &[icon] {
-    font-size: $button-icon-size;
-    background: none;
-    border: none;
-  }
-
   &[large] {
     padding: 0 $button-large-padding;
     min-width: ($button-large-padding * 4);
     min-height: $button-large-height;
     font-size: $button-large-font-size;
-
-    &[icon] {
-      font-size: $button-large-icon-size;
-    }
   }
 
   &[small] {
@@ -92,10 +77,6 @@ button,
     min-width: ($button-small-padding * 3);
     min-height: $button-small-height;
     font-size: $button-small-font-size;
-
-    &[icon] {
-      font-size: $button-small-icon-size;
-    }
   }
 
 
@@ -154,47 +135,6 @@ button,
     padding: $button-round-padding;
   }
 
-  // FABulous buttons (Floating action button from material)
-
-  &[fab] {
-    position: absolute;
-    width: $button-fab-size;
-    height: $button-fab-size;
-    line-height: $button-fab-size;
-    min-width: 0;
-    vertical-align: middle;
-
-    border-radius: 50%;
-    background-clip: padding-box;
-
-    overflow: hidden;
-
-    transition: .2s linear;
-    transition-property: background-color;
-
-    font-size: 14px;
-
-    &[fab-center] {
-      left: 50%;
-      margin-left: -$button-fab-size/2;
-    }
-    &[fab-top] {
-      top: 16px;
-    }
-    &[fab-right] {
-      right: 16px;
-    }
-    &[fab-bottom] {
-      bottom: 16px;
-    }
-    &[fab-left] {
-      left: 16px;
-    }
-
-    .icon {
-      flex: 1;
-    }
-  }
 }
 
 

ionic/components/button/button.ts

@@ -9,14 +9,20 @@ import * as dom  from '../../util/dom';
 @Directive({
   selector: 'button,[button]',
   host: {
-    '[class.icon-left]': 'icon.iconLeft',
-    '[class.icon-right]': 'icon.iconRight',
-    '[class.icon-only]': 'icon.iconOnly'
+    '[class.icon-left]': 'iconLeft',
+    '[class.icon-right]': 'iconRight',
+    '[class.icon-only]': 'iconOnly'
   }
 })
 export class Button {
+  constructor() {
+    this.iconLeft = this.iconRight = this.iconOnly = false;
+  }
+
   registerIcon(icon) {
-    this.icon = icon;
+    this.iconLeft = icon.iconLeft;
+    this.iconRight = icon.iconRight;
+    this.iconOnly = icon.iconOnly;
   }
 }
 

ionic/components/button/extensions/material.scss

@@ -33,15 +33,15 @@ $button-material-border-radius:            3px !default;
   }
 
   &[icon] {
-    font-size: $button-icon-size;
+    //font-size: $button-icon-size;
   }
 
   &[large][icon] {
-    font-size: $button-large-icon-size;
+    //font-size: $button-icon-large-size;
   }
 
   &[small][icon] {
-    font-size: $button-small-icon-size;
+    //font-size: $button-icon-small-size;
   }
 
   &[full] {

ionic/ionic.scss

@@ -21,6 +21,8 @@
   "components/aside/aside",
   "components/badge/badge",
   "components/button/button",
+  "components/button/button-icon",
+  "components/button/button-fab",
   "components/card/card",
   "components/checkbox/checkbox",
   "components/content/content",
@@ -49,7 +51,6 @@
 @import
   "components/toolbar/extensions/ios",
   "components/action-menu/extensions/ios",
-  "components/button/extensions/ios",
   "components/card/extensions/ios",
   "components/checkbox/extensions/ios",
   "components/content/extensions/ios",