Skip to content

Commit

Permalink
fix(icon): fix uncentered icons when using WCAG text spacing overrides
Browse files Browse the repository at this point in the history
If you were using `font-size`, you may need to change it to `--md-icon-size` if icons shift.

PiperOrigin-RevId: 607096212
  • Loading branch information
asyncLiz authored and Copybara-Service committed Feb 14, 2024
1 parent 8d2b644 commit b23e321
Showing 1 changed file with 10 additions and 0 deletions.
10 changes: 10 additions & 0 deletions icon/internal/_icon.scss
Expand Up @@ -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;
Expand Down

0 comments on commit b23e321

Please sign in to comment.