[icons] Update script to use latest json file

[colemars]

• I have followed (at least) the PR section of the contributing guide.

The data referenced in the download script is outdated and no longer maintained. This PR updates the script with the latest url path and data structure.

Current: https://material.io/resources/icons/static/data.json
Latest: https://fonts.google.com/metadata/icons

As referenced at #12251 (comment)

Edit by @oliviertassinari:

Closes #12251

[mui-pr-bot]

No bundle size changes comparing 1eff1cf...b329ffa

Generated by 🚫 dangerJS against b329ffa

[oliviertassinari]

Very nice!

[mbrookes]

Not sure what @colemars did differently when generating #17259, but as alluded to here yarn src:icons will clobber the legacy Material Icons, unless you happen to have those already in material-io-tools-icons, since sr:download doesn't appear to rimraf that directory. (The directory name should probably change too...)

Also, any reason (other than historical) that builder can't go in scripts?

[oliviertassinari]

Also, any reason (other than historical) that builder can't go in scripts?

Not I'm aware of, we could change it. What's the issue with the current setup?

[mbrookes]

We have a scripts directory, but not all the scripts are in it. 🤷🏽‍♂️

(The package used to be a generic icon builder, so it being in the root dir is a hold-over from that.)

The first comment is the more important one.

[oliviertassinari]

@mbrookes Oh, I understand what's the issue is now. I would have needed a pristine development environment to see it in the first place. It seems that we miss the following icons:

-export { default as AddLocation } from './AddLocation';
-export { default as AddLocationOutlined } from './AddLocationOutlined';
-export { default as AddLocationRounded } from './AddLocationRounded';
-export { default as AddLocationSharp } from './AddLocationSharp';
-export { default as AddLocationTwoTone } from './AddLocationTwoTone';

-export { default as AlternateEmail } from './AlternateEmail';
-export { default as AlternateEmailOutlined } from './AlternateEmailOutlined';
-export { default as AlternateEmailRounded } from './AlternateEmailRounded';
-export { default as AlternateEmailSharp } from './AlternateEmailSharp';
-export { default as AlternateEmailTwoTone } from './AlternateEmailTwoTone';

-export { default as Battery20 } from './Battery20';
-export { default as Battery20Outlined } from './Battery20Outlined';
-export { default as Battery20Rounded } from './Battery20Rounded';
-export { default as Battery20Sharp } from './Battery20Sharp';
-export { default as Battery20TwoTone } from './Battery20TwoTone';

-export { default as Battery30 } from './Battery30';
-export { default as Battery30Outlined } from './Battery30Outlined';
-export { default as Battery30Rounded } from './Battery30Rounded';
-export { default as Battery30Sharp } from './Battery30Sharp';
-export { default as Battery30TwoTone } from './Battery30TwoTone';

-export { default as Battery50 } from './Battery50';
-export { default as Battery50Outlined } from './Battery50Outlined';
-export { default as Battery50Rounded } from './Battery50Rounded';
-export { default as Battery50Sharp } from './Battery50Sharp';
-export { default as Battery50TwoTone } from './Battery50TwoTone';

-export { default as Battery60 } from './Battery60';
-export { default as Battery60Outlined } from './Battery60Outlined';
-export { default as Battery60Rounded } from './Battery60Rounded';
-export { default as Battery60Sharp } from './Battery60Sharp';
-export { default as Battery60TwoTone } from './Battery60TwoTone';
-export { default as Battery80 } from './Battery80';

-export { default as Battery80Outlined } from './Battery80Outlined';
-export { default as Battery80Rounded } from './Battery80Rounded';
-export { default as Battery80Sharp } from './Battery80Sharp';
-export { default as Battery80TwoTone } from './Battery80TwoTone';

-export { default as Battery90 } from './Battery90';
-export { default as Battery90Outlined } from './Battery90Outlined';
-export { default as Battery90Rounded } from './Battery90Rounded';
-export { default as Battery90Sharp } from './Battery90Sharp';
-export { default as Battery90TwoTone } from './Battery90TwoTone';

