Question

我正在使用Material UI，我有以下内容：

import IconButton from 'material-ui/IconButton';
<IconButton iconClassName="muidocs-icon-custom-github" tooltip="bottom-right" tooltipPosition="bottom-right" />

当我测试工具提示时，图标未显示，但工具提示在悬停时显示。有人可以帮我创建一个例子吗？我错过了图标网址吗？

Answer 1

似乎这是Material-UI文档的问题。查看此Link了解详情

如果您想放置github图标，那么您可以尝试使用SVG图标。您似乎必须在index.html中包含Google材料图标样式表才能使其正常工作。

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

一般来说，如果我们想使用svg图标，我会在下面进行操作。

import IconButton from 'material-ui/IconButton';
import Remove from 'material-ui/svg-icons/Content/remove';

<IconButton tooltip="Hide" style={{float: 'right'}}  iconStyle={{marginTop: -25, color: myTheme.color}} onClick={this.removeMinus}>
   <Remove color=“red” />
</IconButton>

Answer 2

确保您的<IconButton>有一个子图标组件。在您的示例中，它不会在屏幕上呈现任何内容（除非您悬停），因为它没有图标引用。

材质UI <iconbutton>未显示

2 个答案: