FOUC issue with material-ui/icons when reloading the page

[StefanoSega]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Using one of the icons and applying to it an inline styling from the style prop it should apply correctly the style and all the inherited styles to the icon even when server-side rendered.

Current Behavior 😯

When reloading the page the icon doesn't take the inline styles and the inherited styles for the first second, then it looks good.

Steps to Reproduce 🕹

Link:

1. Create an icon wrapped into a DOM with inline styling:

   <div className="wrapper">
   <KeyboardArrowDownIcon
             style={{
               fontSize: '16px'
             }}
           />
   </div>

2. Assign to the DOM element styles that the svg icon should inherit:

   .wrapper {
   color: red;
   }

3. Use SSR with the application
4. run the app and then reload the page: despite the SSR correctly render the HTML:

   <div class="wrapper">svg class="MuiSvgIcon-root-1" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation" style="font-size:16px"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path><path fill="none" d="M0 0h24v24H0V0z"></path></svg></div>

   the icon during the first second of page loading it doesn't take the specified font size and so consequently appears way bigger; also it doesn't inherit the color from the parent.

Context 🔦

I've an app with fully working SSR; the HTML get rendered and styled perfectly from SSR except for the material-ui/icons.

Your Environment 🌎

Tech	Version
Material-UI/core	v3.6.1
Material-UI/icons	v3.0.1
React	v16.6.3
Browser	Chrome v70.0.3538.110
TypeScript	v3.2.1

[StefanoSega]

Never mind I didn't implement properly SSR

[digitalkaoz]

@StefanoSega i've seeing this with react-static and Material-UI too. What was your issue with SSR?

[StefanoSega]

@digitalkaoz I just didn't implement MUI SSR at all, once I wrapped the initial component with JssProvider and MuiThemeProvider I was able to get the MUI css from the backend:

            const sheetsRegistry = new SheetsRegistry();
            const sheetsManager = new Map();
            const theme = createMuiTheme();
            const generateClassName = createGenerateClassName();
            const reactHtml = ReactDOMServer.renderToString(
              <JssProvider registry={sheetsRegistry} generateClassName={generateClassName}>
                <MuiThemeProvider theme={theme} sheetsManager={sheetsManager}>
                <Provider {...stores}>
                  <RouterContext
                    {...renderProps}
                    createElement={(Component: any, props: any) => (
                      <Component
                        {...props}
                      />
                    )}
                  />
                </Provider>
                </MuiThemeProvider>
              </JssProvider>
            );
            const muiSsrStylesCss = new CleanCSS().minify(sheetsRegistry.toString()).styles;
            const reactCss = `<style id="jss-server-side">${muiSsrStylesCss}</style>`;