Material-ui: outline version of icon

Question

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>

Answer 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/[email protected]

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

Answer 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>