Some Material Icons render weird on windows 10

[maxmedina05]

OS: Windows 10 Pro (x64) 10.0.18362 Build 18362 Browser: Chrome v83.0.4103.116 (64-Bit)

Some icons look very different on windows to how they look on MacOS or Linux. The ones that spotted are the following:

• list
• timeline
• dynamic_feed
• directions_railway
• local_fire_department

[thuyet-pham-tr]

This issue seems oddly specific to Windows 10 (works fine on macOS). I was able to verify using a variety of browsers.

• Chrome 85.0.4183.102 (64-bit)
• Microsoft Edge 44.17763.831.0
• Firefox 80.0.1 (64-bit)

I also noticed a few other icons that seemed to have the same issue.

• info_outline
• system_update_alt

[thescientist13]

@maxmedina05 Did you see the v4.0.0 release by chance? It has updated icons. 🤞

Our team is going to try those out and see if it resolves the issue. (bonus is now these fonts can come from npm! 🎉 )

[henrydaggett]

Problem still persists in v4, but seems to be limited just to the sharp icon variants.

[ilyakonrad]

Facing this issue with round icons as well (group, timeline, list, local_fire_department) using

<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Two+Tone" rel="stylesheet" />

Windows 10 Enterprise, 1703, 15063.296 Chrome 87.0.4280.88

[RoelN]

Confirmed on Windows 10 in Chrome 87 and Edge 87. Should be fixed in the font production process.

[SBDMattGump]

Chrome: Version 88.0.4324.146 Windows 10 Enterprise: Version 1809

Wanted to specifically call out the Sharp list icon as well.

[RamonvdW]

The problem with the semi-transparent icons is still present in the rounded icon set. Affected are: list, timeline, directions_railway, local_fire_department.

Visible on: Windows 10, Chrome 89.0. Hardware accelleration disabled. No visible on: Linux Debian 10, Chrome 89.0

Not sure if the "live fonts" provided by static.google.com and visible on https://material.io/resources/icons/?icon=list&style=round are actually the same as present in this repository.

[tphinney]

Is this all better now? Should definitely be better for the variable font, but hoping that the static (non-variable) fonts are good now as well.

[RamonvdW]

I checked https://material.io/resources/icons/?icon=list&style=round and the problem is still showing (Win10, Chrome 100.0.4896.127) Is the site showing the latest?

[tphinney]

I believe this is being caused by duplicated sets of outlines. That is, in the produced TTF (and almost certainly in the SVG source upstream from it), for just a few glyphs, for that glyph its outlines are duplicated and overlaid on top of themselves. Very likely this is the case in the SVG source, but causes no problems there.

For fonts, in some font rasterizing environments this does not cause problems (macOS, iOS), but in some it is a Very Bad Thing indeed.

The good news is, we can test for this in an automated fashion, ID any and all such glyphs in the 4 fonts, and then fix them. In fact, it looks like my buddy Vassil has already got a check for this as part of another script that is doing something else (in producing fancy variable-font glyphs), we can pull out and repurpose that bit of code...

(edit: fixed typo, for anyone wondering what a “big of code” was)

[tphinney]

Note that this is NOT a problem in Material Symbols, just Material Icons.

Checked for duplicated contours, and came up with this list of likely problem glyphs across the various fonts, which includes almost all the glyphs discussed previously in this thread (except /group)

Regular: uniF1B0 (do_not_touch) uniF1C1 (smart_button)

Outlined: dynamic_feed input list rounded_corner slow_motion_video smart_button swap_vert system_update_alt

Round: directions_railway list local_fire_department rounded_corner timeline

Sharp: dynamic_feed info_outline input link list rounded_corner slow_motion_video system_update_alt tab timeline toc

Two-Tone: _13mp dynamic_feed hourglass_bottom hourglass_top kitchen list medication_liquid rounded_corner smart_button

[tphinney]

@EsoFromTheEast So, I believe the problem is duplicated contours in the SVG source files for the specified glyphs. Is this something you can address, or is it upstream from you? I think even a text editor could be used for this purpose, given that we are talking about deleting entire contours it is not too complex. But there are ~ 30 glyphs to be fixed.