Generic Icon component instead of separate Icon components for each icon

[pradipjs]

Summary

Material Icons provide separate icon components for each icon.
i.e. import { Abc } from '@mui/icons-material/Abc';

In some of cases, people require some kind of generic icon component where we just need to pass Icon Name and it will render that icon. i.e. Dynamic Icon Rendering.

There's some issue with dynamic import with next on Icon imports.
Better If we can have that Icon component with name property.

Examples

Current :
import { Abc } from '@mui/icons-material/Abc';
<Abc size={'small'} ... />

Expected :
import Icon from '@mui/icons-material'; // Or Whatever
<Icon name="Abc" size={'small'} ... />

Motivation

Most common use cases for this is, where icons are dynamic or coming from server side. Where we cannot map icons with each icon name.

Search keywords: Icon component

[siriwatknp]

Thanks for your feedback!

The reason <Icon name="Abc" size={'small'} ... /> won't fly is that it's not tree-shakable. If you have 1000+ icons, they will all end up in the bundle size.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@pradipjs How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.