-export { default as BatteryCharging20 } from './BatteryCharging20';
-export { default as BatteryCharging20Outlined } from './BatteryCharging20Outlined';
-export { default as BatteryCharging20Rounded } from './BatteryCharging20Rounded';
-export { default as BatteryCharging20Sharp } from './BatteryCharging20Sharp';
-export { default as BatteryCharging20TwoTone } from './BatteryCharging20TwoTone';

-export { default as BatteryCharging30 } from './BatteryCharging30';
-export { default as BatteryCharging30Outlined } from './BatteryCharging30Outlined';
-export { default as BatteryCharging30Rounded } from './BatteryCharging30Rounded';
-export { default as BatteryCharging30Sharp } from './BatteryCharging30Sharp';
-export { default as BatteryCharging30TwoTone } from './BatteryCharging30TwoTone';

-export { default as BatteryCharging50 } from './BatteryCharging50';
-export { default as BatteryCharging50Outlined } from './BatteryCharging50Outlined';
-export { default as BatteryCharging50Rounded } from './BatteryCharging50Rounded';
-export { default as BatteryCharging50Sharp } from './BatteryCharging50Sharp';
-export { default as BatteryCharging50TwoTone } from './BatteryCharging50TwoTone';

-export { default as BatteryCharging60 } from './BatteryCharging60';
-export { default as BatteryCharging60Outlined } from './BatteryCharging60Outlined';
-export { default as BatteryCharging60Rounded } from './BatteryCharging60Rounded';
-export { default as BatteryCharging60Sharp } from './BatteryCharging60Sharp';
-export { default as BatteryCharging60TwoTone } from './BatteryCharging60TwoTone';

-export { default as BatteryCharging80 } from './BatteryCharging80';
-export { default as BatteryCharging80Outlined } from './BatteryCharging80Outlined';
-export { default as BatteryCharging80Rounded } from './BatteryCharging80Rounded';
-export { default as BatteryCharging80Sharp } from './BatteryCharging80Sharp';
-export { default as BatteryCharging80TwoTone } from './BatteryCharging80TwoTone';

-export { default as BatteryCharging90 } from './BatteryCharging90';
-export { default as BatteryCharging90Outlined } from './BatteryCharging90Outlined';
-export { default as BatteryCharging90Rounded } from './BatteryCharging90Rounded';
-export { default as BatteryCharging90Sharp } from './BatteryCharging90Sharp';
-export { default as BatteryCharging90TwoTone } from './BatteryCharging90TwoTone';

-export { default as BorderColor } from './BorderColor';
-export { default as BorderColorOutlined } from './BorderColorOutlined';
-export { default as BorderColorRounded } from './BorderColorRounded';
-export { default as BorderColorSharp } from './BorderColorSharp';
-export { default as BorderColorTwoTone } from './BorderColorTwoTone';

-export { default as CastForEducation } from './CastForEducation';
-export { default as CastForEducationOutlined } from './CastForEducationOutlined';
-export { default as CastForEducationRounded } from './CastForEducationRounded';
-export { default as CastForEducationSharp } from './CastForEducationSharp';
-export { default as CastForEducationTwoTone } from './CastForEducationTwoTone';

-export { default as CellWifi } from './CellWifi';
-export { default as CellWifiOutlined } from './CellWifiOutlined';
-export { default as CellWifiRounded } from './CellWifiRounded';
-export { default as CellWifiSharp } from './CellWifiSharp';
-export { default as CellWifiTwoTone } from './CellWifiTwoTone';

-export { default as Domain } from './Domain';
-export { default as DomainOutlined } from './DomainOutlined';
-export { default as DomainRounded } from './DomainRounded';
-export { default as DomainSharp } from './DomainSharp';
-export { default as DomainTwoTone } from './DomainTwoTone';

-export { default as EditLocation } from './EditLocation';
-export { default as EditLocationOutlined } from './EditLocationOutlined';
-export { default as EditLocationRounded } from './EditLocationRounded';
-export { default as EditLocationSharp } from './EditLocationSharp';
-export { default as EditLocationTwoTone } from './EditLocationTwoTone';

-export { default as FormatColorFill } from './FormatColorFill';
-export { default as FormatColorFillOutlined } from './FormatColorFillOutlined';
-export { default as FormatColorFillRounded } from './FormatColorFillRounded';
-export { default as FormatColorFillSharp } from './FormatColorFillSharp';
-export { default as FormatColorFillTwoTone } from './FormatColorFillTwoTone';

-export { default as FormatColorText } from './FormatColorText';
-export { default as FormatColorTextOutlined } from './FormatColorTextOutlined';
-export { default as FormatColorTextRounded } from './FormatColorTextRounded';
-export { default as FormatColorTextSharp } from './FormatColorTextSharp';
-export { default as FormatColorTextTwoTone } from './FormatColorTextTwoTone';

-export { default as LocationOff } from './LocationOff';
-export { default as LocationOffOutlined } from './LocationOffOutlined';
-export { default as LocationOffRounded } from './LocationOffRounded';
-export { default as LocationOffSharp } from './LocationOffSharp';
-export { default as LocationOffTwoTone } from './LocationOffTwoTone';

-export { default as LocationOn } from './LocationOn';
-export { default as LocationOnOutlined } from './LocationOnOutlined';
-export { default as LocationOnRounded } from './LocationOnRounded';
-export { default as LocationOnSharp } from './LocationOnSharp';
-export { default as LocationOnTwoTone } from './LocationOnTwoTone';

-export { default as NetworkCell } from './NetworkCell';
-export { default as NetworkCellOutlined } from './NetworkCellOutlined';
-export { default as NetworkCellRounded } from './NetworkCellRounded';
-export { default as NetworkCellSharp } from './NetworkCellSharp';
-export { default as NetworkCellTwoTone } from './NetworkCellTwoTone';

-export { default as NetworkWifi } from './NetworkWifi';
-export { default as NetworkWifiOutlined } from './NetworkWifiOutlined';
-export { default as NetworkWifiRounded } from './NetworkWifiRounded';
-export { default as NetworkWifiSharp } from './NetworkWifiSharp';
-export { default as NetworkWifiTwoTone } from './NetworkWifiTwoTone';

-export { default as NotListedLocation } from './NotListedLocation';
-export { default as NotListedLocationOutlined } from './NotListedLocationOutlined';
-export { default as NotListedLocationRounded } from './NotListedLocationRounded';
-export { default as NotListedLocationSharp } from './NotListedLocationSharp';
-export { default as NotListedLocationTwoTone } from './NotListedLocationTwoTone';

-export { default as PersonPinCircle } from './PersonPinCircle';
-export { default as PersonPinCircleOutlined } from './PersonPinCircleOutlined';
-export { default as PersonPinCircleRounded } from './PersonPinCircleRounded';
-export { default as PersonPinCircleSharp } from './PersonPinCircleSharp';
-export { default as PersonPinCircleTwoTone } from './PersonPinCircleTwoTone';

-export { default as PinDrop } from './PinDrop';
-export { default as PinDropOutlined } from './PinDropOutlined';
-export { default as PinDropRounded } from './PinDropRounded';
-export { default as PinDropSharp } from './PinDropSharp';
-export { default as PinDropTwoTone } from './PinDropTwoTone';

// LocationOn is better
-export { default as Place } from './Place';
-export { default as PlaceOutlined } from './PlaceOutlined';
-export { default as PlaceRounded } from './PlaceRounded';
-export { default as PlaceSharp } from './PlaceSharp';
-export { default as PlaceTwoTone } from './PlaceTwoTone';


