bug(button): properly align text in fab buttons (#5634)

Author: amcdnl

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

@@ -5,9 +5,14 @@
     <button md-fab>
       <md-icon class="md-24">check</md-icon>
     </button>
+    <button md-fab>Btn</button>
+    <a md-fab routerLink=".">Link</a>
+    <a md-fab routerLink="."><md-icon class="md-24">check</md-icon></a>
     <button md-mini-fab>
       <md-icon class="md-24">check</md-icon>
     </button>
+    <button md-mini-fab>Btn</button>
+    <a md-mini-fab routerLink=".">Link</a>
   </section>
 
   <section>

src/lib/button/_button-base.scss

@@ -104,8 +104,9 @@ $mat-mini-fab-padding: 8px !default;
     @include mat-elevation(12);
   }
 
-  i, .mat-icon {
+  .mat-button-wrapper {
     padding: $padding 0;
+    display: inline-block;
     line-height: $mat-icon-button-line-height;
   }
 }

src/lib/button/_button-theme.scss

@@ -107,7 +107,7 @@
 }
 
 @mixin mat-button-typography($config) {
-  .mat-button, .mat-raised-button, .mat-icon-button {
+  .mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab {
     font: {
       family: mat-font-family($config, button);
       size: mat-font-size($config, button);