Materialdesign: Sync New / Remaining Stock Google Icons

[Templarian]

I need some help completing this list. If anyone has some time to visually check and add the icons to the list it would help a lot.

https://docs.google.com/spreadsheets/d/1a-ZW7Fm_pKSfwkG1kxJ9Cszz_EI3g7GuYq1KaUZQag0/edit?usp=sharing

Stock <-> Community

[Templarian]

Funny thing, when this is done there will be more stock icons than what are included at the Google Design site. They don't include them all on that site, but they still need to be attributed to Google Design.

[CoDEmanX]

I'm working on a list by visually comparing the icons, ~200 of ~860 done. I also wrote a little script to identify duplicates, there are quite a few (~80). I did some tagging too. I'll share the spreadsheet next week or so.

I think we should either use Google's original names as aliases, or use them as tags (perhaps the terms they use individually to increase the searchability on MDI). In addition, there are some associations and use cases for icons, which I would add as tags too (such as "zzz", "no-doze", "wakelock" for the new sleep-off icon).

[Templarian]

The spreadsheet above is publically editable. Feel free to just append to that. :smile:

I started to go through the sheet already and organizing them by categories to make finding new ones easier.

[CoDEmanX]

I tried to edit it a few days ago, but I couldn't. Seems to be read-only to me?!

My spreadsheet has a different structure, action column is called status and has a slightly complex semantic, and it's partly generated. Once I manage to edit yours, I could add two more sheets I guess. Or incorporate your entries to my table.

[Templarian]

You're right it is editable now. Just copy your sheet into one of the tabs.

Focused on the new export screen the rest of this weekend so I probably won't be adding icons this weekend unfortunately.

[CoDEmanX]

Added two sheets, _Google Duplicates_ and _Suggestions for Mass Tagging_. Also updated the main sheet and _Helper_ to improve usability and as a preparation to merge my WIP list in.

[CoDEmanX]

I encountered some icons in Google repository, which I would describe as "WIP" or "low quality" - they aren't very pretty and violate the MD icon guidelines sometimes. At least some aren't listed on Google's icon website.

Examples:
contact email (there is only contact phone on their page)

Or the following, which has 1px spacing between message lines and is somewhat redundant if you check what similar alternatives we have in MDI already:

