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。但它只应用classNames而不设置任何连字。我不确定这是否是材料中的错误。

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

使用iconClassName到material-ui FloatingActionButton

1 个答案: