material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-10-26 21:56:56 +03:00
Code Issues Projects Releases Wiki Activity

fix(icon): fix uncentered icons when using WCAG text spacing overrides

Browse Source 
If you were using `font-size`, you may need to change it to `--md-icon-size` if icons shift.

PiperOrigin-RevId: 607096212
This commit is contained in:
Elizabeth Mitchell 2024-02-14 13:55:00 -08:00 committed by Copybara-Service
parent 8d2b6447e4
commit b23e3218ee
1 changed files with 10 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
icon/internal/_icon.scss
View File

@ -40,14 +40,24 @@
font-family: map.get($tokens, 'font');
display: inline-flex;
font-style: normal;
place-items: center;
place-content: center;
line-height: 1;
// Avoid displaying overflowing text if font ligatures have not loaded.
overflow: hidden;
// Changing the letter-spacing for WCAG text spacing compliance will shift
// around font ligature icons, so we revert that to normal. Note: some a11y
// tools use `!important` style injection and may see shifting icons. Actual
// text spacing override implementations in projects should not set
// `letter-spacing` on icons, or revert it with a `text-indent` of the same
// size.
letter-spacing: normal;
text-transform: none;
user-select: none;
white-space: nowrap;
word-wrap: normal;
// Prevent icons from shrinking when placed in a flex container.
flex-shrink: 0;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;