Skip to content

Commit 59d75c3

Browse files
authored
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
1 parent f74c449 commit 59d75c3

File tree

2 files changed

+4
-4
lines changed

2 files changed

+4
-4
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
// However, Angular Material expects a `mat-icon` instead. The following
7070
// mixins will style the icons appropriately.
7171
.mat-mdc-button {
72-
.mat-icon {
72+
& > .mat-icon {
7373
@include mdc-button-base.icon();
7474
}
7575
.mdc-button__label + .mat-icon {
@@ -81,7 +81,7 @@
8181
.mat-mdc-raised-button,
8282
.mat-mdc-outlined-button {
8383
// Icons inside contained buttons have different styles due to increased button padding
84-
.mat-icon {
84+
& > .mat-icon {
8585
@include mdc-button-base.icon();
8686
@include mdc-button-base.icon-contained();
8787
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,8 +77,8 @@
7777
.mat-mdc-extended-fab {
7878
@include mdc-fab.extended_($query: mdc-helpers.$mat-base-styles-query);
7979

80-
// stylelint-disable-next-line selector-class-pattern
81-
.mat-icon, .material-icons {
80+
& > .mat-icon,
81+
& > .material-icons { // stylelint-disable-line selector-class-pattern
8282
@include mdc-fab.extended-icon-padding(
8383
mdc-fab.$extended-icon-padding,
8484
mdc-fab.$extended-label-padding

0 commit comments

Comments
 (0)