fix(button): ensure icons are aligned vertically. (#1736)

* The icon buttons are never a perfect circle, because they can shrink (depending on siblings).
   In Material 1 we solved this by adding `min-width/height`, but having flex-shrink is more appropriate here (it allows developers to easily overwrite height / width)

* Sets the line-height for icons only to `i` and `md-icon` elements (as same as for fab buttons)

Fixes #1093.

Author: devversion

src/lib/button/_button-base.scss

@@ -88,12 +88,16 @@ $md-mini-fab-padding: 8px !default;
 @mixin md-fab($size, $padding) {
   @extend %md-raised-button;
 
+  // Reset the min-width from the button base.
   min-width: 0;
+
   border-radius: $md-fab-border-radius;
   width: $size;
   height: $size;
   padding: 0;
 
+  flex-shrink: 0;
+
   i, md-icon {
     padding: $padding 0;
     line-height: $md-icon-button-line-height;

src/lib/button/button.scss

@@ -35,23 +35,26 @@
 }
 
 [md-icon-button] {
-  min-width: 0;
   padding: 0;
 
+  // Reset the min-width from the button base.
+  min-width: 0;
+
   width: $md-icon-button-size;
   height: $md-icon-button-size;
 
-  line-height: $md-icon-button-line-height;
+  flex-shrink: 0;
+
+  line-height: $md-icon-button-size;
   border-radius: $md-icon-button-border-radius;
 
-  .md-button-wrapper > * {
+  i, md-icon {
     line-height: $md-icon-button-line-height;
-    vertical-align: middle;
   }
 }
 
 // The text and icon should be vertical aligned inside a button
-[md-button], [md-raised-button] {
+[md-button], [md-raised-button], [md-icon-button] {
   .md-button-wrapper > * {
     vertical-align: middle;
   }