CODEWITHSUNDEEP
canvashtml5-canvasgoogle-material-icons
Hristo Enev
Hristo Enev

Reputation: 2541

How to use material icons in canvas?

How to use material icons in canvas?

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.

Upvotes: 1

Views: 2741

Answers (2)

mr fat
mr fat

Reputation: 95

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);

Upvotes: 5

Woody
Woody

Reputation: 76

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.

Upvotes: 0

Related Questions