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

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 angular#28888.
crisbeto · Jun 20, 2024 · 1c22f78 · 1c22f78
1 parent b5e3015
commit 1c22f78
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.