在 Material UI 图标中没有按预期工作

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左侧有一个文本和一个发送图标。

在文档中提供的沙箱中，两者都可以工作。那么为什么第一种情况对我不起作用？

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中，基本上有三种使用图标的方式：

1. @material-ui/core/Icon: 用于显示字体图标的组件。见https://material-ui.com/style/icons/#font-icons

2. @material-ui/icons：包含一组转换为可用作 React 组件的 SVG 图标的Material Icons 的包。见https://material-ui.com/style/icons/#svg-material-icons

3. @material-ui/core/SvgIcon: 使用任何 SVG 作为图标的组件。见https://material-ui.com/style/icons/#svg-icons