Material-design-icons: small fontsize cut off top and bottom of icon

[morriq]

Hello,

I'm sure someone reports it but I can not find it..
Nevertheless some icons are rendering badly in small sizes on chrome, such as help_outline.
Reproduction:

1 ) open in chrome https://material.io/icons/
2) find help_outline and change it size on font-size 19px;

[TheChrisPratt]

Not sure what you're seeing but it looks fine to me:
[image: Inline image 1]

On Tue, Sep 12, 2017 at 1:48 AM, Dawid Winiarczyk [e-mail]
wrote:

Hello,

I'm sure someone reports it but I can not find it..
Nevertheless some icons are rendering badly in small sizes on chrome, such
as help_outline.
Reproduction:

1 ) open in chrome https://material.io/icons/
2) find help_outline and change it size on font-size 19px;

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/google/material-design-icons/issues/679, or mute the
thread
https://github.com/notifications/unsubscribe-auth/AAtIJlcmeASznxYyWC-KowmGsOJ1uKU-ks5shkVTgaJpZM4PUTuA
.

[brauchle]

same problem here.
If I open the browser on my 3k screen it looks fine...
Here's a screenshot: https://image.ibb.co/bu2NEQ/Unbenannt.png

[morriq]

exactly like on @brauchle picture 👍

[pauln]

This seems to affect all circular icons. Font sizes below about 21px cause rendering issues on Windows (Chrome and Firefox, at least) - but other platforms seem to be fine (Android Oreo and Mac OS, at least); 18px (which is one of the recommended sizes) causes the top and bottom to be cropped off / "flattened" as per @brauchle's screenshot, and ~16px and below cause the circle's outline to get pretty gnarly.

This doesn't appear to be strictly related to the font size, as zooming the browser in/out results in the rendering glitches going away (if you zoom in) or appearing (on larger font sizes once the visual size gets down to the troublesome size). Setting the CSS zoom to an appropriate figure (such as 1.2 for an 18px icon) also clears up the rendering glitch.

Although the rotation hack mentioned in #648 works for circular icons, it makes (some) non-circular images look much worse - for example, the menu icon's 3 bars all become different thicknesses.

[jestelle]

I mentioned this in #648, but I'll also mention it here.

We can only recommend our icon font if you're using it at 24px.

I realize our documentation (http://google.github.io/material-design-icons/) does not make that point strongly enough, so we'll take it as a bug to update our documentation to more clearly identify best practices.

As well as eventually make improvements to our icon font so it better scales to all the recommended sizes.

[Dakshank]

Facing the same issue using some fonts. They look not clear like broken. especially below 21px font size in windows.

[Harry0411]

@jestelle: It's been more than a year the bug is raised and still, we are seeing the pixelate or blur issue on the icon. I think all are facing the same issue.

[bergamin]

No news on fixing this? We are currently using SVGs to render our icons because of this.

Also it seems that it only affects the normal weight of the icon. If I use it bold, the issue goes away. In the image below (on Chrome), I use font-size: large:

1 - SVG
2 - mat-icon
3 - mat-icon bold

Edit: the bug only happens on 100% zoom. Anything more or less than that, it gets round again

[AdamGaskins]

I never noticed this issue because I have a retina display, but my boss (and most of our users) do not, so one of the recommended sizes of 18px does not display properly.

You can even see this issue if you visit the official docs with your screen scaling set to 100%: https://google.github.io/material-design-icons/#sizing

I get it, it's a hard issue to fix. Can we at least get a documentation update? Maybe a little notice, or at least removing 18px as a supported option.