Material UI <IconButton>图标不显示问题求助及示例需求

先给你准信：确实是缺少图标资源导致的！ #

你猜的完全没错！muidocs-icon-custom-github这个类名是Material UI官方文档自己定制的图标类，并不是Material UI基础库自带的——文档站点自己额外写了这个类的样式来显示GitHub图标，但你这边没引入对应的样式或图标资源，所以图标自然出不来，tooltip能正常显示是因为这部分功能是IconButton自带的。

给你两个可直接运行的示例 #

方式1：用Material UI官方内置的GitHub图标（最省心） #

官方专门做了图标库，直接引入就能用，步骤如下：

首先确保安装了依赖（如果还没装的话）：

npm install @mui/material @mui/icons-material @emotion/react @emotion/styled

然后写组件代码：

import IconButton from '@mui/material/IconButton';
import GitHubIcon from '@mui/icons-material/GitHub';

function MyGitHubButton() {
  return (
    <IconButton 
      tooltip="GitHub" 
      tooltipPosition="bottom-right"
      color="inherit"
    >
      <GitHubIcon />
    </IconButton>
  );
}

export default MyGitHubButton;

方式2：用自定义图标（适合用自己的图标时） #

如果你一定要用muidocs-icon-custom-github这个类名，或者想加自己的图标，可以自己写CSS定义这个类：

先写组件代码：

import IconButton from '@mui/material/IconButton';
import './CustomIconStyles.css'; // 引入自定义样式文件

function CustomGitHubButton() {
  return (
    <IconButton 
      tooltip="bottom-right" 
      tooltipPosition="bottom-right"
      color="inherit"
    >
      <span className="muidocs-icon-custom-github"></span>
    </IconButton>
  );
}

export default CustomGitHubButton;

然后在CustomIconStyles.css里添加样式（这里用在线GitHub图标做示例，你可以换成自己的图标地址）：

.muidocs-icon-custom-github {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url('https://cdn-icons-png.flaticon.com/512/25/25231.png');
  background-size: contain;
  background-repeat: no-repeat;
}

小提醒 #

如果你用的是Material UI v4版本，导入路径要改成@material-ui/core/IconButton和@material-ui/icons/GitHub，其他逻辑是一样的哦！

内容的提问来源于stack exchange，提问作者MrToken