fix(material-experimental/mdc-button): don't apply styles to icons wi…

…thin 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)
angular · Jun 14, 2022 · 5aec60c · 5aec60c
1 parent 0ed9c95
commit 5aec60c
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/src/material-experimental/mdc-button/button.scss b/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();
   }

diff --git a/src/material-experimental/mdc-button/fab.scss b/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