[icons] Synchronize components with Google

[oliviertassinari]

Related to #19483

I couldn't spot any issue.

[mui-pr-bot]

No bundle size changes comparing bdebdfd...35d42b1

Generated by 🚫 dangerJS against 35d42b1

[oliviertassinari]

@mbrookes To follow-up on your question regarding two-tones, it seems we can leverage the opacity to identify the secondary layer:

Then looking at https://fontawesome.com/how-to-use/on-the-web/styling/duotone-icons, we would need to apply a class name on the secondary layer, so people can style it differently. Then, we could either use the fill vs color trick or CSS variable or leave to userland to apply the right color (maybe better).

[oliviertassinari]

@timmydoza Does it look good to you?

[timmydoza]

@timmydoza Does it look good to you?

Looks good!! But I still see some noise in there. If you search for opacity=".87" you'll find a number of things. For instance:

<g fill="none"><path d="M0 0h24v24H0V0z" /><path d="M0 0h24v24H0V0z" opacity=".87" /></g>

^^ That's one of a few variations that I found.

To look for more, I generated the docs from your branch. I went to the icon page and added this (hacky) css in devtools:

* {
  stroke: red;
}

It helps to make 'noise' visible so you can see which icons are affected:

The icons with the boxes around them probably have some noise in there.

[oliviertassinari]

Smart! I haven't thought of using this CSS to find all the "noisy" icons. I haven't tried to fix the stroke issues, I leave it to you if you shall accept it :).

My only concern was to sync with the latest version of the icons. You can preview it too at https://deploy-preview-19485--material-ui.netlify.com/components/material-icons/#material-icons.

[timmydoza]

Smart! I haven't thought of using this CSS to find all the "noisy" icons. I haven't tried to fix the stroke issues, I leave it to you if you shall accept it :).

I'll consider it! Right now there are just a few icons that I need to be 'noiseless'.

My only concern was to sync with the latest version of the icons. You can preview it too at https://deploy-preview-19485--material-ui.netlify.com/components/material-icons/#material-icons.

I don't see any obvious issues as far as the sync goes. However, it's too many icons for me to manually verify everything 😄 .

[oliviertassinari]

I'll consider it! Right now there are just a few icons that I need to be 'noiseless'.

Fair enough, at least, we are happy to see the number goes down!

I don't see any obvious issues as far as the sync goes. However, it's too many icons for me to manually verify everything 😄 .

Same concern on my end. I have tried running a visual diff with no luck as we have a couple of new icons that shifts everything. But scanning all the icons, it looked OK.

[timmydoza]

Fair enough, at least, we are happy to see the number goes down!

Once this gets merged I'll add more noise snippets to the build script in my branch. It shouldn't take much to get rid of most of the noise. 👍

[oliviertassinari]

You are good for a rebase :)