How to dynamically load the material-ci-icons icon

user_8394139 0
Viewed 1977

I use Material-ui@next and material-ui-next@next

material-ui@next load one icon usage:

import AddIcon from 'material-ui-icons/AddIcon';
function AddIconButton(props) {
    return (
        <AddIcon />
    );
}

But I want dynamically load the material-ci-icons icon

For example, I have variable menus

const menus = [
  {
    Name: 'menu1',
    Icons: 'face',
  },
  {
    Name: 'menu2',
    Icon: 'extension',
  }
].

How to display the icon on the page according to the menus

redux material-ui reactjs node.js
1 Answers

I faced with this problem too. i use this link: dynamically load an icon. save my menu icon name at database and use <Icon>{props.iconName}</Icon> but, it doesn't work for me. so because i don't have so much time i just save the SVG format of material ui icon in my database and restore it at my JSX.

i got SVG format of icons from inspect element of browser from material ui icon web page

user_59118910
Related