Using font awesome svgs to create icon button


Font awesome comes with a lot of nice svgs.
I would like to be able to create an icon button which is basically a disc that has a color and a white icon.

I’ve been able to load the svg as a texture and using hasAlpha to get black icons showing in my scene.

But I’m struggling with what the best way would be to create a material that is a solid color and has the icon in white on top without having to change the font awesome icons?


How would you solve it?


Something like that?

More like this where the mesh is a disc and the icon should be in the middle of the disc and be white.


I might have to resort to manually changing the fill of the svg, but it would be awesome if there was a way to invert a texture :slight_smile:


Only caveat: it requires two draw calls

1 Like

Well, this is unrelated but . . .
. . . I have used MeshWriter to form SVG shapes in 3D meshes.

Yeah that just what I want.

Another question
If the svg was white, would I be able to do it in one draw call?

Thats very interesting!
I can definitely see the another use for that :slight_smile:

Well, glad to hear it.

Creating glyphs for MeshWriter includes taking the output of a font file into something svg-like and then putting it into the “MeshWriter” format. (The process could use some automation but I am investing elsewhere.) Once I figured that out, I realized that any SVG shape could be replicated. Hence the anchor.

If you have some simple SVG shapes, or letters in a font, I am open to taking special requests. I can put them in Web-dings.

1 Like

I just discover through this thread that we’re able to load a svg as texture :smiley: