fix(material-experimental/mdc-button): fix positioning of icons in text buttons (#20963)

* fix(material-experimental/mdc-button): fix positioning of icons in text
buttons

* fixup! fix(material-experimental/mdc-button): fix positioning of icons in text buttons

(cherry picked from commit 933e1e3)

Author: mmalerba

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

@@ -26,6 +26,11 @@ <h4 class="demo-section-header">Text Buttons [mat-button]</h4>
     <button mat-button color="accent">accent</button>
     <button mat-button color="warn">warn</button>
     <button mat-button disabled>disabled</button>
+    <button mat-button>
+      <mat-icon>home</mat-icon>
+      with icons
+      <mat-icon>favorite</mat-icon>
+    </button>
   </section>
 
   <h4 class="demo-section-header">Raised Buttons [mat-raised-button]</h4>
@@ -35,6 +40,11 @@ <h4 class="demo-section-header">Raised Buttons [mat-raised-button]</h4>
     <button mat-raised-button color="accent">accent</button>
     <button mat-raised-button color="warn">warn</button>
     <button mat-raised-button disabled>disabled</button>
+    <button mat-raised-button>
+      <mat-icon>home</mat-icon>
+      with icons
+      <mat-icon>favorite</mat-icon>
+    </button>
   </section>
 
   <h4 class="demo-section-header">Stroked Buttons [mat-stroked-button]</h4>
@@ -44,6 +54,11 @@ <h4 class="demo-section-header">Stroked Buttons [mat-stroked-button]</h4>
     <button mat-stroked-button color="accent">accent</button>
     <button mat-stroked-button color="warn">warn</button>
     <button mat-stroked-button disabled>disabled</button>
+    <button mat-stroked-button>
+      <mat-icon>home</mat-icon>
+      with icons
+      <mat-icon>favorite</mat-icon>
+    </button>
   </section>
 
   <h4 class="demo-section-header">Flat Buttons [mat-flat-button]</h4>
@@ -53,6 +68,11 @@ <h4 class="demo-section-header">Flat Buttons [mat-flat-button]</h4>
     <button mat-flat-button color="accent">accent</button>
     <button mat-flat-button color="warn">warn</button>
     <button mat-flat-button disabled>disabled</button>
+    <button mat-flat-button>
+      <mat-icon>home</mat-icon>
+      with icons
+      <mat-icon>favorite</mat-icon>
+    </button>
   </section>
 
   <h4 class="demo-section-header"> Icon Buttons [mat-icon-button]</h4>

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

@@ -58,6 +58,11 @@ <h4 class="demo-section-header">Text Buttons [mat-button]</h4>
     <button mat-button color="accent">accent</button>
     <button mat-button color="warn">warn</button>
     <button mat-button disabled>disabled</button>
+    <button mat-button>
+      <mat-icon>home</mat-icon>
+      with icons
+      <mat-icon iconPositionEnd>favorite</mat-icon>
+    </button>
   </section>
 
   <h4 class="demo-section-header">Raised Buttons [mat-raised-button]</h4>
@@ -67,6 +72,11 @@ <h4 class="demo-section-header">Raised Buttons [mat-raised-button]</h4>
     <button mat-raised-button color="accent">accent</button>
     <button mat-raised-button color="warn">warn</button>
     <button mat-raised-button disabled>disabled</button>
+    <button mat-raised-button>
+      <mat-icon>home</mat-icon>
+      with icons
+      <mat-icon iconPositionEnd>favorite</mat-icon>
+    </button>
   </section>
 
   <h4 class="demo-section-header">Stroked Buttons [mat-stroked-button]</h4>
@@ -76,6 +86,11 @@ <h4 class="demo-section-header">Stroked Buttons [mat-stroked-button]</h4>
     <button mat-stroked-button color="accent">accent</button>
     <button mat-stroked-button color="warn">warn</button>
     <button mat-stroked-button disabled>disabled</button>
+    <button mat-stroked-button>
+      <mat-icon>home</mat-icon>
+      with icons
+      <mat-icon iconPositionEnd>favorite</mat-icon>
+    </button>
   </section>
 
   <h4 class="demo-section-header">Flat Buttons [mat-flat-button]</h4>
@@ -85,6 +100,11 @@ <h4 class="demo-section-header">Flat Buttons [mat-flat-button]</h4>
     <button mat-flat-button color="accent">accent</button>
     <button mat-flat-button color="warn">warn</button>
     <button mat-flat-button disabled>disabled</button>
+    <button mat-flat-button>
+      <mat-icon>home</mat-icon>
+      with icons
+      <mat-icon iconPositionEnd>favorite</mat-icon>
+    </button>
   </section>
 
   <h4 class="demo-section-header"> Icon Buttons [mat-icon-button]</h4>

src/material-experimental/mdc-button/button.html

@@ -5,15 +5,15 @@
 
 <span class="mdc-button__label"><ng-content></ng-content></span>
 
+<ng-content select=".material-icons[iconPositionEnd], mat-icon[iconPositionEnd]">
+</ng-content>
+
 <!--
   The indicator can't be directly on the button, because MDC uses ::before for high contrast
   indication and it can't be on the ripple, because it has a border radius and overflow: hidden.
 -->
 <span class="mat-mdc-focus-indicator"></span>
 
-<ng-content select=".material-icons[iconPositionEnd], mat-icon[iconPositionEnd]">
-</ng-content>
-
 <span matRipple class="mat-mdc-button-ripple"
      [matRippleAnimation]="_rippleAnimation"
      [matRippleDisabled]="_isRippleDisabled()"

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

@@ -10,6 +10,21 @@
 .mat-mdc-button, .mat-mdc-unelevated-button, .mat-mdc-raised-button, .mat-mdc-outlined-button {
   @include _mat-button-interactive();
   @include _mat-button-disabled();
+
+  // MDC expects button icons to contain this HTML content:
+  // ```html
+  //   <span class="mdc-button__icon material-icons">favorite</span>
+  // ```
+  // However, Angular Material expects a `mat-icon` instead. The following
+  // will extend the `mdc-button__icon` styling to the mat icon. Note that
+  // the extended styles inherently only match icons that nest themselves in
+  // a parent `mdc-button`.
+  //
+  // TODO(mmalerba): Have MDC create a mixin for this so we don't have to rely on extending their
+  //  class.
+  .mat-icon {
+    @extend .mdc-button__icon;
+  }
 }
 
 // Add an outline to make buttons more visible in high contrast mode. Stroked buttons and FABs