How to use material icons in canvas?

Question

For fontawesome you can include the font and use the icon character code like:

ctx.font='30px FontAwesome';
ctx.fillText('\uF047',20,50);

But what about Google material icons? I couldn't find any solution online.

You can get Google material icons in an SVG format. Please take a look at [XMLSerializer.serializeToString()](https://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer/serializeToString) and [encodeURIComponent](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) — enxaneta, May 22 '19 at 13:05

score 4 · Answer 1 · answered Jun 23 '20 at 16:42

4

Provided you already have the font loaded you can use it in a similar fashion as FontAwesome. Instead of the unicode string you just use the name of the icon.

context.font = '24px Material Icons';
ctx.fillText('calendar_today',20,50);

answered Jun 23 '20 at 16:42

mr fat

75
1
9

1

heads up that context.measureText won't report the correct width with this. – THE AMAZING May 19 '22 at 19:56

score 0 · Answer 2 · answered Jan 05 '20 at 20:22

If you are still looking, I found an answer here:

How to render icon fonts on HTML canvas and Material Design icon fonts in particular?

In a nutshell: it uses a FontFace object to load the material icons. Then you use the fillText method from the canvas context to draw the icon.

How to use material icons in canvas?

2 Answers2