[material-ui][docs] Fix the icon preview dialog

[danilo-leal]

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

Fix #40847

@oliviertassinari, it seems that your change in #40449, removing the Box in favor of a plain <div>, broke the icon display in the preview dialog. Ended up just putting that back here, as well as adding some tiny design tweaks.

• Before: https://mui.com/material-ui/material-icons/?query=ab&selected=Abc
• After: https://deploy-preview-40863--material-ui.netlify.app/material-ui/material-icons/?query=ab&selected=Abc

[mui-bot]

Netlify deploy preview

https://deploy-preview-40863--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against b73d04d

[oliviertassinari]

I pushed a new commit to fix the build, and also not to use styled(Box).

@brijeshb42 It makes me realize that we have no docs about the as prop in MUI System: https://mui.com/system/styled/. I had forgotten how this works but with https://emotion.sh/docs/styled#as-prop and https://styled-components.com/docs/api#as-polymorphic-prop and checking the source, could have it work.

If we want to be serious about MUI System, we will need to add a lot more documentation (but once we get MUI System to work as its own thing, until then, probably not the right order to allocate time).

[danilo-leal]

@oliviertassinari or @DiegoAndai, I'd appreciate a review here! It'd be nice to get this one out with this week's release :)

[oliviertassinari]

Thanks for fixing the regression introduced in #40449, I wasn't aware this could also impact the component prop behavior 🙃

DiegoAndai, I'd appreciate a review here

I think it makes a lot more sense to ask for Brijesh's review, it's truly a MUI System related problem (Material UI only on the surface) and it's a follow-up on a previous PR, so the same people should be involved (author and reviewer both missed it).