Material-ui: Missing icons

[xaviergonz]

There are SettingsApplication and lots of others, but plain "Settings" and variations are missing (it is listed on https://material.io/tools/icons/?icon=settings&style=baseline)

[mbrookes]

The problem is that the source icon is 20px instead of 24px. You can use SettingsOutlined or SettingsSharp which is the same icon at the correct size.

We could perhaps add a workaround to duplicate one of those paths to generate the "Filled" icon from.

For the full list of icons that have "incorrect" sizes, see: https://github.com/mui-org/material-ui/blob/master/packages/material-ui-icons/scripts/download.js#L19-L43

[oliviertassinari]

The problem is that the source icon is 20px instead of 24px

Seriously, Google, why?

[9jaboy]

by the way it is SettingsOutlined

[henrylearn2rock]

The lightbulb icon used on https://material-ui.com/ is also missing. Did Google get rid of it? Seriously? Not found anymore at https://material.io/tools/icons/

[oliviertassinari]

@henrylearn2rock Yes, it's gone.

[sakulstra]

FileUpload is gone as well^

[oliviertassinari]

FileUpload is gone

@sakulstra I can only find CloudUpload.

[durdenx]

and FileDownload too

[mbrookes]

@henrylearn2rock FWIW, the lightbulb icons are published in the @material-ui/docs package:

import LightbulbOutlineIcon from '@material-ui/docs/svgIcons/LightbulbOutline';
import LightbulbFullIcon from '@material-ui/docs/svgIcons/LightbulbFull';

But you might prefer to copy them locally. (Source here: https://github.com/mui-org/material-ui/tree/master/packages/material-ui-docs/src/svgIcons)

[henrylearn2rock]

@mbrookes thanks, I'll stay with 1.1.0. Hmmm... why would Google do that to screw us up.

[JeffBaumgardt]

I realize they made it a full semver major release so things are expected to break but they could have at least pointed to a list of changed icons that were already existing. I too ran into issues with the FileUpload and while it was a very easy fix it's still slightly annoying.

[oliviertassinari]

@JeffBaumgardt I wish we could have make a complete changelog, but with more than 1,000 icons, it's more efficient to offload the effort to our users with issues like this one. Thank you for reporting the pain point.

[mbrookes]

v1 icons not included in v2:

• ContentCopy
• ContentCut
• ContentPaste
• DoNotDisturb
• DoNotDisturbAlt
• DoNotDisturbOff
• DoNotDisturbOn
• FileDownload (available in @material-ui/docs/svgIcons)
• FileUpload
• InfoOutline
• LabelOutline
• LightbulbOutline (available in @material-ui/docs/svgIcons)
• LockOutline
• ModeEdit
• SentimentNeutral
• SimCardAlert
• SystemUpdateAlt

v1 icons not included in v2 due to incorrect size (Use other styles):

• Domain (filled)
• Settings (filled)
• Weekend (filled)

v2 icons not included due to incorrect size (Use other styles except for StarRate - use Star / StarBorder / StarHalf):

• CastForEducation (filled)
• Domain (filled)
• ~PlayCircleFilledWhite (filled)~
• StarRate (filled)
• ~StarRateOutlined~
• ~StarRateRound~
• ~StarRateTwotone~
• ~StarRateSharp~

Edit @eps1lon: icons with strike-through are included in the latest version.

[meetbryce]

That would have been important to put in a changelog...

[mbrookes]

@meetbryce I have added the list to the main PR, and updated the release notes & changelog.

[the-question]

Just did my first PR (#12356) on Material-UI. I am not sure if I did it right or not. Please let me know if I need to adjust some things.

[the-question]

BTW, as those are SVGs, we don't really care about the announced size, right?
If so, the size could be "hardcoded" to 24px in the saved file name as every one virtually is any size.

[oliviertassinari]

@the-question It's very brave from you to work on improve the fetch logic. Unfortunately, it won't help with #12251. The SvgIcon set the viewbox to 0 0 24 24. We need the source path to follow this same convention. Right now, I see 3 options:

1. We wait for the google team to clean their svg images
2. We find a tool to change the svg path bounding box
3. We override the SvgIcon view box

I have sorted the options by my order of preference.

[the-question]

I did a quick test with the _Settings_ icon (baseline one, which is 20x20).
As SvgIcon sets the viewbox to [0, 0, 24, 24], and this case, where the original viewbox is [0, 0, 20, 20], we would need to move (translate) items in the SVG by 2px, so that they would be centered when the viewbox is set to [0, 0, 24, 24].

I applied the following transformation to the SVG (temp0 is the svg HTML node):

for(i = 0; i < temp0.children.length; i++) {
    temp0.children.item(i).setAttribute("transform", "translate(2, 2)")
}

This goes through every child of the parent svg element and moves them by 2px in each direction.

Therefore, when setting the viewbox to [0, 0, 24, 24], width and height to 24 afterward, the icon appears centered, but not zoomed, so the original look is preserved. (Using other width/height still works as expected)
You can try it with:

temp0.setAttribute("viewBox", [0, 0, 24, 24]);
temp0.setAttribute("height", 24);
temp0.setAttribute("width", 24);

Ideally, this (the first part, translating childrens) should be applied to the downloaded SVG, before saving it as a file.

P.S: I totally agree with your order of preference, but judging by the fact that they still link to a repository which is 3 years out of date, I'd say we may prefer taking the lead on this one.

[the-question]

Just pushed 2fc08369d13acc5b9444319c4689379a288029fc in #12356 to transform/scale SVGs on the fly.
The implementation is not the cleanest (uses .replace()), but it avoids adding new dependencies (e.g: cheerio) just to modify the SVG's content for (currently) 6 edge cases.

[bperel]

@mbrookes Could you mention that FileUpload is missing as well ?

[mbrookes]

@bperel thanks - must have somehow missed that in the diff.

[aommm]

Thanks for that list @mbrookes !
I ran into problems with a missing FileDownload icon when upgrading @material-ui/icons version. I found that the icon was renamed to GetApp.

I wonder, where is the changelog located? When upgrading, I checked https://github.com/mui-org/material-ui/releases , but there is nothing mentioned there about a v2 release or about missing icons.

[yeahoffline]

@material-ui/icons 1.0.0 + @material-ui/core 3.1.0 seems to work...

[mbrookes]

@aommm https://github.com/mui-org/material-ui/releases/tag/v1.4.1

[eps1lon]

Looked through https://github.com/mui-org/material-ui/issues/12251#issuecomment-407856100 and checked if the icons not included due to size are now included. The following icons are included in the latest version:

• PlayCircleFilledWhite (filled)
• StarRateOutlined
• StarRateRound
• StarRateTwotone
• StarRateSharp

[oliviertassinari]

The eco icons is missing, https://material.io/resources/icons/?search=eco&style=baseline, as reported in #17251. We should be able to manually patch this one.

[colemars]

Another point of discrepancy here seems to be that google's icon json isn't up to date with material.io's list of icons.

[colemars]

@oliviertassinari Regarding the manual patch -- currently if the icons script were to be ran after the patch is committed it would remove the patch (because the script references the out of date json).

However, it seems other parts of the script are broken as well (404 errors with the current URL path) so can we assume it will be altered in the future before it is ran again? Or at least until google updates there JSON.

[mbrookes]

@colemars Here you go: https://fonts.google.com/metadata/icons

The json structure has changed though, so you'll have to tweak the script a bit.

Also the download URLs are now of the form:

https://fonts.gstatic.com/s/i/materialicons/3d_rotation/v1/24px.svg
https://fonts.gstatic.com/s/i/materialiconsoutlined/3d_rotation/v1/24px.svg
https://fonts.gstatic.com/s/i/materialiconsround/3d_rotation/v1/24px.svg
https://fonts.gstatic.com/s/i/materialiconstwotone/3d_rotation/v1/24px.svg
https://fonts.gstatic.com/s/i/materialiconssharp/3d_rotation/v1/24px.svg

(Note "round" not "rounded")

[xiaoyu-tamu]

Missing icon.

import StorefrontIcon from '@material-ui/icons/Storefront';

{
  "name": "storefront",
  "version": 1,
  "unsupported_families": [],
  "categories": [
    "places"
  ],
  "tags": []
},

[oliviertassinari]

@xiaoyu-tamu Storefront will be in the next release: @material-ui/[email protected].

[agroves333]

Also missing EmojiEvents. Nice....