// PlayCircleFilled is better
-export { default as PlayCircleFilledWhite } from './PlayCircleFilledWhite';
-export { default as PlayCircleFilledWhiteOutlined } from './PlayCircleFilledWhiteOutlined';
-export { default as PlayCircleFilledWhiteRounded } from './PlayCircleFilledWhiteRounded';
-export { default as PlayCircleFilledWhiteSharp } from './PlayCircleFilledWhiteSharp';
-export { default as PlayCircleFilledWhiteTwoTone } from './PlayCircleFilledWhiteTwoTone';

-export { default as Settings } from './Settings';
-export { default as SettingsOutlined } from './SettingsOutlined';
-export { default as SettingsRounded } from './SettingsRounded';
-export { default as SettingsSharp } from './SettingsSharp';
-export { default as SettingsTwoTone } from './SettingsTwoTone';

// Useless
-export { default as SignalCellular0Bar } from './SignalCellular0Bar';
-export { default as SignalCellular0BarOutlined } from './SignalCellular0BarOutlined';
-export { default as SignalCellular0BarRounded } from './SignalCellular0BarRounded';
-export { default as SignalCellular0BarSharp } from './SignalCellular0BarSharp';
-export { default as SignalCellular0BarTwoTone } from './SignalCellular0BarTwoTone';

// Useless
-export { default as SignalCellular1Bar } from './SignalCellular1Bar';
-export { default as SignalCellular1BarOutlined } from './SignalCellular1BarOutlined';
-export { default as SignalCellular1BarRounded } from './SignalCellular1BarRounded';
-export { default as SignalCellular1BarSharp } from './SignalCellular1BarSharp';
-export { default as SignalCellular1BarTwoTone } from './SignalCellular1BarTwoTone';

// Useless
-export { default as SignalCellular2Bar } from './SignalCellular2Bar';
-export { default as SignalCellular2BarOutlined } from './SignalCellular2BarOutlined';
-export { default as SignalCellular2BarRounded } from './SignalCellular2BarRounded';
-export { default as SignalCellular2BarSharp } from './SignalCellular2BarSharp';
-export { default as SignalCellular2BarTwoTone } from './SignalCellular2BarTwoTone';

// Useless
-export { default as SignalCellular3Bar } from './SignalCellular3Bar';
-export { default as SignalCellular3BarOutlined } from './SignalCellular3BarOutlined';
-export { default as SignalCellular3BarRounded } from './SignalCellular3BarRounded';
-export { default as SignalCellular3BarSharp } from './SignalCellular3BarSharp';
-export { default as SignalCellular3BarTwoTone } from './SignalCellular3BarTwoTone';

// Useless
-export { default as SignalCellularConnectedNoInternet0Bar } from './SignalCellularConnectedNoInternet0Bar';
-export { default as SignalCellularConnectedNoInternet0BarOutlined } from './SignalCellularConnectedNoInternet0BarOutlined';
-export { default as SignalCellularConnectedNoInternet0BarRounded } from './SignalCellularConnectedNoInternet0BarRounded';
-export { default as SignalCellularConnectedNoInternet0BarSharp } from './SignalCellularConnectedNoInternet0BarSharp';
-export { default as SignalCellularConnectedNoInternet0BarTwoTone } from './SignalCellularConnectedNoInternet0BarTwoTone';

// Useless
-export { default as SignalCellularConnectedNoInternet1Bar } from './SignalCellularConnectedNoInternet1Bar';
-export { default as SignalCellularConnectedNoInternet1BarOutlined } from './SignalCellularConnectedNoInternet1BarOutlined';
-export { default as SignalCellularConnectedNoInternet1BarRounded } from './SignalCellularConnectedNoInternet1BarRounded';
-export { default as SignalCellularConnectedNoInternet1BarSharp } from './SignalCellularConnectedNoInternet1BarSharp';
-export { default as SignalCellularConnectedNoInternet1BarTwoTone } from './SignalCellularConnectedNoInternet1BarTwoTone';

