google / google/fonts

Material Icons text= Data

Open
#3,315 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
HTML
Stars
20.5k
Forks
2.9k
Avg merge
1d 22h
Merged PRs (30d)
96

Description

When specifying icons in the `text=` value for Material Icons, the font file loaded is missing codepoint data, and contains icons other than the ones specified.

I'm not sure if I'm missing information or if this is a bug. Do you have any documentation on how `text=` should be used for Material Icons specifically? Or if it is a bug, is there a temporary workaround you would recommend)

Changing the pseudoelement content to `"chevron_right"` works, but it also gets read out by most screen readers (whereas "\E5CC" is ignored, or at least is more likely to be ignored). The icon is shown in a pseudoelement on a link, so we can't use `aria-hidden` on it.

## How to Reproduce
Using this embed:
```


```
And this style:
```
h1 a:after {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
direction: ltr;
text-rendering: optimizeLegibility;
font-feature-settings: liga;
content: "\E5CC";
position: relative;
display: inline;
}
```

Example screenshot of the font embed with the text value. Icons displayed with the icon name are visible, including one that isn't listed in the API url. But icon in the pseudoelement displays as tofu.

## Expected Behavior

1. The file should contain only the icons specified in the `text` value
2. Setting the codepoint of an icon in a pseudoelement (or wherever else it's supported) should result in the icon being shown

The example style works if you load the full font file (``)

Screenshot of the same example page, this time with no text in the URL, and the chevron icon visible in the pseudoelement

## Current Behavior

1. The file contains some other icons in addition to the ones specifically specified (I'm guessing it's related to what characters are in the icon names, but maybe not)
2. The codepoint can be used to display the icon

## Other Notes
I used fontdrop.info to compare the woff files returned by the full icon set, and by the limited text set. The full icon set had unicode data for every character, and the limited text set had unicode data only for the invisible characters in the set. Also, fontdrop confirmed that the limited set included 477 glyphs, most of which were not listed in the `text` value.

Hopefully that helps. I'm also not sure if the invisible characters should even be there, especially since there seem to be a lot of them

The limited icon set in font drop, showing 16 empty glyphs before the icons start. One empty glyph has a tooltip that says 'Glyph:, Unicode: 007A'

The limited icon set in font drop. A tooltip for an icon glyph says: 'Glyph: , Unicode: None'.

Full icon set in fontdrop. The tooltip for one of the icon glyphs says 'Glyph: , Unicode: E150'

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.