Question

我正在使用Material UI。在文档中显示我可以使用：

 import Icon from "@material-ui/core/Icon";
   ...
  <Button variant="contained" color="primary" className={classes.button}>
     blabla
      <Icon className={classes.rightIcon}>send</Icon>
  </Button>

但是它显示的是带有文本“ BLABLA SE”的按钮，这是错误的。

但是当我使用时：

import SendIcon from "@material-ui/icons/Send";
....
    <Button variant="contained" color="primary" className={classes.button}>
     Blabla
     <SendIcon className={classes.rightIcon} />
    </Button>

它工作正常，在其左侧带有文本BLABLA和发送图标。

在doc中提供的sandBox中均可使用。那么为什么第一种情况没有为我工作？

Answer 1

我认为此文档示例中有一个错误：https://material-ui.com/demos/buttons/#buttons-with-icons-and-label

import Icon from '@material-ui/core/Icon';

应该

import SendIcon from '@material-ui/icons/Send';

这是一个工作版本，其中有以下替换内容：https://codesandbox.io/s/k3rjyoq32v

通过此路径@material-ui/core/Icon导入的模块本身不是svg图标，而是此处记录的Icon组件：https://material-ui.com/api/icon/

在material-ui中，基本上有三种使用图标的方式：

@material-ui/core/Icon：用于显示字体图标的组件。参见https://material-ui.com/style/icons/#font-icons
@material-ui/icons：带有一组Material Icons的软件包，这些软件包已转换为可用作React组件的SVG图标。参见https://material-ui.com/style/icons/#svg-material-icons
@material-ui/core/SvgIcon：使用任何SVG作为图标的组件。参见https://material-ui.com/style/icons/#svg-icons

Answer 2

我认为您已经解决了自己的问题，因为我已经看到您的代码和框中显示了该图标。

遇到相同的问题，发现我没有在 index.html 中导入材质图标字体系列。

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

只有上述导入才能使组件正常工作。

在Material UI图标中无法按预期工作

2 个答案: