材质 UI 图标未正确渲染答案

【问题标题】：Material UI Icons not rendering correctly材质 UI 图标未正确渲染
【发布时间】：2019-10-05 05:42:19
【问题描述】：

很抱歉再次问这个问题，但我终生无法弄清楚发生了什么。我正在将我的 React 应用程序移动到一个 Angular 应用程序中，并且除了 material-ui/icons 之外的所有东西都可以正常工作，它们在那里，只是看起来不像他们应该的那样！

我使用的是最新的包，我的 index.html 文件中有样式的链接，我相信我正确使用了图标。

import { Close } from '@material-ui/icons'

<Close />

这就是它们在我的应用上的样子。 Bad Icons Image

我没有任何与 material-ui 或图标有关的控制台错误。

【问题讨论】：

【解决方案1】：

如果您的环境不支持 tree-shaking，推荐的导入图标的方法如下：

import Close from '@material-ui/icons/Close';

如果您的环境支持 tree-shaking，您也可以通过这种方式导入图标：

import { Close } from '@material-ui/icons';

以这种方式导入命名导出会导致每个图标的代码都包含在您的项目中，因此除非您配置 tree-shaking，否则不建议这样做。如果您启用它，它也可能会影响热模块重新加载性能。

启用摇树click me

【讨论】：

【解决方案2】：

应该是：

import Close from '@material-ui/icons/Close'

也试试这个：

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

<Icon>close</Icon>

【讨论】：