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

Question

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

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

屏幕上仅显示文字。

图标是https://material.io/icons/的帮助图标。图标库已安装。根据{{​​3}}我们应该

  

如果图标字体支持连字，请参考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>标记。