During my upcoming game development, I have realized that paying a graphic designer for every single thing is quite time-consuming and also a bit expensive. I needed a simple button for a fullscreen toggle. Some time ago, I needed to rework all buttons in my game. All buttons have got text inside the image, but I needed to separate it, because of localization. So I separated all text from image graphics and create JSON i18n files for every language that I wanted to include in the game. Ok well, but what about icons? Do I need to pay every time to the graphic designer when I need a new button? I have a button image (background), I need only an icon. Yes, I can create icons on my own. Or? Hmmm, There is another approach. What about using some web icon fonts like FontAwesome, Google Material Design Icons, or similar? Yes, that way exists!

Let’s say, we have a working Phaser 3 project. First download .tff font from the original Material Design Icons repository https://github.com/google/material-design-icons/blob/master/font/MaterialIcons-Regular.ttf. Add font inside your project, I put it into the assets folder. Now we need to load font to be able to use it inside the Phaser project. We can load it in a CSS file and then create a fake HTML element, but there is a better newer approach called CSS Font loading API. Thanks to this API, we can dynamically load fonts in Javascript. So we load font.

const font = new FontFace("Icons", "url('./assets//MaterialIcons-Regular.ttf')");
(document.fonts as any).add(font);
font.load();

document.fonts.ready.then(() => {
      // Use your font here
});

The first argument of FontFace is font name, it is user-defined, and you can use your own idea. The second argument is the path to your downloaded font, as I said, I put it into the assets folder. Then you need to add it into document fonts and load it. Font loading is an asynchronous operation, so we can not use it immediately, but need to wait for the font to be loaded. We can use our font in ready promise, or we can load it in some preload state during assets loading.

Now we can pick our desired icon on https://fonts.google.com/icons?selected=Material+Icons+Outlined:home:&icon.style=Outlined and copy the Code point.

Finally, we can create our material icon in Phaser.

const text = this.add.text(0, 0, '\ue8b8', {color: '#6002EE', fontSize: '50px', fontFamily: 'Icons', padding: {left: 5, right: 5, top: 5, bottom: 5}});

Important here is the content of the text (3rd argument), which is copied code point with \u prefix, which means Unicode. Also, we need to specify, that text uses our font, see font family, with our defined font name. Almost everything is good, but sometimes some icons got their top cut off. I do not understand why, but we can fix it using padding, and try to experiment with this property. I used 5px.

That was not so hard, and I think, I will use this approach more often. The good part is, I can combine it with the button background image and style icon in Phaser and avoid the need for a graphic designer. Pretty cool, isn’t it? You do not need to use only Material design icons, but any font icons on the web, like Font Awesome… Just care font license!