如何在React项目中获取Material-UI的action/description轮廓版图标？

嘿，我来帮你搞定这个问题！你之前尝试用CSS修改填充版图标来得到轮廓版的思路走不通，原因很简单：填充版的SVG图标本身是实心路径，没法通过简单的颜色调整转换成轮廓样式。不过官方其实已经为我们提供了专门的轮廓版组件，直接用就好啦！

针对你正在使用的旧版Material-UI（基于material-ui/svg-icons的版本），轮廓版的description图标是单独的组件，你只需要修改导入路径和组件名：

// 导入轮廓版图标组件
import ActionDescriptionOutline from 'material-ui/svg-icons/action/description-outline';

// 在你的组件中使用
<div className="number">
  <ActionDescriptionOutline />
</div>

为什么之前的方法不行？ #

你之前写的代码里还有个小错误：style={{black: "black"}}是无效的，应该是style={{color: "black"}}，但就算修正了这个，也没法把实心图标变成轮廓——因为填充版图标的SVG路径是闭合的实心形状，而轮廓版是专门设计的描边路径，两者的SVG结构完全不同。

如果之后你升级到Material-UI v1及以上版本（现在主流是MUI v5），导入方式会变成这样：

import DescriptionOutlined from '@mui/icons-material/DescriptionOutlined';

这样就能直接拿到你想要的轮廓版图标啦！

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