google / material-design-icons

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

view_column icon does not align with integer pixels #1731

Open leosdad opened 1 month ago

leosdad commented 1 month ago

Contrary to the older Material Icons, the filled Material Symbols icon does not align with integer pixels when rendered at 24 px width. The screenshot shows how it looks in Figma at 100%:

image

A zoomed view shows the misalignment:

image

tphinney commented 1 month ago

tl;dr: as designed

So, yes, this sparked LENGTHY discussions when we were first working on the Material Symbols font a couple years ago. (Note to other viewers: the icon presented is the “Sharp” version, but the problem exists regardless.)

You did not draw the 24x24 box around the old Material Icons version. If you had, you might have noticed that… it is not centered in its box! So it has a problem, it is just a different problem.

There are a lot of tradeoffs. If the main design had 2 px outside margins, 1 px between columns, with columns 6 px wide, that would have worked, but the default (unfilled) version would have been a box shape that was wider than standard—which would have been my preferred compromise choice, but not the designer’s.

leosdad commented 1 month ago

tl;dr: as designed So, yes, this sparked LENGTHY discussions...

Fully understood. Yes, the old icon is not centered. I just tried your description and I suppose I'd vote for it too. IMHO a better solution would be this:

image

i.e. 3 px wide bars. At least for the filled version it would work better. It's fully simmetrical and 100% on the grid.

leosdad commented 1 month ago

Or this:

image