Reactjs 材质界面：图标的大纲版本

我正在react web应用程序中使用material ui。我需要组件中的图标“操作/说明”，但在大纲版本中

根据文件：

为方便起见，提供了全套google材质图标 在材质UI中作为预构建的SVG图标组件

因此，我可以这样做以获得“填充”版本：

从“材质ui/svg图标/action/description”导入ActionDescription

但我如何获得“大纲”版本？我尝试使用css，但没有成功：

<div>
  <ActionDescription style={{black: "black"}} color="transparent" />
</div>

---

内置图标是填充式的，因此我认为您必须手动创建概述的图标

我在这里下载了svg文件：

然后可以添加如下自定义svg图标：（这是概述的描述图标）

从“物料界面/SvgIcon”导入SvgIcon；

要添加到Marson Mao：以下是您的指南。 此外，SvgIcon只需要路径。 工作示例：

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}
/>

const ActionDescriptionOutline=（道具）=>(
);

当您提出原始问题时，不确定这是否可用，但来自官方v1.3.1文档：

对于“主题”图标，将主题名称附加到图标名称。比如说

• 轮廓删除图标显示为@material ui/icons/BuildOutlined
• 舍入删除图标显示为@material ui/icons/BuildRounded
• 双音删除图标显示为@material ui/icons/BuildTwoTone
• 夏普删除图标显示为@material ui/icons/BuildSharp

看

编辑：确认这需要最新的

@material/icons

测试包，几个月前可能还没有。安装时使用：

npm install @material-ui/icons@2.0.0-beta.1

---

您应该能够访问最近文档中提到的主题图标集。

您可以在此处找到所有可用图标的列表：您想要的图标似乎还没有出现。但你可以建议某人添加它。我注意到一些图标有~Outline后缀。感谢提供更多信息！我在这里使用

，因为OP要求的图标使用了一些

和

，所以需要

。只是您可以在

中放入任何有效的结构。

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}
/>

npm install @material-ui/icons@2.0.0-beta.1