[Icon] Add support for CSS variables

[Jamaalwbrown]

I want to contribute to this effort but am new I open source contributions. The js code changes were straightforward but I did not know exactly what to add in the .tsx file.

Also, Yarn kept failing after running "yarn docs: dev" command with "Error: Cannot find module '@mui/markdown/loader"
If others can spot the issue I will make corrections

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

One of #32049

Not sure how to tag everyone
cc: @mui/core @mnajdova

[siriwatknp]

You should revert this file.

[Jamaalwbrown]

I can revert that file. However I still get the error below when I run yarn docs:dev

$ yarn docs:dev
yarn run v1.22.10
$ yarn workspace docs dev
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from C:\100Devs\Open Source Contributions\MUI Material UI\material-ui\docs\.env
Using React.StrictMode.
Staging deploy of local repository
(node:24716) ExperimentalWarning: The ESM module loader is experimental.
Defining routes from exportPathMap
Considering various locales for SSR
info  - Disabled SWC as replacement for Babel because of custom Babel configuration "babel.config.js" https://nextjs.org/docs/messages/swc-disabled
Error: Cannot find module '@mui/markdown/loader'
Require stack:
- C:\100Devs\Open Source Contributions\MUI Material UI\material-ui\docs\next.config.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:831:15)
    at Function.mod._resolveFilename (C:\100Devs\Open Source Contributions\MUI Material UI\material-ui\node_modules\next\dist\build\webpack\require-hook.js:183:28)   
    at Function.resolve (internal/modules/cjs/helpers.js:80:19)
    at Object.webpack (C:\100Devs\Open Source Contributions\MUI Material UI\material-ui\docs\next.config.js:107:61)
    at Object.getBaseWebpackConfig [as default] (C:\100Devs\Open Source Contributions\MUI Material UI\material-ui\node_modules\next\dist\build\webpack-config.js:1199:32)
    at async Promise.all (index 0)
    at async Span.traceAsyncFn (C:\100Devs\Open Source Contributions\MUI Material UI\material-ui\node_modules\next\dist\trace\trace.js:79:20)
    at async Span.traceAsyncFn (C:\100Devs\Open Source Contributions\MUI Material UI\material-ui\node_modules\next\dist\trace\trace.js:79:20)
    at async HotReloader.start (C:\100Devs\Open Source Contributions\MUI Material UI\material-ui\node_modules\next\dist\server\dev\hot-reloader.js:394:25)
    at async DevServer.prepare (C:\100Devs\Open Source Contributions\MUI Material UI\material-ui\node_modules\next\dist\server\dev\next-dev-server.js:298:9) {        
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\100Devs\\Open Source Contributions\\MUI Material UI\\material-ui\\docs\\next.config.js'
  ]
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed.
Exit code: 1
Command: C:\Program Files\nodejs\node.exe
Arguments: C:\100Devs\Open Source Contributions\MUI Material UI\material-ui\.yarn\releases\yarn-1.22.10.js dev
Directory: C:\100Devs\Open Source Contributions\MUI Material UI\material-ui\docs
Output:

info Visit https://yarnpkg.com/en/docs/cli/workspace for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[mnajdova]

It's a great first pull request on MUI 👌 Thank you for working on it.

[mnajdova]

I want to contribute to this effort but am new I open source contributions. The js code changes were straightforward but I did not know exactly what to add in the .tsx file.

I've improved the demo to include all colors for the icons and they work great 👌 (see my commits)

Also, Yarn kept failing after running "yarn docs: dev" command with "Error: Cannot find module '@mui/markdown/loader"
If others can spot the issue I will make corrections

Did you run yarn at the top of the project first?

[mui-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 1a9a495

[Jamaalwbrown]

I want to contribute to this effort but am new I open source contributions. The js code changes were straightforward but I did not know exactly what to add in the .tsx file.

I've improved the demo to include all colors for the icons and they work great 👌 (see my commits)

Also, Yarn kept failing after running "yarn docs: dev" command with "Error: Cannot find module '@mui/markdown/loader"
If others can spot the issue I will make corrections

Did you run yarn at the top of the project first?

Thank you! Glad I could do some of the legwork!
Yes, I did run 'yarn' at the top of the project. I will look at it some more. Maybe I need a fresh install of the packages

[siriwatknp]

@Jamaalwbrown Thanks for your first contribution!