fix(material-experimental/mdc-button): fix icon styling and add example

Author: annieyw

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

@@ -165,6 +165,11 @@ <h4 class="demo-section-header">Extended Fab Buttons</h4>
       <mat-icon>home</mat-icon>
       Extended
     </button>
+    <button mat-fab [extended]="true">
+      <mat-icon>home</mat-icon>
+      Extended
+      <mat-icon iconPositionEnd>favorite</mat-icon>
+    </button>
   </section>
 
   <h4 class="demo-section-header"> Mini Fab Buttons [mat-mini-fab]</h4>

src/material-experimental/mdc-button/fab.scss

@@ -1,4 +1,5 @@
 @import '@material/fab/mixins.import';
+@import '@material/fab/variables.import';
 @import '@material/button/variables.import';
 @import '@material/theme/variables.import';
 @import '../mdc-helpers/mdc-helpers';
@@ -22,11 +23,27 @@
   //   <span class="mdc-fab__icon material-icons">favorite</span>
   // ```
   // However, Angular Material expects a `mat-icon` instead. The following
-  // will extend the `mdc-fab__icon` styling to the mat icon. Note that
-  // the extended styles inherently only match icons that nest themselves in
-  // a parent `mdc-fab`.
+  // mixin will style the icons appropriately.
   .mat-icon {
-    @extend .mdc-fab__icon;
+    @include mdc-fab-icon_();
+  }
+}
+
+.mat-mdc-extended-fab {
+  @include mdc-fab-extended_();
+
+  .mat-icon {
+    @include mdc-fab-extended-icon-padding($mdc-fab-extended-icon-padding, $mdc-fab-extended-label-padding);
+  }
+
+  // For Extended FAB with text label followed by icon.
+  // We are checking for the a button class because white this is a FAB it uses the same template as button.
+  .mdc-button__label + .mat-icon {
+    @include mdc-fab-extended-icon-padding(
+                    $mdc-fab-extended-icon-padding,
+                    $mdc-fab-extended-label-padding,
+                    $is-icon-at-end: true
+    );
   }
 }