Material-ui: outline version of icon

问题

I'm using material-ui in my react web application. I need the icon 'action/description' in a component but in the outline version.

According to the docs:

For convenience, the full set of google Material icons are available in Material-UI as pre-built SVG Icon components.

So I can do this to get the "filled" version:

import ActionDescription from 'material-ui/svg-icons/action/description'

<div className="number">
  <ActionDescription />
</div>

But how do I get the "outline" version? I tried playing with css but didn't succeed:

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

回答1:

Not sure if this was available when you posed the original question, but from the official v1.3.1 documentation:

For "themed" icons, append the theme name to the icon name. For instance with the

The Outlined delete icon is exposed as @material-ui/icons/BuildOutlined

The Rounded delete icon is exposed as @material-ui/icons/BuildRounded

The Two Tone delete icon is exposed as @material-ui/icons/BuildTwoTone

The Sharp delete icon is exposed as @material-ui/icons/BuildSharp

See https://material-ui.com/style/icons/

edit: confirmed that this requires the latest beta package of @material/icons which may not have been available a few months ago. Install with:

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

and you should be able to access the themed icon sets mentioned in the recent docs.

回答2:

The built-in icons are in filled style, so I think you have to manually make the outlined one.

I downloaded the svg file here: material icons official site.

Then you can add custom svg icon like this: (this is the outlined description icon)

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>

回答3:

To add to Marson Mao: Here is the guide for custom SVG Icons. Further, SvgIcon only needs the path. Working example:

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

来源：https://stackoverflow.com/questions/50327142/material-ui-outline-version-of-icon

标签

reactjs

material-ui