search

google / material-design-icons

Material Design icons by Google (Material Symbols)
http://google.github.io/material-design-icons/
Apache License 2.0
50.46k stars 9.56k forks source link

Some Material Icons render weird on windows 10 #1034

Open maxmedina05 opened 4 years ago

maxmedina05 commented 4 years ago

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:

image

thuyet-pham-tr commented 4 years ago

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

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

win10-mat-icons
thescientist13 commented 4 years ago

@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 commented 3 years ago

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

4F945EFA-32C8-41F1-8D3A-13694958A7EB

ilyakonrad commented 3 years ago

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

image

RoelN commented 3 years ago

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

SBDMattGump commented 3 years ago

Chrome: Version 88.0.4324.146 Windows 10 Enterprise: Version 1809

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

Screen Shot 2021-02-04 at 12 09 08 PM
RamonvdW commented 3 years ago

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 commented 2 years ago

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 commented 2 years ago

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?

Schermafbeelding 2022-04-28 144218

tphinney commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@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.