Material Symbols

[ygoe]

I've found Material Icons and Material Symbols. No idea what the difference is, the documentation from Google is quite blurry and incomprehensible. And broken, too. And the projects seem unmaintained for at least 1 or 2 years (new issues piling up).

I did find the WOFF2 files from Google Fonts and they have a different style set: weights from 100 through 700 and outline/filled styles. The "icons" I see everywhere have styles like outlined, filled, rounded, sharp and two-tone. These categories seem partially overlapping to me, but they're completely different from the "symbols".

Do you know what's up there? Should I use symbols or icons? Where do both come from? The graphic forms look the same. Can I generate a woff2 file from the latest symbols myself? Or even add my own symbols (but then I'd probably have to design at least 7 weights)?

[cyberalien]

Thanks for posting this.

I guess it has been added recently, maybe intended to replace current icon set because current icon set is a mess.

Repository where you see issues piling up is for Material Icons, not Material Symbols. It has been unmaintained for many years, except for developer showing up for a day 2-3 times a year to do some very basic maintenance.

[ygoe]

There is only that one repository, the "documentation" for the Symbols also link to the Icons Git repo. I'm wondering where Google Fonts has that font from, where the source code is, what icons it contains exactly or how it was built.

[cyberalien]

Unfortunately I don't think that source will be available. There are 7 different font weights for each icon, which I guess are managed by stroke width internally, but all SVGs on Google servers use fill, so we get only pre-parsed icons and tools used to generate them are unlikely to be published.

I noticed something weird when checking SVG files. All files in Material Symbols use short-term/release/materialsymbols instead of materialsymbols in part of URL where theme name is supposed to be. Not sure what that means.

[ygoe]

Meanwhile the icons home page seems to be changed. Symbols are now publicly described as new. The styles selector has changed since yesterday, too. I see the new font file URLs in the CSS API can can download the woff2 fonts in all variants.

Looks like I ran into the shop while it wasn't fully open yet and didn't notice it (because there were no signs or advertisements).

[cyberalien]

So I wrote a script to get all icons for Material Symbols and ran it. There are currently 1903 icons, with all variations it ends up being 239778 files. Now I feel like a dirty website scraper. :)

Icons I've checked all look good. There are duplicate icons that exist in both Material Icons and Material Symbols, in metadata they have separate entries. Some icons in Material Icons are incorrectly designed, but in Material Symbols they are correct. Overall a very promising icon set, big improvement over Material Icons.

It uses Apache license, so icon set can be used in open source projects. Thinking of adding it to Iconify, so it could be used by developers (Iconify icon components, Unplugin Icons, UnoCSS, Astro Icon), but there are so many variations that something will have to go. From 7 font weights, only weight 400 makes sense. It generates pixel perfect icon, similar to Material Design, other weights generate icons that are not properly aligned to grid. Grades just add more weights, so completely pointless. Sizes other than 24px are also irrelevant. Which leaves fill/outline and 3 font families, so 6 variations per icon.

[ygoe]

Oh, I think we're both on a similar track now. ;-) I approached this from the woff2 files. I downloaded the rounded and sharp styles ("outline" seems redundant) in weights 100 to 700 and fill 0 and 1. Don't see any use in the other variable axes. This makes 28 files and 6 MB. I see 2158 glyphs (some ligatures point to the same glyph), but some glyphs still look identical. I also assigned better descriptions to them so that I can actually find something in this naming mess. My plan is to further deduplicate the symbols, assign new systematic names (like Font Awesome 6 did) and remix some symbols to fix errors and add new combinations. The main purpose of my tool will be to create subsets of the font to reduce their file size to what's needed. It uses fonttools to process the font files.

If you limit the icons to 24px then 400 is probably enough. But I need to place icons in buttons and other places in websites and web apps. 24px is a quite unrealistic size there in most places. And relying on pixels is pointless on high-res screens anyway (which all mobile and many laptop screens are, and those devices are in the majority today). So the stronger weights are useful with smaller sizes. The lighter weights might look nicer in very large sizes, I'll see.

[cyberalien]

To remove duplicates, you can check metadata: https://fonts.google.com/metadata/icons?key=material_symbols&incomplete=true

That file has all icons, each icon has entries like this:

export interface IconEntry {
	name: string;
	version: number;
	popularity: number;
	codepoint: number;
	categories: string[];
	sizes_px: number[];
	tags: string[];
	unsupported_families?: string[];
}

If entry has 'Material Symbols' in unsupported_families, it means icon belongs to Material Icons. If entry has 'Material Icons' in unsupported_families, it belongs to Material Symbols.

[cyberalien]

Oh, I think we're both on a similar track now. ;-) I approached this from the woff2 files. I downloaded the rounded and sharp styles ("outline" seems redundant)

Outline is not redundant. It is base set, which has mix of rounded and sharp edges for shapes. For reference look at first icon: "10k". In "Outlined" style it has rounded corners for box, but sharp edges for text. In "Rounded" edges of both box and text are rounded. In "Sharp" edges of both box and text are sharp.

[ygoe]

Thanks for the JSON file, didn't know about it. Yet it doesn't help me to fully deduplicate icons either. It has different codepoints for same-looking icons (one example: chevron_left, keyboard_arrow_left, navigate_before; another: backup, cloud_upload). I did my deduplicating by looking what ligatures (the public name to use) have the same glyphs in the font. I need those anyway to make a subset of the font. But that's not enough, so I'll further compare the curves of the glyphs to find duplicates. Hope they're equal or similar enough to recognise them. (Maybe I'll do that step manually.) There's also icons that are almost identical like keyboard_backspace and west.

And then there's the cross-style duplicates. Icons in the fill style that are no different than the line style. They also bloat the font files.

Outline is not redundant.

Okay, the …K symbols have mixed corners (didn't see that, you have to search for them to compare) but the similar …MP symbols do not. The "Outlined" style isn't even consistent in anything. All wastebins look completely different in "Outlined". Unfortunately it's impossible to compare all other icons on their site as the selector bar scrolls out of view. The ice skating shoe has mixed corners, too. Overall it looks like the "Outlined" style is just a mix of both but preferring round corners, you never know what you get. I don't like round corners. And calling it outlined is misleading because you can fill it as well. Oh dear.

Anyway, I think things around the (new) Symbols series have cleared up quite a bit now. I like the icons and their flexibility so far and can further enhance them to clear the mess and fill the gaps. This might well become my Font Awesome replacement, but it'll take some work to get there.

[cyberalien]

There are indeed a lot of duplicates.

Total there are 1904 icons (1 icon was added recently). Working with only weight 400 and ignoring grades, it ends up being 11424 icons. After checking for duplicates, there are only 6953 unique icons. That's a lot of duplicates!

Added it to Iconify: https://icon-sets.iconify.design/material-symbols/ so developers can easily use them without icon fonts.