How it works...

If you take a look at the themes object, you can see that each theme has the same icons in it, but their import paths are slightly different. For example, the Attachment icon is imported by the Filled theme, as follows:

import('@material-ui/icons/Attachment')

In the Rounded theme, here's how the same icon is imported:

import('@material-ui/icons/AttachmentOutlined')

You append the theme name to the icon name to change the theme of the icon. The same pattern follows for each of them.

Not every icon changes when the theme changes. It really just depends on the icon shape and whether it makes sense to, with the given theme. The import will still work, but there isn't always a visual change.

Let's explore them now:

Filled ...

Get React Material-UI Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.