Allow icon sizes smaller than 24px

[chrisvanpatten]

(Note: when I say px in this ticket, I mean "dp" because vectors, but just go with it!)

Google's material design icons are drawn on a 20px by 20px grid. However, they also apply a 2px padding to each side so the icons are technically rendered out at 24x24px.

Then in our CSS, we explicitly size the icons with width: 24px; height: 24px.

This is fine except that it means that you can't simply use a 20 or 18 or 16px square icon as-is without padding the icon in your SVG file so the viewbox outputs at 24px square.

If you just drop in a 20px icon, it's sized up to 24px, which is far too big; without the 2px padding, it looks far too big and doesn't have the spacing it needs.

Ideally, you should be able to drop in an icon of any size smaller than 24px, and have it display at that size, without scaling.

[jasmussen]

Thanks for creating this ticket! I will take a look.

Small clarification:

Google's material design icons are drawn on a 20px by 20px grid. However, they also apply a 2px padding to each side so the icons are technically rendered out at 24x24px.

This is not actually the case. The icons are drawn on a 24x24px grid, with 2px of clearance around the icon, see https://material.io/design/iconography/system-icons.html#grid-keyline-shapes. I know that sounds like semantics, but specifically in the case of SVG icons it means the viewbox is "0 0 24 24" and the width should be 24x24. Visually it also means a nonsquare icons, like a circle, or horizontal or vertical rectangle, can have less than 2px of clearance on the tallest side.

The challenge is if you're using an icon set that does not use this grid, like Dashicons, which has a 20x20px grid and clearance inside that which makes most of those icons 16-18px in size.

The solution to this issue is that we need to treat the icon well and notably not scale it up or down, regardless of its intrinsic width. One way to do this could simply be to not specify dimensions in CSS, rely on them in the SVG itself, and use flex positioning to vertically and horizontally center it.

In any case, I'll take a look.

[chrisvanpatten]

This is not actually the case. The icons are drawn on a 24x24px grid, with 2px of clearance around the icon, see https://material.io/design/iconography/system-icons.html#grid-keyline-shapes. I know that sounds like semantics, but specifically in the case of SVG icons it means the viewbox is "0 0 24 24" and the width should be 24x24. Visually it also means a nonsquare icons, like a circle, or horizontal or vertical rectangle, can have less than 2px of clearance on the tallest side.

Right, that's a fair point. I oversimplified, and definitely should have mentioned that the icons are allowed to extend into the bleed area :) Simply trimming the icons down to 20x20px would not be a valid solution.

One way to do this could simply be to not specify dimensions in CSS, rely on them in the SVG itself, and use flex positioning to vertically and horizontally center it.

I tried this but it doesn't work — SVGs that only indicate size via the viewbox property will scale to fit their container. For example, here I set the container to 30px and disabled the explicit width/height on the SVG itself:

Now if we go back and add width/height attributes to the SVGs, that would be a different story… but that might have unintended consequences.

[jasmussen]

As I work on this, I just wanted to note that Dashicons work fine out of the box. So it appears that the issue at hand here is one of using icons that are not 24px and also do not have explicit widths and heights defined.

I'll continue to investigate and see how we can accommodate a wider range of SVGs.

[jasmussen]

Okay I have a fix for you in #9263