IcoMoon in Unity

I’d like to start off by saying I don’t know how this approach compares to other possible approaches to icons. For now it works and isn’t that annoying to deal with when I have to add/change icons. After watching this amazing talk recently I don’t see any reason to change my approach at this point.

Recently I spent some time cleaning up the UI in From The Ford and as part of this effort I needed some proper icons. What wasn’t proper about the old icons? Would you recognize this as a play icon?

I first started down the path of creating images for each icon that was needed. At some point while looking for icons I decided to check out the icomoon icon set. Some of them weren’t bad and I proceeded to go through a painful process of trying to convert screenshots of the icons into images. This worked but it wasn’t ideal. At this point I got to thinking.
Why can’t I just use icomoon as it was intended?
If icon fonts work on the web, shouldn’t they also work in Unity?

Icon Fonts

For those of you that aren’t familiar with icon fonts – The general idea is to create a set of font files with icons instead of regular characters. When used on the web this allows you to fairly easily change sizes, colors, and even add shadows to icons. The icons will scale well compared to traditional image tag icons. The web does seem to be moving to svg tags for icons, but that isn’t really relevant to this post.

Creating your icon font

Navigate to https://icomoon.io/app/#/select to get started with the icomoon app. The icomoon app allows you to select which icons you want in your icon font. There are a number of different icon libraries available. The licenses on them vary, so pay attention if you are planning on using them for more than just placeholders.

First select any icons that you want to include.

Click “Generate Font”, this will show you any icons that you have selected. For now click download

Extract this zip into a location inside of your Unity project.

At this point Unity won’t be very happy. The zip contains a .js file which Unity tries to treat as a UnityScript file. It may be possible to have Unity ignore this file but I didn’t spend much time looking into it. Instead copy the contents out of demo-files/demo.js and add them into the demo.html file. Next remove demo.js.

The changes to demo.html will look something like this

Using your icon font

Now you are ready to create some icon buttons. We will assume that you already have a button in your scene.

For the text element underneath your button, modify the font to be icomoon. Then copy the unicode character (the empty box shape, it should select when you click it) into the the Text value.

That’s it. From here you can modify the color and size of your icon as if it were regular text.

If you need to modify the icon of a button in code, you’ll need to use the hexadecimal value for the unicode character. In this example the play icon has a hexadecimal value of ea1c (find this value in demo.html). This means that the code to set the text to the play icon will be

iconButtonText.text = "\uea1c";

If you need to modify your icon font you can import the selection.json file from the extracted zip back into the icomoon app. The Read Me.txt file included in the zip also speaks to this.

Some thoughts

Having to paste invisible characters into the unity inspector is kind of a pain, but no more painful than some of the other annoyances I have in Unity.
If I was using this heavily in code, I’d probably abstract out the unicode hexidecimal values into some string constants. This is much easier to understand.

iconButtonText.text = Icons.PlayButton;

Otherwise I have no issues with this approach. Long term we may create our own nicer looking icons and at that point I assume they’d probably get switched to images.

Leave a Reply

Your email address will not be published. Required fields are marked *