How to use custom SVG icons with izzilab:material-ui?

react
1

Trying to figure out a way to use a custom icon in izzilab: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

2

This should definitely work!

3

You could also make it a component. That’s how Material UI handles them. Here’s an example. This way it would function consistently with the existing Material UI SVG icons.

4

Thanks for the ideas – looks like I still have a bit to learn in getting icons from inkscape to something I can embed in HTML.

5

The link is broken. Could you kindly update it?

6

They use a pure render function. Just check the source on github for any of their icons:
https://github.com/callemall/material-ui/blob/master/src/svg-icons/action/accessibility.js

7

What would be the syntax to reference the SVG file?

8

You can just put in the path without /public