@Templarian: How do you want to handle them? Add everything that is in the Google repo? Replace community with stock if appropriate? (I wouldn't remove any MDI message icons in favor of above one though)

If you want to start adding missing Google icons, drop me a line. I'm working through my local spreadsheet, but if you want 200-some TODOs already, I could transform and add it to the Google spreadsheet. Otherwise I'll complete it first and post the whole thing at once.

---

Some more findings below.

Send as boxed version to depict outbox:

Tray (no arrow) and Tray multiple from Gmail app, which I couldn't find in either repo:

Fun one: Google Dialer uses obsolete phone icon:

[CoDEmanX]

Tray and Tray-Multiple:
https://www.dropbox.com/s/e4u354mztw9ydwa/tray.svg?dl=0
https://www.dropbox.com/s/7d5qe7oyr86aqmg/tray-multiple.svg?dl=0

The 1px margin between both trays is correct, I checked against the reference shot.

3 tries at send-box:
https://www.dropbox.com/s/e7knaj1r4dqrbkk/send-box.svg?dl=0
https://www.dropbox.com/s/tipbgiutpgs5oj7/send-box2.svg?dl=0
https://www.dropbox.com/s/977o979h9i813na/send-box3.svg?dl=0

[CoDEmanX]

@Templarian: I just updated the spreadsheet. You can start syncing the outstanding icons. It's possible that I overlooked some icons already in MDI, but you should know better than me. Let me know if I can be of some more help.

[CoDEmanX]

@Templarian: would it be of any help if I zipped up the to-be-added stock SVGs and created .design versions of all of them? Or do you have some tool to do such conversions efficiently?

[Templarian]

@CoDEmanX Yea, if you want to create .design files for each that would make things way easier.

The trick to SVG -> Design is in illustrator/vector tool draw a box around the 24x24. Then copy both the glyph square into a new document in Design with 24x24 size and 96 DPI. Once pasted simply size it to 24 in the width. Delete the bounding square and save.

I don't have a tool, it's a little manual, I just get really use to it. The reason why I like the .design is the exported SVG is very optimal and my optimization scripts handle that SVG PATH data really well.

[Templarian]

The reason why you have to size it down is because illustrator by default assumes 72dpi so it will paste in at a size of 32x32.

[CoDEmanX]

If I create a new document in Expression Design, change DPI to 90 and dimensions to 24px, it imports at the correct size. I can even change the DPI to 72 later on (and adjust dimensions to 24px again) and it stays correctly. But is it even necessary to change it to 72? It shouldn't matter because it's vector graphics, right?

Speaking of which... does Expression Design change the point data in some way if you import from AI files, i.e. cleaner point data? Or did you observe that behavior for shapes created in ER only perhaps?

BTW: you can specify a DPI value on PDF export in InkScape, but the PDFs it produces are identical with different DPI values set...

[Templarian]

All the .design files should be 24x24 at 96 DPI. Yea, Design exports much cleaner .svg path data I've found.

[CoDEmanX]

Here you go:
https://www.dropbox.com/s/sorpiiosskge5mb/2015-11-07_Conversion.zip?dl=0

The SVGs are either the production icons from the Google repo, or SVGs I saved with InkScape. The AI files are also exported from InkScape, and the Design files with Expression Design - obviously.

You'll have to export the design files to SVG with Expression Design, give proper names, yada yada. Exporting them in an automated way doesn't seem to be possible with my current approach (AutoIt keystroke emulation).

Folder structure (also see the Google docs spreadsheet):

• add: Add Stock (from Google repo), some might not fit well however
• add_cody: some of my creations, partially re-created (see below)
• add_two-components: the bottom rect needs to be removed (color-helper), the rest added as new icon
• bad_low-quality: the digits are messed up (by Google), but they're too small even if re-created at 24px
• replace-community: equivalent icons by Google
• too-wide: they are 26 pixels in width
• too-wide_transparency: 26 pixels in width and there's transparency
• transparency: there's transparency
• update: minor changes to existing icons that improve them in my opinion

Re-created from Google icons:

• cast-off
• cookie
• crop-rotate
• human
• human-handsdown
• human-handsup
• important
• minus-circle-off
• music-note-bluetooth-off
• music-note-bluetooth-on
• music-note-on
• music-note-off
• physical-web
• reminder
• tray-multiple

[CoDEmanX]

Wifi and cellular signal icons using no transparency, also two 1-2-3 icon experiments #710, chef hat #659, RAM #505 (re-created from Google icon) and PHP logo #816:

https://www.dropbox.com/s/5esks7ip62ia4yw/2015-11-08_Conversion.zip?dl=0

[CoDEmanX]

I see you started adding icons, and also renamed a few. Should we keep track of such renames? It should be easy to solve this usually (book-open > book-open-variant), but still.

Updated the spreadsheet to reflect the progress and added stats to the top (status group counts).

[CoDEmanX]

Hm... battery-charging and battery-unknown are inconsistent with the rest of our battery icons, Google's icons are narrower. Bug or feature?

[CoDEmanX]

@Templarian: you'll have to do overtime, Google just added 96 new icons. Some of them conflict with our community icons, and must say that some new Google icons are much worse than what we got...

Do you want me to update the spreadsheet and convert the SVGs to Expression Design files?

[Templarian]

Yea, we should update the sheet with the new ones. I'll have time this weekend to work on the icons.

Yea, we don't have to replace all icons. If we feel the community version is nicer it can stay.

[CoDEmanX]

Updated the spreadsheet (added to the bottom) and here are the design files:
https://www.dropbox.com/s/dtgdgqmoss6iogb/2015-11-18_Conversion.zip?dl=0

I did not include all icons marked as new on Google page, because some of them existed before the 2.1.0 update (e.g. email contacts), and a few others are identical to community icons. If you see status "Add Stock?" in the sheet, it means that there's already a similar community icon but I would add the another variant, as opposed to "Resolve issue". Some icons might need to be re-attributed to Google (see comment column).

[systimotic]

Oh no oh no oh no. I was messing about with the filtering and I didn't know I could edit the file. Version control just saved my life. Sorry for touching your file, I believe everything has been restored.

[CoDEmanX]

Yeah, it's publicly editable. But no worries, looks like I left it yesterday. The automatic versioning is indeed very handy :smiley:

[csbenz]

Any idea when the new icons from Google's 2.1 version will be available? Thanks!

[CoDEmanX]

All the icons in the cluuub say ADD ME!

[Templarian]

Yea, sorry guys, holiday stuff taking my time. Going to try and work on this stuff tomorrow. :sweat_smile:

[CoDEmanX]

@Templarian: I managed to automate the deletion of the initial, empty layer (image based screen search :blush:) and also the export to e.g. SVG (hardcoded coordinates and mouse emulation), can I help you with this somehow? I could zip up Expression Design-exported SVGs, so you don't have open the design files and export manually. Assigning proper names will still be needed.

[Templarian]

Yea, if you wanted to export each one (double check there are no extra points left by the Google designers) to SVG. Out drinking tonight and tomorrow. Will be working on icons Friday and the weekend.

[CoDEmanX]

Just started to export a few, then noticed that Expression Design messes up the point data... the input SVGs are pixel-perfect, but there are rounding errors all over in the exported SVGs. Not sure if there are already inaccuracies in the intermediate AI files though. I think it's better to use the original SVGs.

I can remove the blank layers from the design files and re-upload them if you want.

[Templarian]

Yea, my icon system automatically fixes any rounding issues during the optimization step of importing. Every vector application does that during export.

.9989 for instance will become 1, etc...

[CoDEmanX]

Yeah I know, but the original Google SVGs don't have these rounding errors in the first place. I don't see a reason why not to use them directly instead of exporting the AI/Design files to SVG and use them. The rounding issues seem to occur in the intermediate AI files already BTW. If I re-import them in InkScape, they also have rounding issues. Not sure if this is a limitation of the AI format or a built-in precision limit of InkScape's PDF export...

[CoDEmanX]

I updated the spreadsheet up to the latest addition lock-plus (ic_enhanced_encryption).
Here are the current stats:

| Count | Status |
| --- | --- |
| 43 | Add Stock? |
| 227 | Add Stock |
| 3 | Update Stock |
| 5 | Replace Community w/ Stock |
| 21 | Resolve Issue (see comment) |
| 516 | Completed |
| 14 | Different from Stock |
| 0 | Rejected |
| 101 | Duplicate |

Keep it up @Templarian! If there's anything I can do, just tell me.

[Templarian]

Thanks. Yea, my focus is to get to 1.5.x release with the fixed codepoints. After that I'll be focused on syncing in as many icons as I can. The fixed codepoints/designer focused fonts should get some more users (outside of web developers).

[CoDEmanX]

Our parent project released 41 new icons:
https://github.com/google/material-design-icons/commit/ac75e8329cc936816f1c5e2de182858efe7530ab

There are several conflicts to existing MDI icons, a few others render recreations of mine obsolete.

[CoDEmanX]

@Templarian: shall I re-package the missing Google icons plus my not yet published icon sources, so you can start to add them? I can provide SVG + Design, and optionally AI and PNG.

[Templarian]

Just need .design.

[CoDEmanX]

But the original SVGs are "cleaner" than any export you do with Expression Design to SVG?! I know that you optimize them for the website anyway, but why not add the original and clean SVGs to the repo as-is?

[Templarian]

The optimization scripts work really nice with the export from, and illustrator sometimes some wierd thIngs during export. Eventually we'll have a repo of just the clean exports automated from the site on any db change.

[CoDEmanX]

I'm actually using InkScape, not sure what Google uses. They do offer design and production versions, and the production versions seemed really well optimized. SVG --> AI (using InkScape)--> Expression Design --> SVG was not nearly as good due to the common rounding errors. Anyway, I'm throwing away all icons we already have in MDI and will upload a package of all remaining icons, Design only.

[CoDEmanX]

Here's the first batch: https://www.dropbox.com/s/qaehxn8h2jnvefw/2016-04-24_Conversion.zip?dl=0

Should contain all missing Google icons up to v2.1.0. I'll do the most recently released icons tomorrow.

Some remarks:

• add_google_two-components: there's a bar at the bottom that needs to be removed, and the icon be used together with the color-helper icon
• network_...: some of Google's network icons contained transparency. I therefore created a full set of monochrome network icons. Some of them are basically identical to Google's network icons (the ones that did not contain transparency) - not sure how to handle the attribution in this case
• problematic_google: these icons shouldn't / can't be added in their current form
• resolve-issue_google: Google icons we are missing, but there are either identical or very similar icons already. If they are really identical, do we need to re-attribute them to Google? If they are similar, should the community icons be replaced, or turned into variants?
• update: some updated icons, by Google as well as me - I think these are all minor but meaningful changes

[CoDEmanX]

Second batch: https://www.dropbox.com/s/ihlm81ggp69c993/2016-04-25_Conversion.zip?dl=0

Contains the remaining v2.2.0 icons, as well as a few updates to existing icons and a bunch of my own creations for consideration (partially in multiple variants if I couldn't decide which one is the best).

Some icons may have slipped through (or slipped in). I assume it's mostly correct however. I'll check the spreadsheet for missing Google icons once you've added them.

[Templarian]

Amazing work getting these all consolidated. I'm working on icon related tasks all today and will start to get some of these imported.

Also working to get a PowerPoint Add-In released today. https://twitter.com/templarian/status/723917073248882689

[CoDEmanX]

Awesome side project!
Good luck plodding through the 498 icons!

[damianobarbati]

@Templarian great job with this +1!!!
Can't wait for Google icons set to be fully merged here, do you think is going to happen anytime soon (release 2.x)?

[darosh]

Here is per-pixel automated matching/compare result: material-icons-bundle/#/compare (with underlying machine readable data: material-icons-bundle/meta.json.)

[darosh]

Few samples:

[PeterShaggyNoble]

That's great work, @darosh; very nice project.

I'm in the process of updating the spreadsheet at the moment (focusing primarily on aliases) and your comparisons will be a big help.

[Templarian]

I think a lot of these early ones existed before the official set came out so there might be slight pixel differences. This will make fixing these legacy icons much quicker!

Working on tagging for contributors this week so we can get the categories wired up in the meta.json.

Might have time to get a very basic editor for modifying icons in (there is a lot of validation that needs to be done).

[darosh]

@PeterShaggyNoble I am glad this helps.

Adding some description:

Icons were compared rasterized to 24x24 and converted to B&W with threshold 223 (in grayscale range 0-255).

• green: exact pixel match (it does not mean exact shape, for example rounded corners in light-bulb are omitted thanks to the threshold, my goal was to automate the name match because I am bundling Google version where possible anyway, I would recommend to you re-import them too)
• yellow 1 to 3 different pixels
• red manual list intentionally skipping some possible matches because it would cause visual inconsistencies with other variants like:

Google

MDI

[MrGrigri]

@darosh, that's a great tool!

[PeterShaggyNoble]

@darosh, here are some MDI icons you have flagged as missing in your comparison chart, which you may or may not have deliberately omitted:

Google | MDI | Note
--- | --- | ---
3d_rotation | rotate-3d
ac_unit | air-conditioner | Matches name/purpose but not design
ac_unit | snowflake | Matches design but not name/purpose
accessible | wheelchair-accessibility | See accessibleicon.org
add_alarm | alarm-plus
add_location | map-marker-plus
airport_shuttle | van-passenger
announcement | message-alert
backup | cloud-upload
beach_access | beach
call | phone
casino | dice-5
collections_bookmark | book-multiple?
comment | message-reply-text
control point | plus-circle-outline
create new folder | folder-plus
date range | calendar-range
description | file-document?
directions subway | subway-variant
done | check
drafts | email-open
drive eta | car
edit | pencil
euro symbol | currency-eur
exposure plus 1 | plus-one?
fiber manual record | record
fitness center | dumbbell
free breakfast | coffee | Saucer of stock icon is shifted to the right
functions | sigma
g translate | google-translate
games | gamepad
gavel | gavel
hd | high-definition
keyboard arrow down | chevron-down
keyboard arrow left | chevron-left
keyboard voice | microphone
kitchen | fridge
lens | circle
local dining | silverware
local play | ticket
local see | camera
mail | email
mail outline | email-outline
merge type | call-merge
message | message-text
motorcycle | motorbike
music note | music-note
no sim | sim-off
note add | file-plus
payment | credit-card
pets | paw
photo | image
pie chart | chart-pie
poll | poll-box
pool | pool | Matches name/purpose but not design
pool | swim | Matches design but not name/purpose
priority high | exclamation | Matches design but not name/purpose
priority high | priority-high | Matches name/purpose but not design
redeem | wallet-giftcard
room | map-marker
schedule | clock
sentiment dissatisfied | emoticon-sad
sentiment neutral | emoticon-neutral
sentiment satisfied | emoticon-happy
shop | shopping-music
straighten | ruler?
swap vert | swap-vertical
turned in not | bookmark-outline
wrap text | wrap

[darosh]

@PeterShaggyNoble Wow! Thanks a lot. I will add it to the compare table as _potential_ match for easier review and come back to you later.

[darosh]

@PeterShaggyNoble https://darosh.github.io/material-icons-bundle/#/compare updated. I am going to fix the automated recognition errors like alarm-plus.

BTW I added 4 preview backgrounds like:

[darosh]

@PeterShaggyNoble I fixed bug in the table view caused some exact matches displayed as missing :(, changes here.

Added search, filters and counters and Google alternative names to the compare

[PeterShaggyNoble]

That's fanastic, @darosh 😃 The grids are a nice addition, too. Really liking this project of yours.

Going to try to make some time tomorrow to update the main spreadsheet with my findings from yesterday and the results from your comparisons.

[darosh]

These 7 stock icons are not in good shape (or have too many points). Design version is same (slightly better at 48px). Reported here: google/material-design-icons#237