// Useless
-export { default as SignalCellularConnectedNoInternet2Bar } from './SignalCellularConnectedNoInternet2Bar';
-export { default as SignalCellularConnectedNoInternet2BarOutlined } from './SignalCellularConnectedNoInternet2BarOutlined';
-export { default as SignalCellularConnectedNoInternet2BarRounded } from './SignalCellularConnectedNoInternet2BarRounded';
-export { default as SignalCellularConnectedNoInternet2BarSharp } from './SignalCellularConnectedNoInternet2BarSharp';
-export { default as SignalCellularConnectedNoInternet2BarTwoTone } from './SignalCellularConnectedNoInternet2BarTwoTone';

// Useless
-export { default as SignalCellularConnectedNoInternet3Bar } from './SignalCellularConnectedNoInternet3Bar';
-export { default as SignalCellularConnectedNoInternet3BarOutlined } from './SignalCellularConnectedNoInternet3BarOutlined';
-export { default as SignalCellularConnectedNoInternet3BarRounded } from './SignalCellularConnectedNoInternet3BarRounded';
-export { default as SignalCellularConnectedNoInternet3BarSharp } from './SignalCellularConnectedNoInternet3BarSharp';
-export { default as SignalCellularConnectedNoInternet3BarTwoTone } from './SignalCellularConnectedNoInternet3BarTwoTone';

// Useless
-export { default as SignalWifi0Bar } from './SignalWifi0Bar';
-export { default as SignalWifi0BarOutlined } from './SignalWifi0BarOutlined';
-export { default as SignalWifi0BarRounded } from './SignalWifi0BarRounded';
-export { default as SignalWifi0BarSharp } from './SignalWifi0BarSharp';
-export { default as SignalWifi0BarTwoTone } from './SignalWifi0BarTwoTone';

// Useless
-export { default as SignalWifi1BarLock } from './SignalWifi1BarLock';
-export { default as SignalWifi1BarLockOutlined } from './SignalWifi1BarLockOutlined';
-export { default as SignalWifi1BarLockRounded } from './SignalWifi1BarLockRounded';
-export { default as SignalWifi1BarLockSharp } from './SignalWifi1BarLockSharp';
-export { default as SignalWifi1BarLockTwoTone } from './SignalWifi1BarLockTwoTone';

// Useless
-export { default as SignalWifi1Bar } from './SignalWifi1Bar';
-export { default as SignalWifi1BarOutlined } from './SignalWifi1BarOutlined';
-export { default as SignalWifi1BarRounded } from './SignalWifi1BarRounded';
-export { default as SignalWifi1BarSharp } from './SignalWifi1BarSharp';
-export { default as SignalWifi1BarTwoTone } from './SignalWifi1BarTwoTone';

// Useless
-export { default as SignalWifi2Bar } from './SignalWifi2Bar';
-export { default as SignalWifi2BarLockOutlined } from './SignalWifi2BarLockOutlined';
-export { default as SignalWifi2BarLockRounded } from './SignalWifi2BarLockRounded';
-export { default as SignalWifi2BarLockSharp } from './SignalWifi2BarLockSharp';
-export { default as SignalWifi2BarLockTwoTone } from './SignalWifi2BarLockTwoTone';

// Useless
-export { default as SignalWifi2BarLock } from './SignalWifi2BarLock';
-export { default as SignalWifi2BarOutlined } from './SignalWifi2BarOutlined';
-export { default as SignalWifi2BarRounded } from './SignalWifi2BarRounded';
-export { default as SignalWifi2BarSharp } from './SignalWifi2BarSharp';
-export { default as SignalWifi2BarTwoTone } from './SignalWifi2BarTwoTone';

// Useless
-export { default as SignalWifi3BarLock } from './SignalWifi3BarLock';
-export { default as SignalWifi3BarLockOutlined } from './SignalWifi3BarLockOutlined';
-export { default as SignalWifi3BarLockRounded } from './SignalWifi3BarLockRounded';
-export { default as SignalWifi3BarLockSharp } from './SignalWifi3BarLockSharp';
-export { default as SignalWifi3BarLockTwoTone } from './SignalWifi3BarLockTwoTone';

