React Material-UI Cookbook

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 control to select the icon category to load:

Here's the code to create lazy icon components that load dynamically:

import React, { lazy, Suspense, Fragment } from 'react';import { withStyles } from '@material-ui/core/styles';import CircularProgress from '@material-ui/core/CircularProgress';const categories ...