Dynamically loading icons

On screens that only have a handful of icons on them, you can directly import them as components without any issues. This can be challenging if you have a screen with many icons or if your application as a whole uses lots of icons (the latter case increases the bundle size). The answer, in both cases, is to load Material-UI icons lazily/dynamically.

How to do it...

You can leverage the lazy() higher-order component from React. Also from React, the Suspense component provides placeholders in your UI while your lazy components are fetched and rendered. This overall approach is how code-splitting is handled in React—Material-UI icons happen to be a good use case.

This example uses a Storybook...