// Useless
-export { default as SignalWifi3Bar } from './SignalWifi3Bar';
-export { default as SignalWifi3BarOutlined } from './SignalWifi3BarOutlined';
-export { default as SignalWifi3BarRounded } from './SignalWifi3BarRounded';
-export { default as SignalWifi3BarSharp } from './SignalWifi3BarSharp';
-export { default as SignalWifi3BarTwoTone } from './SignalWifi3BarTwoTone';

// Star is better
-export { default as StarRate } from './StarRate';
-export { default as StarRateOutlined } from './StarRateOutlined';
-export { default as StarRateRounded } from './StarRateRounded';
-export { default as StarRateSharp } from './StarRateSharp';
-export { default as StarRateTwoTone } from './StarRateTwoTone';

-export { default as Weekend } from './Weekend';
-export { default as WeekendOutlined } from './WeekendOutlined';
-export { default as WeekendRounded } from './WeekendRounded';
-export { default as WeekendSharp } from './WeekendSharp';
-export { default as WeekendTwoTone } from './WeekendTwoTone';

Those icons can no longer be found on https://material.io/resources/icons/.
I think that we need to keep the sources in GitHub so we can run the update script from a pristine state.

[mbrookes]

We could drop the ic_ prefix and update the rename filter.

While I'm being pedantic, material-io-tools-icons doesn't match the current (website) URL: https://material.io/resources/icons

[mbrookes]

How about we just make it generic: material-icons

[colemars]

material-io-tools-icons is now material-icons

[mbrookes]

I think that we need to keep the sources in GitHub

Keep the sources, or keep the generated icons, in say legacy, along side custom, and just copy them in?

@colemars Looks like something went wrong, but hang fire until we agree on an approach.

[oliviertassinari]

+1 for a legacy folder with only the legacy icons.

[colemars]

Having a legacy folder seems like it would be the best approach for clarity.

[oliviertassinari]

@colemars I have reset the pull request back to a state without unrelated changes (docs, etc.), if you need to recover your changes, you can find them from 68f080c.

[mbrookes]

@oliviertassinari What is the possibility that template used to generate the icons could change in the future? I'd guess it's pretty minimal at this point, given that the bulk of the code is in the the runtime createSvgIcon.js fiel, but if there's any chance, we should keep the source svgs in the legacy folder, rather than the generated icons. (And do the same for custom over in the social icons PR.)

@colemars No, it wasn't that. If it was, the worst you'd get is merge conflicts.

[oliviertassinari]

@mbrookes I have asked myself about this very question, do we keep the raw or the src? It might not make a big difference. Pick what's simpler?

[mbrookes]

Pick what's simpler?

Either way is just a question of copying some files at the right point in the build process, so perhaps we go with the purest approach and keep the svg files?

[oliviertassinari]

Sounds good to me

[colemars]

Pick what's simpler?

Either way is just a question of copying some files at the right point in the build process, so perhaps we go with the purest approach and keep the svg files?

The gotcha is that the files that are saved are the createSvgIcon(path) files and I'm not sure where to easily get the raw svg files for the legacy icons anymore.

Currently I have it set up following how @oliviertassinari originally copied the custom/ icons over in the build script.

There could be a manual patch or a one-use script run to cut out the svg path and save it?

But that might just be preemptively doing work that may or may not be needed?

[mbrookes]

I'm not sure where to easily get the raw svg files for the legacy icons anymore.

I imagine @oliviertassinari has them.

Currently I have it set up following how @oliviertassinari originally copied the custom/ icons over in the build script.

Does the index.js get updated for the copied files?

[colemars]

Does the index.js get updated for the copied files?

Just double-checked and yes - all of the legacy icons that are copied over are exported in index.js.

[oliviertassinari]

@colemars Awesome, I'm gonna have a last look at the changes and merge. I'm really happy about how the icons handling in Material-UI is turning out. We are getting closer to something great.

A bit that could be interesting to look into is the props Icon.js and SvgIcons support, I like a few of the features of fontawesome: https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons.

[oliviertassinari]

@colemars Thank you!