[joy-ui] Automatic adjustment does not work when using it with Material UI

[polmauri]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/rough-browser-3d6rtd?file=/index.tsx

Steps:

1. Take the example of usage for Material Icons in Using icon libraries.
2. Apply the changes described in Using Joy UI and Material UI together.
3. The icons in the demo which used to auto-adjust in size in step 1, no longer auto-adjust, they are all the same size.

Current behavior 😯

Icons appear all the same size in this example:

Expected behavior 🤔

Icons auto-adjust their size:

Context 🔦

I am building a web application where I need to use components from both libraries Material UI and Joy UI, and I noticed that auto-adjustment in Joy UI doesn't work in this case, which is quite disruptive.

Your environment 🌎

npx @mui/envinfo

``` System: OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish) Binaries: Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node Yarn: Not Found npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm Browsers: Chrome: 113.0.5672.92 Firefox: 113.0.1 npmPackages: @emotion/react: 11.10.5 @emotion/styled: 11.10.5 @mui/base: 5.0.0-beta.0 @mui/core-downloads-tracker: 5.13.0 @mui/icons-material: ^5.11.16 => 5.11.16 @mui/joy: ^5.0.0-alpha.79 => 5.0.0-alpha.79 @mui/lab: ^5.0.0-alpha.129 => 5.0.0-alpha.129 @mui/material: ^5.13.0 => 5.13.0 @mui/private-theming: 5.12.3 @mui/styled-engine: 5.12.3 @mui/system: 5.12.3 @mui/types: 7.2.4 @mui/utils: 5.12.3 @types/react: ^18.0.21 => 18.0.25 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^4.8.4 => 4.9.3 ```

[siriwatknp]

As a workaround, you will need to update the Material UI's MuiSvgIcon to look for Joy tokens:

const materialTheme = materialExtendTheme({
  components: {
    MuiSvgIcon: {
      styleOverrides: {
        root: ({ ownerState }) => ({
          color: "var(--Icon-color)",
          margin: "var(--Icon-margin)",
          ...(ownerState.fontSize &&
            ownerState.fontSize !== "inherit" && {
              fontSize: `var(--Icon-fontSize, var(--joy-fontSize-${ownerState.fontSize}))`
            }),
          ...(ownerState.instanceFontSize &&
            ownerState.instanceFontSize !== "inherit" && {
              "--Icon-fontSize": `var(--joy-fontSize-${ownerState.instanceFontSize})`
            })
        })
      }
    }
  }
});

https://codesandbox.io/s/adoring-christian-5s1nkb?file=/index.tsx:361-1010

[siriwatknp]

We should add docs about this.

[DIWAKARKASHYAP]

hi @siriwatknp but in Material UI , we don't need to add anything