title: How to make Remix work with react material ui icons
body: <p>I'm working on a POC with remix + react material (as that's what we use in our main app). I've gotten most things working but I can't get icons to work. Any page that has an icon just hangs and remix yells at me.</p>
  <pre><code>Lambda :\Users\chanp\git\my-remix-app\server timed out after 5 seconds
  </code></pre>
  <p>Here's my entry.client. I stole this from the semi-official remix + mui app. I updated the hydrate to work with react 18 (hydrateRoot instead of just hydrate)</p>
  <pre><code>import { CacheProvider } from &quot;@emotion/react&quot;;
  import CssBaseline from &quot;@mui/material/CssBaseline&quot;;
  import { ThemeProvider } from &quot;@mui/material/styles&quot;;
  import * as React from &quot;react&quot;;
  import { useState } from &quot;react&quot;;
  import { hydrate } from &quot;react-dom&quot;;
  import { RemixBrowser } from &quot;@remix-run/react&quot;;
  
  import createEmotionCache from &quot;./createEmotionCache&quot;;
  import ClientStyleContext from &quot;./styles/ClientStyleContext&quot;;
  import muiTheme from &quot;./styles/muiTheme&quot;;
  import { ThemeProvider as EmotionThemeProvider } from &quot;@emotion/react&quot;;
  import Layout from &quot;./src/components/Layout&quot;;
  import { hydrateRoot } from &quot;react-dom/client&quot;;
  const container = document.getElementById(&quot;app&quot;);
  // const root = hydrateRoot(container, &lt;App tab=&quot;home&quot; /&gt;);
  
  interface ClientCacheProviderProps {
    children: React.ReactNode;
  }
  function ClientCacheProvider({ children }: ClientCacheProviderProps) {
    const [cache, setCache] = useState(createEmotionCache());
  
    function reset() {
      setCache(createEmotionCache());
    }
  
    return (
      &lt;ClientStyleContext.Provider value={{ reset }}&gt;
        &lt;CacheProvider value={cache}&gt;{children}&lt;/CacheProvider&gt;
      &lt;/ClientStyleContext.Provider&gt;
    );
  }
  
  hydrateRoot(
    document,
    &lt;ClientCacheProvider&gt;
      &lt;EmotionThemeProvider theme={muiTheme}&gt;
        &lt;ThemeProvider theme={muiTheme}&gt;
          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
          &lt;CssBaseline /&gt;
  
          &lt;RemixBrowser /&gt;
        &lt;/ThemeProvider&gt;
      &lt;/EmotionThemeProvider&gt;
    &lt;/ClientCacheProvider&gt;,  
  );
  </code></pre>
  <p>Versions</p>
  <pre><code>React v18.2
  Remix v1.6
  Other verions from package.json
      &quot;@emotion/react&quot;: &quot;^11.10.0&quot;,
      &quot;@emotion/styled&quot;: &quot;^11.10.0&quot;,
      &quot;@mui/icons-material&quot;: &quot;^5.8.4&quot;,
      &quot;@mui/lab&quot;: &quot;^5.0.0-alpha.93&quot;,
      &quot;@mui/material&quot;: &quot;^5.9.3&quot;,
      &quot;@mui/styled-engine-sc&quot;: &quot;^5.9.3&quot;,
      &quot;@mui/styles&quot;: &quot;^5.9.3&quot;,
      &quot;@mui/x-date-pickers&quot;: &quot;^5.0.0-beta.4&quot;,
  </code></pre>
  <p>I'm not sure what else would be pertinent to this question. Just let me know if I need to provide more details.</p>