11

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>
olefrank
  • 6,452
  • 14
  • 65
  • 90
  • You can find a list of all the icons available here: https://github.com/mui-org/material-ui/tree/master/packages/material-ui-icons/src It seems like the one you want is not there yet. But you can suggest someone add it. I noticed some icons have the ~Outline suffix. – nbkhope May 24 '18 at 00:18

3 Answers3

10

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.

Community
  • 1
  • 1
Joey T
  • 774
  • 7
  • 11
1

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>
Marson Mao
  • 2,935
  • 6
  • 30
  • 45
0

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}
/>
Ben Richter
  • 71
  • 7
  • 1
    Thanks for the additional information! I use the `` here because that icon asked by OP is using some `` along with ``, so the `` is needed. It's just that you could put any valid structure inside ``. – Marson Mao Jun 01 '18 at 05:47