mirror of
https://github.com/material-components/material-web.git
synced 2024-10-26 21:56:56 +03:00
fix(icon): fix uncentered icons when using WCAG text spacing overrides
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:
parent
8d2b6447e4
commit
b23e3218ee
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user