fix(button): set vertical alignment for md-button and md-raised-button (#1565)

* Set vertical alignment for md-button and md-raised-button so md-icon inside is correctly aligned

Author: tinayuangao

src/demo-app/button/button-demo.html

@@ -89,4 +89,16 @@
     <a href="http://www.google.com" md-raised-button color="primary">SEARCH</a>
     <button md-raised-button>DANCE</button>
   </section>
+  <section>
+    <button md-raised-button>More<md-icon>more_vert</md-icon></button>
+    <button md-raised-button>Check<md-icon>check</md-icon></button>
+    <button md-raised-button>Check<md-icon class="md-24">favorite</md-icon></button>
+    <button md-raised-button>Last<md-icon>navigate_before</md-icon></button>
+  </section>
+  <section>
+    <button md-button>More<md-icon>more_vert</md-icon></button>
+    <button md-button>Check<md-icon>check</md-icon></button>
+    <button md-button>Check<md-icon class="md-24">favorite</md-icon></button>
+    <button md-button>Last<md-icon>navigate_before</md-icon></button>
+  </section>
 </div>

src/lib/button/button.scss

@@ -47,6 +47,13 @@
   }
 }
 
+// The text and icon should be vertical aligned inside a button
+[md-button], [md-raised-button] {
+  .md-button-wrapper > * {
+    vertical-align: middle;
+  }
+}
+
 // The ripple container should match the bounds of the entire button.
 .md-button-ripple {
   position: absolute;