fix(material/button): stack icons on top of touch target (angular#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 angular#28888.
DBowen33 · Jul 3, 2024 · 354486e · 354486e
1 parent b2bd055
commit 354486e
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.