Add custom icons with Material Icons

css svg material-design google-material-icons
Antonio Morales picture Antonio Morales · Apr 25, 2017 · Viewed 8.6k times · Source

I am using the official google material icons: https://material.io/icons/

I want add some icons created by me, in svg.

how can I do it?

Answer

NickSlash picture NickSlash · Apr 25, 2017

You will need to create your own web font.

If you've already got SVGs then you can possibly use something like https://icomoon.io/app/ to create one. I've not used it so can't help any further with that.

If not, you'll need to find a font authoring tool that exports to woff or woff2 or whatever web font format you need. (I think the material one is woff2)

Related questions

How to enlarge the SVG icon in material-ui iconButtons?

Has anyone build webpages using react.js and the Material UI library? How should I resize the icon size? It is a svg icon. I just built an "create new" component, which is a piece of material paper with a …

Read More
Set background color of SVG Material Design Icons

I make use of the Material Design Icons using the method described here: https://github.com/google/material-design-icons#using-svg-sprites However, the icons always end up in black. How am I supposed to change their color, say, into white? I am …

Read More
How to change the color of an svg element?

I want to use this technique http://css-tricks.com/svg-fallbacks/ and change the svg color but so far I haven't been able to do so. I put this in the css but my image is always black, no matter what. …

Read More