fix(material-experimental/mdc-button): don't apply styles to icons within the text label (#24929)

* fix(material-experimental/mdc-button): don't apply styles to icons
within the text label

* fix(material-experimental/mdc-button): address comments

(cherry picked from commit 59d75c3)

Author: mmalerba

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

@@ -69,7 +69,7 @@
 // However, Angular Material expects a `mat-icon` instead. The following
 // mixins will style the icons appropriately.
 .mat-mdc-button {
-  .mat-icon {
+  & > .mat-icon {
     @include mdc-button-base.icon();
   }
   .mdc-button__label + .mat-icon {
@@ -81,7 +81,7 @@
 .mat-mdc-raised-button,
 .mat-mdc-outlined-button {
   // Icons inside contained buttons have different styles due to increased button padding
-  .mat-icon {
+  & > .mat-icon {
     @include mdc-button-base.icon();
     @include mdc-button-base.icon-contained();
   }

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

@@ -70,8 +70,8 @@
 .mat-mdc-extended-fab {
   @include mdc-fab.extended_($query: mdc-helpers.$mat-base-styles-query);
 
-  // stylelint-disable-next-line selector-class-pattern
-  .mat-icon, .material-icons {
+  & > .mat-icon,
+  & > .material-icons {  // stylelint-disable-line selector-class-pattern
     @include mdc-fab.extended-icon-padding(
       mdc-fab.$extended-icon-padding,
       mdc-fab.$extended-label-padding