fix(material/button): stack icons on top of touch target (#29291)

Some time ago we started stacking the button's text on top of the ripple and touch target for accessibility reasons, but we didn't apply the same to icons. Fixes #28888.
angular · Jun 25, 2024 · f67ffa5 · f67ffa5
1 parent e74065a
commit f67ffa5
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/src/material/button/_button-base.scss b/src/material/button/_button-base.scss
@@ -44,8 +44,10 @@
 
   // The content should appear over the state and ripple layers, otherwise they may adversely affect
   // the accessibility of the text content.
-  .mdc-button__label {
+  .mdc-button__label,
+  .mat-icon {
     z-index: 1;
+    position: relative;
   }
 
   // The focus indicator should match the bounds of the entire button.