From 98647054190e056b086de317ead25a47ae235033 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Sat, 5 Nov 2016 12:41:12 +0100
Subject: [PATCH] fix(button): ensure icons are aligned vertically.

* The icon buttons are never a perfect cirlce, because they can shrink (depending on siblings).
   In Material 1 we solved this by adding `min-width/height`, but having flex-shrink is more approriated 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.
---
 src/lib/button/_button-base.scss |  4 ++++
 src/lib/button/button.scss       | 13 ++++++++-----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/lib/button/_button-base.scss b/src/lib/button/_button-base.scss
index 33e3cd162b60..52f0d691f2d4 100644
--- a/src/lib/button/_button-base.scss
+++ b/src/lib/button/_button-base.scss
@@ -104,12 +104,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;
diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss
index 92f3278ef83f..42edbd920df0 100644
--- a/src/lib/button/button.scss
+++ b/src/lib/button/button.scss
@@ -33,23 +33,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;
   }