Material-ui: How to use a custom Icon

[cbrake]

Hi,

Trying to figure out a way to use a custom icon in material-ui. I have the custom icon in a SVG file. Does it need processed into a sprite before I can use it in:

<SvgIcon {...this.props}>
        <path d="?????"></path>
</SvgIcon>

If so, what is the best way to make this happen? Or, can I simply put the SVG in the public dir, and reference it directly?

Thanks,
Cliff

[mbrookes]

Hi, we've updated the docs. Let me know if your question still isn't answered.

[cbrake]

got it -- thanks!

[dukuo]

Would you please give a resource to do it? Can't seem to find it. Thanks!

[mbrookes]

http://www.material-ui.com/#/components/svg-icon See Custom SVG Icon example code.

[mbrookes]

And here for v1: https://material-ui.com/style/icons/

[dukuo]

I think it might be a good idea to include this use case in the SvgIcon docs:

[...]
import MyAwesomeCustomSVG from './Route/to/my/file.svg
[....]

render() {
 <SvgIcon>
    <img src={MyAwesomeCustomSVG} alt="" width="300" height="200" />
 </SvgIcon>
}

I seriously spent like two days trying to reach the optimal code combination to get custom SVGs going in react haha

[braco]

To any readers, @dukuo's answer doesn't seem possible now, and only <path /> works.

[glenne]

For v1, what is the example that shows how to load content for SvgIcon from a .svg file? Should I just avoid using SvgIcon and use <img src={MyImportedSvgFile}/>.

[KKrisu]

Good question @glenne
I currently have the similar concern.

[nagarajay]

@glenne @KKrisu - Hopefully this will help.

const Icon = (props) => (
{...props}
width="width"
height=".height"
viewBox="0 0 width height"
All the 3 values are actually given in the SVG file. Just take from there.
>
d="..." - Please fill the value of d that is there in the SVG file.
/>
Incase multiple paths are given in the SVG file just copy all
);

const SvgIconExampleSimple = () => Icon Component -- Somehow not able to past the exact code.

export default SvgIconExampleSimple;

Also with the iconStyles you will be able to use the icon for different sizes.
const iconStyles = {
marginLeft: 24,
width: 100,
height: 100
};

[harrycollin]

For any readers who are still wondering about how to use your own SVG you can simply ignore the SvgIcon component and use an img in place of it. Here is an example of a StepLabel using it.

<StepLabel icon={ <img src={require("images/milestones/bootstrap.svg")} alt="" width="50" height="50" /> } />

[Swainstha]

what is StepLabel then?

[harrycollin]

what is StepLabel then?

I've updated my original comment.

[clytras]

Check my answer at StackOverflow How to use an SVG file in a SvgIcon in Material-UI.

I used an <Icon/> component and addes an <img/> element inside with the SVG file. Added height: 100% to the image and text-align: center to the root elelement of the <Icon/> and that did the trick:

[crossjs]

import { ReactComponent as Github } from "./images/github.svg";

// then
<Github />

in CRA projects