如何动态加载material-ci-icons图标答案

【问题标题】：How to dynamically load the material-ci-icons icon如何动态加载material-ci-icons图标
【发布时间】：2018-01-07 01:54:27
【问题描述】：

我使用Material-ui@next 和material-ui-next@next

material-ui@next加载一个图标用法：

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

但我想动态加载 material-ci-icons 图标

例如，我有可变菜单

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

如何根据菜单在页面上显示图标

【问题讨论】：

您应该详细说明您想要做什么以及您尝试实现的目标，并就您遇到的问题提出一个具体的问题。提供上下文和详细信息后，回答问题会容易得多。你甚至没有提到你在这里使用的技术。

标签： node.js reactjs redux material-ui

【解决方案1】：

我也遇到过这个问题。我使用这个链接： dynamically load an icon。将我的菜单图标名称保存在数据库中并使用 <Icon>{props.iconName}</Icon> 但是，它对我不起作用。所以因为我没有太多时间我只是将材质ui图标的SVG格式保存在我的数据库中并在我的JSX中恢复它。

我从材料 ui 图标网页的浏览器的检查元素中获得了 SVG 格式的图标

【讨论】：