search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
94.02k stars 32.3k forks source link

Generic Icon component instead of separate Icon components for each icon #44492

Closed pradipjs closed 21 hours ago

pradipjs commented 1 day ago

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 commented 21 hours ago

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[bot] commented 21 hours ago

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.