From e5684fe2b7964fc9c614a45568b99f1d24982f3f Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 25 Jun 2024 19:48:12 +0200 Subject: [PATCH] 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. (cherry picked from commit f67ffa5c0f3c45ca4ce1661b8be6356dd615feed) --- src/material/button/_button-base.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/material/button/_button-base.scss b/src/material/button/_button-base.scss index 58d90e9e74d8..cb5de5769cb2 100644 --- 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.