Skip to content

Commit f67ffa5

Browse files
authored
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.
1 parent e74065a commit f67ffa5

File tree

1 file changed

+3
-1
lines changed

1 file changed

+3
-1
lines changed

src/material/button/_button-base.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,10 @@
4444

4545
// The content should appear over the state and ripple layers, otherwise they may adversely affect
4646
// the accessibility of the text content.
47-
.mdc-button__label {
47+
.mdc-button__label,
48+
.mat-icon {
4849
z-index: 1;
50+
position: relative;
4951
}
5052

5153
// The focus indicator should match the bounds of the entire button.

0 commit comments

Comments
 (0)