Javascript 材料界面<；图标>；不'；无法正确渲染

我是react的新手，我使用MaterialUI来完成事情

我遇到的问题是，尽管图标可以正常工作，但它不会显示：

每份文件

import Icon from '@material-ui/core/Icon';

...

<Icon className={classes.icon} color="action">
    add_circle
</Icon>

从“@material ui/core/Icon”导入图标；
...
加上一个圆圈

我正在尝试使用以下方式获取导航项目：

import React from 'react';
import { NavLink } from 'react-router-dom'
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Icon from '@material-ui/core/Icon';
import InboxIcon from '@material-ui/icons/Inbox';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import _ from 'lodash';


const SideMenuItems = ({ menuItems }) => {

    return _.map( menuItems ,( menuItem )=>{

        const { text, link, icon } = menuItem;

        return (
            <NavLink to={link} key={link}>
                <ListItem>
                    <ListItemIcon>
                        <Icon>add_circle</Icon>
                    </ListItemIcon>
                    <ListItemText inset primary={text} />
                </ListItem>
            </NavLink>
        );
    });
};

从“React”导入React；
从“react router dom”导入{NavLink}
从“道具类型”导入道具类型；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/Icon”导入图标；
从“@material ui/icons/Inbox”导入Inboxion；
从“@material ui/core/ListItem”导入ListItem；
从“@material ui/core/ListItemIcon”导入ListItemIcon；
从“@material ui/core/ListItemText”导入ListItemText；
从“lodash”进口；
常量SideMenuItems=（{menuItems}）=>{
return.map（menuItems，（menuItem）=>{
const{text，link，icon}=menuItem；
返回(
加上一个圆圈
);
});
};

所有内容都可以渲染，但图标只渲染文本。我已经尝试过声明显式图标，它工作了（例如

），但我需要从配置对象动态生成它，所以我不能使用它

任何帮助或解释都将不胜感激

---

提前感谢

您可能忘了在

index.html

文件中导入图标字体。您需要添加以下样式表：

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

这将在文档的一节中进行解释。请注意，

HomeIcon

是一个SVG图标，它呈现的是一个

SVG

元素，而不是使用字体。

这对我来说很有效

---

也发生在我身上。别担心

import AddCircleIcon from '@material-ui/icons/AddCircle';

<AddCircleIcon style={{ fontSize: 50 }} color="primary"></AddCircleIcon>