使用iconClassName来material-ui FloatingActionButton

Question

如何使用 FloatingActionButton 的 'iconClassName' 属性在其中显示图标？我知道如何以这种方式分配图标：

import IconMenu from 'material-ui/svg-icons/navigation/menu'
...
<FloatingActionButton>
    <IconMenu />
</FloatingActionButton>

但这不是我想要的。根据文档，我可以使用“iconClassName”道具来分配一个图标。

我在 HTML 文件中包含了材料图标的链接：

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

但是现在，无论我如何尝试分配图标名称，它都不会显示。我用破折号尝试了这些组合：

<FloatingActionButton iconClassName='menu' />
<FloatingActionButton iconClassName='navigation-menu' />
<FloatingActionButton iconClassName='material-icons-menu' />
<FloatingActionButton iconClassName='material-icons-navigation-menu' />

或带下划线：

<FloatingActionButton iconClassName='navigation_menu' />
<FloatingActionButton iconClassName='material_icons_menu' />
<FloatingActionButton iconClassName='material_icons_navigation_menu' />

它们都不起作用。这样做的正确方法是什么？谢谢。

Answer 1

我认为首选的方式是这样使用它：

<FloatingActionButton>
  <FontIcon className="material-icons">home</FontIcon>
</FloatingActionButton>

如果定义了 iconClassName，FloatingActionButton 无论如何都会在其中呈现一个 FontIcon。但它只是应用类名而不设置任何连字。我不确定这是否是 material-ui 中的错误。

https://google.github.io/material-design-icons/