Replace Google Material Icons with Material Symbols #2432
Conversation
This impacts games and the UI. Needs a file updater and some visual testing of the UI because that stuff is everywhere. I think I got everything. But this was a bigger undertaking than expected because the default for the old Icons was "filled" and that had to be manually applied in some location in the UI.
|
There are subtle changes in how some icons/symbols display. Not really a big deal to me, but if this is a deal breaker, we could leave the icon font. Here is an example from the Editor toolbar on the right side of the screen. Original on top, new on bottom (look at history arrow and the bug).
|
|
There is one hopefully unimportant difference that I can't figure out. A single symbol gets replaced by a single symbol no problem. But if they are stringed together (like hieroglyphics) then the spacing is off. For example look at these 4 groupings in different font sizes. In each pair, the new Symbols are on the top. The old Icons are on the bottom.
This is fixable, but if you fix it for a string of Symbols, then it breaks all individual symbols.
I looked at everything in the library and I did not see any instances of symbols strung together. So this is something I'm willing to live with as a possible breaking change. Also, interestingly note the last symbol in each pair. It is called "new_releases." Used in Flatten the Curve. Changing from a check mark to an exclamation point is a little significant. But in that game it won't matter. Again, just an example of the risk of slightly different visual elements if we remove Icons. |
|
Looks promising. Can you check if there is an equivalent file to the one read in https://github.com/ArnoldSmith86/virtualtabletop-misc/blob/main/helper-scripts%2Fgenerate-icon-list.sh#L8 ? |
I looked hard, and there is no equiv, because the 'tags' piece seems like they no longer want to support it. |
|
I think you've shown that the new stuff is not a direct replacement of the old. So I'd say there is no harm in adding the new, but you'll want to keep the old. |
It does exist. In a slightly different format here. This was on my internal to do list. This is current as of last month: https://github.com/google/material-design-icons/blob/master/update/current_versions.json |
|
Well, I guess that isn't exactly the same. It isn't tags. It is just a major category group. |
|
actually, I did some 'deep sleuthing' (I've been doing this stuff for way too long), dug into the guts of figma's google provided search (which has no repo), and discovered this undocumented url: |
|
Thanks @scruffynerf, that was really helpful. 50K lines of Material Symbols tags added. Some manual curating was required because there were a few that glitched. But this is so awesome now. |
|
@ArnoldSmith86, I think this is ready. But I can't remember about the file updater. Does it only work once everything is on the server. Because obviously the games are not updated yet and I can't figure out if it will actually work on not from testing on my local machine. Take a look and point me in the right direction if I'm off. |
There was a problem hiding this comment.
Wouldn't it work to only replace the font file name and keep the font name "Material Icons" and keep all the class names?
Would be a bit confusing for people who actually know about the stuff. And I guess if this already works, it's fine. But the font names could be in use in any css property..
Maybe we just define both?
And maybe use a sledge hammer instead of a scalpel in the file updater and simply do a replace on the JSON string?
For the icons that changed: did you find alternatives that would be a better fit? We could replace those in the file updater as well.
server/fileupdater.mjs
Outdated
|
|
||
| function v17MaterialSymbols(properties) { | ||
| if (properties.type === 'classes') { |
There was a problem hiding this comment.
properties is basically the widget JSON. So properties.classes and properties.id etc.
|
And it looks like some categories are weird (probably some sort of duplicates)? |
Making all lower case would be best. (Brand sticks out) |
Good idea. But going with title case. A few of them in there work better as caps, so going to make it consistent. |
|
For category capitalization etc. I would make them similar to the emoji categories because those are semi official I think.. |
Not going to do that. Would make things easier now, but potentially much more confusing later.
I thought of that, but also thought you would prefer a scalpel. Technically, it could also be in routines. If could change something on a widget from normal text to a symbol and back by changing the class on a routine. The hammer should catch that.
I don't know. I'm not really worried about it. Can't be that many and that big of a deal. Plus I don't know how to find them without comparing them all visually. I only noticed the one. |
this is solely about the 3 changed icons. The robot arm doesn't scream 'macro' to me, ('automation' so I get the idea though). the Duplicate is MUCH better with the new icon. The stars didn't say "Duplicate to me" the 'copy' style icon does. The open parent one is slightly less clear, but I wouldn't have know it was Open Parent from the arrow/line/circle combo either. |
|
I'm pretty sure all of the old ones are from Material Icons. Are they all not in Material Symbols? I don't mind changing the icons; I'm just wondering why so many are missing.. Also: the main toolbar uses VTT symbols as well. So unless we change those as well (and our logo won't be in Material Symbols), the font will be loaded anyway. So the icons you posted won't cause a font download either way. It would at least make the editor UI icons more consistent but I don't feel like the old icons are standing out. About the replacements: the macro one is fine but neither the old nor the new one is perfect.. The clone one is probably better. The parent ones are both pretty bad and unfortunately the tree icon is the wrong way around. I'm not sure how I feel about using people to show "parent" either. All those options are probably very similar: once you know, you can remember them but none of them convey the proper meaning at first glance. I feel like it's better to not change them because at least current users might have gotten used to them. But I don't mind changing them at all. That toolbar above the JSON editor buttons is probably the most out of place thing in the editor right now. It's kinda likely that it'll go away entirely (though the buttons might move somewhere else then). And in the long term the "proper" editor UI should be so good that you don't want to use the JSON editor at all. But all of that might be far into the future... |
|
Both variants (fill and nofill) are now available in the symbol picker:
Apparently we now have 13288 symbols to pick from. |
|
Can |
Then leave it as is. There are more reasons to leave it alone than there are to change it to satisfy some sort of sense of perfection to have them all be from the same set. (It was never about eliminating loading the 106kb VTT Symbols font). Also we'll never agree on the best parent symbol. |
I don't love this as much as I thought I would. I am glad to see both options, but the duplicates are distracting. Is there a way to have a checkbox or something that would filter for fill and no fill? |
I wouldn't, as the difference in some is stark, and not in others. (and some not at all) And looking for an icon, having to flip the checkbox repeatedly seems awkward. If there are similar entries but 'inverted' (which is what fill often but not always does), I'd rather see them as separate choices (like now), than have to look harder. |
|
I think I would prefer the current version. We can add a checkbox that hides the non-filled version. And if it is not checked, you get the current view. |
Is this still an issue? Can you post an example room/game? |
Yes. Can't do a side-by-side comparison in the same room now of course. But here is the same widget with a random collection of glyphs at 50px. The only difference is the first is on production and uses Icons. The second is in this PR and uses Symbols.
|
What I would like to see is a more feature-filled filter. When I type "home" into the search bar, I lose all the visual indication of which type of glyph this is. I almost never want emojis. Sometimes, I only want the game-icons.net ones. It would be great to have a filter near the search bar. Defaults to all, but uncheck and you remove all the emojis and material ones. But that can be another PR. With or without the checkbox, I think this PR is good (unless somebody as issue with the spacing of a chain of widgets). |
|
You can approximate the spacing in the Symbols glyphs with this css |
|
So Unspeakables is not messed up if I add that change directly on the widget in the game. I'm at work now and can't test it locally. But my guess is if we add that css to the fonts.css where we have the default settings for symbols and symbols-nofill, it should fix the problem. |
|
Hmm, the issue is that a space character in Material Symbols is as wide as an icon but in Material Icons it's way narrower. Fixing it with The only solution I can think of is to wrap the spaces with their own tag The other solution is to not care. It is kinda likely though that somebody somewhere for some reason wanted to put two icons on a button. If removing spaces is non-destructive, I would probably do that in the file updater. I'm gonna check if I can find an example where removing spaces would change the icons. For example Found an example: |
|
I found
|
Not working for me on this example:
|
|
It is closer. And word-spacing works better than letter-spacing because if you don't have a space between the letters (something I didn't try), then you end up with the glyphs smooshed on top of each other with letter-spacing. I think anything we try will be a bit of a hack and imperfect. We should figure out what word-spacing is best and apply it as the default. Dev's can then css stuff however they want. It is really unlikely there are more than 2 or 3 symbols together. I didn't find a single instance in the PL where there was more than one, but there probably is and I missed it. |
|
I found that |
|
Seems to work at -0.75. Video shows switching back and forth between PR with Symbols and production with Icons. Edit: I also tried it on Firefox and got the same result. That had me worried for a minute when I was trying to figure out why .68 worked for you. Symbol.Spacing.mp4 |
|
I've looked again at the code, the UI, and a big sampling of PL games (with old icons). I think this is ready. |
|
The outlier is Firefox on production for me. So it is better than before. If you don't have that behavior on Windows, even better. 🤷♂️ |
This impacts games and the UI.
Needs a file updater and some visual testing of the UI because that stuff is everywhere. I think I got everything. But this was a bigger undertaking than expected because the default for the old Icons was "filled" and that had to be manually applied in some locations in the UI.
Material Icons have been deprecated and are no longer being updated. There are about 2100 Icons. Symbols are the new Google standard and are being updated regularly. There are about 3900 Symbols.
To Do:
Broken add symbol button in metadata pages(problem on production, new PR for this)PR-SERVER-BOT: You can play around with it here: https://test.virtualtabletop.io/PR-2432/pr-test (or any other room on that server)