CODEWITHSUNDEEP
svgreactjsmaterial-ui
ash-g
ash-g

Reputation: 13

How to add a custom svg icon to the Material UI font icon?

The icon I am looking for is pretty unique, so I think I'm going to have to create my own. (I'm looking for an icon of a closed door) I found a PNG file similar to what I need, but I need to figure out a way to integrate it with the material ui font icon.

Is there a way to create the js file for it, similar to the ones that exist? Like this one: https://github.com/callemall/material-ui/blob/master/src/svg-icons/action/accessibility.js I don't know where the "path" comes from, does anyone know?

Thanks in advance!

Upvotes: 1

Views: 4104

Answers (1)

Elod Szopos
Elod Szopos

Reputation: 3526

Those were created using design tools specifically created for this purpose. Creating path based SVG Icons will take a bit more time if you're unexperienced in the field, however it is most likely you can create your own with some free online tools and a bit of patience.

Once you did (the data doesn't necessarily have to be in path format for the SVG, you can create any valid SVG using the available syntax and attributes which you can find info about right here), you can simply replicate one of those JS files and import / export them wherever applicable and use it in a similar fashion as you would any Material UI one.

Such an online tool could be this one for creating what you need:

http://editor.method.ac/

Upvotes: 1

Related Questions