How to make a 48dp Google Material symbol/icon ?

[osados]

For my work I'm creating a set of icons. These should be according to Google Material's guidelines. The goal is to create icons to be displayed with sizes higher than 100px.

Material provides a ZIP-file which includes two Adobe Illustrator templates for creating icons:

• ic_product_icon_192px.ai
• ic_system_icon_24px.ai

As we are going to use our self-made icons with larger sizes, I have made use of the 'ic_product_icon_192px.ai' template. For some of the icons I use existing material from Material Symbols.
Below are the steps I take:

• Open the 'ic_product_icon_192px.ai' in Adobe Illustrator
• When using existing material I look up the symbol in https://fonts.google.com/icons
• I look for the 'Package' symbol

• I use the following customizations: Fill, Weight 400, Grade 0, Optical size: 48px, Style: Material Symbols (new); rounded
• Once the symbol is selected in the overview, a side panel shows up on the right side of the screen. Here I apply a size of 48, change the color and export it as a SVG file
• If i open this SVG file it looks like this:

• The width and height of the artboard are both 48px, the icon itself is 36px * 36px
• When copying the icon and placing it in the 'ic_product_icon_192px.ai' file it is too small, so therefor I apply a multiplier of 4 (192 / 48), which makes the icon width and height set to 144px
• I then notice that this icon is smaller than the grid from the template:

So, this is where I am confused. Why is the icon smaller than the box in the template file (red box)? It looks I should have made the icon 152px * 152px, which then fills the red box and also the line thickness becomes 3pt.

Hopefully above situation is clear explained, but more important, can this be solved and how?

Looking forward to some help!

[tphinney]

Hmmm, how interesting! I can comment a bit on Material Symbols.

The number one thing to know is, the “symbols” are simply not designed for the same large sizes as product icons! Two separate things entirely.

For Material Symbols, the sizes that are pixel-grid–snapped are 20 px and 24 px. Above that, icons tend to go off-grid. The largest size that is specifically supported by the font is 48 px. I designed it to have the stroke weight look visually similar to 24 px; instead of scaling up so that the stroke weight just doubles, it is 1.5x. That was the result of a fair bit of testing to see what stroke weight looked the same when the icon was ~ twice as big.

Now, that does not mean that nobody at Google makes bigger icons for any purpose, just that the font is not set up to specifically deal with those larger sizes. And simply quadrupling the 48 px icon… yeah, that will not get you landing on the same grid as the 192 px product icons.