diff --git a/src/material-experimental/mdc-button/button.scss b/src/material-experimental/mdc-button/button.scss
index c3564c0f2394..e8f2d0b0191c 100644
--- 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
index 52de712f147e..52bd19ecb530 100644
--- a/src/material-experimental/mdc-button/fab.scss
+++ b/src/material-experimental/mdc-button/fab.scss
@@ -77,8 +77,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