dynamically add button classes from attributes

ionic/components/button/button.ts

@@ -40,6 +40,7 @@ export class Button {
     renderer: Renderer,
     @Attribute('type') type: string
   ) {
+
     let element = elementRef.nativeElement;
 
     if (config.get('hoverCSS') === false) {
@@ -51,7 +52,9 @@ export class Button {
       return;
     }
 
-    renderer.setElementAttribute(elementRef, 'class', 'button');
+    renderer.setElementClass(elementRef, 'button', true);
+
+    this.attrToClass(renderer, elementRef);
 
     if (type) {
       renderer.setElementAttribute(elementRef, type, '');
@@ -95,7 +98,47 @@ export class Button {
 
   }
 
+  attrToClass(renderer, elementRef) {
+    // looping through native dom attributes, eww
+    // https://github.com/angular/angular/issues/1818
+
+    let element = elementRef.nativeElement;
+    let attrs = element.attributes;
+    let btnAttrs = [];
+
+    BUTTON_SIZE_ATTRS.forEach(buttonAttr => {
+      if (element.hasAttribute(buttonAttr)) {
+        renderer.setElementClass(elementRef, 'button-' + buttonAttr, true);
+      }
+    });
+
+    BUTTON_TYPE_ATTRS.forEach(buttonAttr => {
+      if (element.hasAttribute(buttonAttr)) {
+        renderer.setElementClass(elementRef, 'button-' + buttonAttr, true);
+        btnAttrs.push(buttonAttr);
+      }
+    });
+
+    let attrName;
+    for (let i = 0, l = attrs.length; i < l; i++) {
+      attrName = attrs[i].name;
+      if (attrs[i].value === '' && COMMON_HTML_ATTR.test(attrName) !== true && BUTTON_TYPE_ATTRS.indexOf(attrName) < 0 && BUTTON_SIZE_ATTRS.indexOf(attrName) < 0) {
+        if (btnAttrs.length) {
+          btnAttrs.forEach(buttonAttr => {
+            renderer.setElementClass(elementRef, 'button-' + buttonAttr + '-' + attrName, true);
+          });
+        } else {
+          renderer.setElementClass(elementRef, 'button-' + attrName, true);
+        }
+      }
+    }
+  }
+
 }
 
+const COMMON_HTML_ATTR = /id|class|type|href|ng-/;
+const BUTTON_TYPE_ATTRS = ['block', 'full', 'round', 'clear', 'outline'];
+const BUTTON_SIZE_ATTRS = ['large', 'small'];
+
 const TEXT = 1;
 const ICON = 2;

ionic/components/button/modes/ios.scss

@@ -26,7 +26,6 @@ $button-ios-border-radius:            4px !default;
   padding: $button-ios-padding;
 
   min-height: $button-ios-height;
-  line-height: $button-ios-height;
   font-size: $button-ios-font-size;
 
   border-radius: $button-ios-border-radius;

ionic/components/button/modes/md.scss

@@ -38,7 +38,6 @@ $button-md-hover-opacity:                  0.8 !default;
   padding: $button-md-padding;
 
   min-height: $button-md-height;
-  line-height: $button-md-height;
   font-size: $button-md-font-size;
 
   border: 0;

ionic/components/icon/icon.ts

@@ -6,8 +6,8 @@ import {Config} from '../../config/config';
 /**
  * @name Icon
  * @description
- * Icons can be used on their own, or inside of a number of Ionic components. For a full list of available icons, 
- * check out the [Ionicons resource docs](../../../../../resources/ionicons). 
+ * Icons can be used on their own, or inside of a number of Ionic components. For a full list of available icons,
+ * check out the [Ionicons resource docs](../../../../../resources/ionicons).
  *
  * @property {boolean} [is-active] - Whether or not the icon is active. Icons that are not active will use an outlined version of the icon.
  * If there is not an outlined version for the particular icon, it will use the default (full) version.
@@ -53,7 +53,7 @@ export class Icon {
 
     } else if (!this.name) {
       // looping through native dom attributes, eww
-      // https://github.com/angular/angular/issues/3961
+      // https://github.com/angular/angular/issues/1818
       for (let i = 0, l = ele.attributes.length; i < l; i++) {
         if (ele.attributes[i].value === '' && /_|item-|is-active|large|small|class/.test(ele.attributes[i].name) !== true) {
           this.name = ele.attributes[i].name;