Cannot override MUI icon default styling when using 5.0 beta.

I cannot increase the font-size of an MUI icon.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

MUI styling is overriding custom styling

Expected Behavior 🤔

Custom styling should override default MUI styling

Steps to Reproduce 🕹

This sandbox shows a icon with custom styling that overrides the default styling (which is correct):

https://codesandbox.io/s/intelligent-dewdney-1t832?file=/src/Demo.tsx

    "@emotion/react": "11.4.1",
    "@emotion/styled": "11.3.0",
    "@material-ui/core": "4.12.3",
    "@material-ui/icons": "4.11.2",
    "@material-ui/styles": "4.11.4",
    "react": "latest",
    "react-dom": "latest",
    "react-scripts": "latest"

But when certain packages are upgraded the default styling starts to override the custom styling:

https://codesandbox.io/s/heuristic-scott-5z5ng?file=/package.json

    "@emotion/react": "11.4.1",
    "@emotion/styled": "11.3.0",
    "@material-ui/core": "5.0.0-beta.5",
    "@material-ui/icons": "5.0.0-beta.5",
    "@material-ui/styles": "5.0.0-beta.5",
    "react": "latest",
    "react-dom": "latest",
    "react-scripts": "latest"

Updating all material ui packages doesn’t help either:

https://codesandbox.io/s/hopeful-lalande-x27e0?file=/src/Demo.tsx

    "@mui/icons-material": "5.0.0-rc.1",
    "@mui/material": "5.0.0-rc.1",
    "@mui/styles": "5.0.0-rc.1",

Only this method seems to work: <AccountCircle style={{ fontSize: 40 }}/>

Context 🔦

Trying to increase a MUI icon fontsize so I can use it as a button.

[mnajdova]

Sorry I didn’t notice that the last example was using style.

Here is a working sandbox: https://codesandbox.io/s/laughing-alex-nyszr?file=/src/index.tsx

Note that you need to wrap your app with StyledEngineProvider with inject first so that the emotion styles would be injected before the JSS ones. This is documented in the Styled library interoperability guide - https://mui.com/guides/interoperability/

There are four ways of how you can do this:

• classes, className, sx prop or style

I hope this helps

[mnajdova]

Sorry for the late response. If you use v5 with the recommended v5 styling mechanism you don’t need StyledEngineProvider, StyledProvider nor ThemeProvider if you are using the default theme.