我在我的 React Web 应用程序中使用了 material-ui。我需要一个组件中的图标“操作/描述”，但在大纲版本中。
根据文档：
为方便起见，Material-UI 中提供了全套 google Material 图标作为预构建的 SVG 图标组件。
所以我可以这样做以获得“填充”版本：
import ActionDescription from 'material-ui/svg-icons/action/description'
<div className="number">
<ActionDescription />
</div>
但是我如何获得“大纲”版本？我尝试使用 css 但没有成功：
<div>
<ActionDescription style={{black: "black"}} color="transparent" />
</div>
不确定在您提出原始问题时是否可用，但来自官方 v1.3.1 文档：
对于“主题”图标，将主题名称附加到图标名称。例如与
- Outlined 删除图标显示为@material-ui/icons/BuildOutlined
- 圆角删除图标显示为@material-ui/icons/BuildRounded
- Two Tone 删除图标显示为@material-ui/icons/BuildTwoTone
- Sharp 删除图标暴露为@material-ui/icons/BuildSharp
见https://material-ui.com/style/icons/
编辑：确认这需要最新的测试版软件包，@material/icons几个月前可能还没有。安装：
npm install @material-ui/icons@2.0.0-beta.1
并且您应该能够访问最近文档中提到的主题图标集。
内置图标是填充样式，所以我认为您必须手动制作轮廓的图标。
我在这里下载了 svg 文件：材料图标官方网站。
然后你可以像这样添加自定义 svg 图标：（这是概述的描述图标）
import SvgIcon from 'material-ui/SvgIcon';
<SvgIcon>
<g>
<rect x="8" y="16" width="8" height="2"/>
<rect x="8" y="12" width="8" height="2"/>
<path d="M14,2H6C4.9,2,4,2.9,4,4v16c0,1.1,0.89,2,1.99,2H18c1.1,0,2-0.9,2-2V8L14,2z M18,20L6,20V4h7v5h5V20z"/>
</g>
</SvgIcon>
添加到 Marson Mao：这是自定义 SVG 图标指南。此外， SvgIcon 只需要path。工作示例：
const ActionDescriptionOutline = (props) => (
<SvgIcon {...props}>
<path d="M14,2H6C4.9,2,4,2.9,4,4v16c0,1.1,0.89,2,1.99,2H18c1.1,0,2-0.9,2-2V8L14,2z M18,20L6,20V4h7v5h5V20z"/>
</SvgIcon>
);
<RaisedButton
icon={<ActionDescriptionOutline />}
onClick={this.handleToggle}
/>