将材质UI图标添加到React中的FontIcon Material-UI组件

Question

我正在尝试使用React中的Material-UI FontIcon组件显示Material-UI图标。我的代码：

<FontIcon className="material-icons"/> 
    Help 
</FontIcon>

屏幕上仅显示文本。

图标是https://material.io/icons/的帮助图标。图标库已安装。根据http://www.material-ui.com/#/components/font-icon我们应该

如果图标字体支持连字，请引用className中的字体并将图标名称括在FontIcon标记中。我安装了库，但我不确定它为什么不工作？

实现这个的正确方法是什么？

Answer 1

从您提供的链接示例中，它表示应在代码中引用公共字体。

<FontIcon className="material-icons" style={iconStyles}>home</FontIcon>

您可以决定使用npm下载图标：

npm install material-design-icons

或者更好的是将下面的代码添加到主html文件的head部分。

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

对于您的情况，它应该是：

<FontIcon className="material-icons">help</FontIcon>

注意我使用小写help而不是Help作为图标名称。

我想认为自我关闭<FontIcon className="material-icons" />是一个错字，它应该没有/>，因为它有一个关闭</FontIcon>标签。