MaterialUI Icon fontSize overwrriten by Materialicons font CSS when using injectFirst

I am using injectFirst so I can overwrite some MUI styles in my stylesheets. The problem is that the .material-icons class from https://fonts.googleapis.com/icon?family=Material+Icons now overwrites the CSS that <Icon fontSize='small'> sets. So the font-size is always the 24px.

• 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 😯

.material-icons {} CSS overwrites the one generated my MUI for icons (such as font-size).

Expected Behavior 🤔

The Google MaterialIcons CSS is included before any changes made by MUI.

Steps to Reproduce 🕹

Steps:

1. Use injectFirst on StylesProvider <StylesProvider injectFirst>.
2. Include Material Icons in your CSS (head):
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
3. Use an Icon component and try to change the size: <Icon fontSize='small'>help</Icon>.
4. The fontSize is still the initial 24px from the .material-icons CSS class.

Context 🔦

Your Environment 🌎

Windows 10, Chrome 80.

Tech	Version
Material-UI	v4.9.3
React	v16.2
Browser	Chrome 80
TypeScript	3.7.5

I don’t have a perfect solution for , maybe injectFirst should somehow only inject after the MUI CSS dependencies.

[oliviertassinari]

@Cristy94 We document alternatives to the HTML comment.

[Cristy94]

I just now tried your solution and it worked. Thank you!