[docs-infra] @mui/icons-material in-editor preview

[eps1lon]

Summary 💡

Having a preview of the icons in the editor is similar to having autocomplete available for the API. Our icons explorer is definitely helpful and better if you need inspiration. But if you know what kind of icon you want then in-editor preview should boost productivity.

Examples 🌈

1. link to icons explorer in SvgIcon.d.ts jsdoc
2. This shows a preview (vscode) when hovering over an imported icon

import SvgIcon from '@material-ui/core/SvgIcon';
/**
 * Preview: ![LockIcon](https://fonts.gstatic.com/s/i/materialicons/lock/v4/24px.svg)
 */
declare const LockIcon: typeof SvgIcon;
export default LockIcon;

credit to @leMaik for the markdown idea.

3. Show icon preview in autocomplete (probably requires IDE extension)

Motivation 🔦

Seemed like a useful thing to have to me.

Each of the examples can be explored further and implemented by whomever is looking for some work to do.

[oliviertassinari]

It would be slick!

For the markdown path:

• Do we have a way to improve the contrast of the preview?
• Would the new comments have a significant impact on the package size on npm? As long as it doesn't make installs timeout, we should be fine.

[eps1lon]

Do we have a way to improve the contrast of the preview?

For a particular theme, yes but not in general.

As long as it doesn't make installs timeout, we should be fine.

I have never seen an install timeout due to package size. Since these are compressed repetitive content such as this one should have minor impact.

[oliviertassinari]

I have never seen an install timeout due to package size. Since these are compressed repetitive content such as this one should have minor impact.

@eps1lon We have had reports about install timeout for this very package in the past: #12432.

[clifntx]

I have never seen an install timeout due to package size. Since these are compressed repetitive content such as this one should have minor impact.

@eps1lon We have had reports about install timeout for this very package in the past: #12432.

I am still having this issue when installing @material-ui/icons with yarn. I have to manually set the timeout every time.
yarn add @material-ui/icons --network-timeout 500000

[eps1lon]

@eps1lon We have had reports about install timeout for this very package in the past: #12432.

Was it confirmed that this is due to compressed size? And I don't think this would add much compressed size since it's repetitive text.

[mbrookes]

https://www.streamlinehq.com/dsp

Using: https://github.com/AdobeXD/design-system-package-dsp

And Abode XD extension for VS Code (available 2020-10-20)

[oliviertassinari]

https://www.streamlinehq.com/dsp

Well, a developer can get the same experience with an iframe extension. Am I missing a major difference?

[oliviertassinari]

An update on this issue. If we work on it, we would probably need to take 3 constraints into account:

1. Find an icon color that has high contrast for the IDE, skewing for dark mode (as I assume a lot more frequent than light mode)
2. Use PNG instead of SVG, per SVG not rendering in Markdown code hover tooltip microsoft/vscode#133389 and Use rendered graphics like PNG files instead of SVG in documentation #28659
3. Be careful about the icons package bundle size: Unable to install @mui/material-icons last version #12432

[zardoy]

IMO It would be ideal to use pngs on dark background in case if light theme in use. is there cdn link to get png instead? In this case its easy to just add links with preview in jsdoc and in this case it would also close vscodeshift/material-ui-snippets#23

---

oliviertassinari and @jedwards1211 Also I know this might be a little offtopic, but speaking of IDE productivity with MUI icons and #19697 (comment) will you be interested in the following idea:

Change auto-import completions from @mui/icons-material to have Icon ending.

The difference between https://github.com/vscodeshift/mui-snippets is that we can change completions and import codefix returned from TypeScript extension. Attaching a demo:

old	new

This way, it is possible to adopt some kind of iframe extension with ui from comment above, so user have to select icons graphically instead of by typing a name first. And then its possible to insert an import using TypeScript native way (if needed).

Also if you have other ideas of imporoving MUI TS completions, would be happy to hear!

P.S. Also speaking of mui-snippets, I recommend to never use babel parser 😉