Themed icons

Material-UI icons have themes that can be applied to them. They are not to be confused with Material-UI themes that apply styles to every Material-UI component that you use; icon themes are specifically for icons. To use a themed icon, you have to import a different version of it.

How to do it...

To help explore the different icon themes, this example uses a Storybook control that allows you to change the icon theme:

Here's the source:

import React, { lazy, Suspense, Fragment } from 'react';

import { withStyles } from '@material-ui/core/styles';
import CircularProgress from '@material-ui/core/CircularProgress';

const themes = {
  Filled: [
    lazy(() => import('@material...