Add custom font-icons to a flutter project

While building our new app Cupio (the site is in German, but it will be translated in the near future) the other day, I needed to import a custom icon into my Flutter project. Even though Flutter comes with a broad variety of icons and by the writing of this article there are event two more icon plugins (font awesome and open iconic built by Brian Egan), I was still missing a proper icon for “fire”.

The font-awesome icon was rather boring

Of course the easiest way to insert an icon would be to just import an image, but since I am a big fan of icon-fonts due to their intrinsic ability to scale very well on different devices and screens, I wanted to be able to add icons in a separate font. After looking for an easy solution to this problem, I came up with the following solution:

1. Go to icomoon.io, create an icon font and remember the code point
2. Reference the font in your pubspec.yaml with the correct font-family name
3. Integrate the icon in your code using the codepoint + Font-family name

More detailed:

1. Create your own icon font

EDIT 04.04.2018: As mentioned in the comments, Mike Hoolehan created a very nice website which allows you to directly create the icon-font you want without using the more complex icomoon web app. Just select your icons and press the download button. It even comes with relevant dart code and config.json. Even though this has made creating your own font icons pretty easy, I’d still recommend at least reading step 2. and 3. to understand what you need to do to integrate this in your code.

You can find the site here: http://fluttericon.com/

DEPRECATED VERSION:

Creating a minimalistic icon font was actually pretty easy. For this, I used the awesome icomoon web app, which allows you to create your own icon font from multiple sources (including font awesome! You can look up the according licenses here). Just go to the app and search for a good icon.

The interesting part of my search results for “fire”

I selected the left “fire” (as in “super-hot-fire”…but I am not a rapper…) and confirmed the selection with the button on the bottom of the page by clicking “Generate Font”(it took me a while to find this button since my monitor is in portrait mode, but I guess this design was a typical case of “mobile-first dude!”).

My Fire-Font

On the next page, you can see an overview of your font. In my case there is only a single icon in there, but you could put more in there if needed. Below, you’ll notice the “e9a9” which is the unicode code point of the icon inside the font. You can lookup this value later by manually inspecting the generated font, but for now I’d recommend just writing it down.

Proceed to download the font using the Download-Button on the bottom of the page (yeah…again at the bottom of the page).

Note: You can change the name of the font family (as well as the zip file) using the settings-button next to the download button. Why this might be useful is explained in the next “Note”.

2. Integrate the font into your flutter project

Open the downloaded zip-file and extract it wherever you like. Copy the *.ttf file (for me it was called “icomoon.ttf” by default) from the fonts folder and paste it somewhere in your flutter-project folder. Since I am German, I like my angles right, my humour non-existent and my folders organized, I created a folder called “fonts” in the root directory of the project and pasted it there.

Then, open your pubspec.yaml and add a new font-section under “flutter” using my fonts/icomoon.ttf file in the assets:

My exemplary font section

Note: Afaik the font-family must match the font family defined in your font file. You can rename the file, if you change the asset description, but you can not change the name of the font family without also changing the name of the font family inside the font itself. If you want to change the font family name or other details of a font, you can do so before downloading as mentioned in the “Note” above or use a tool like font-forge after downloading a font.

3. Integrate the font into your code

This is by far the easiest part, if every step up to this point was working properly. In your dart-code, just adapt the following code to create a new IconData Object, which you can then use to create a new Icon.

const IconData(0xe9a9, fontFamily: ‘icomoon’);

The avid reader will probably already have understood what the parameters describe, but for the sake of completeness I’ll explain it (again: I am German):

“0xe9a9” is the proper hex-representation for your unicode-code point which you wrote down earlier and basically defines where in the font-file the icon can be found.

“fontFamily:’icomoon’” tells dart in which font-asset flutter should look for the icon. If you leave out the fontFamily, dart uses the default font of flutter and won’t find your icon but insert nothing or another weird symbol. This value must match the name of the font family you set in your pubspec, which in turn must match the name of the font family in your font-file itself.

My icon, integrated into a Tab-Bar

I hope this helped you integrate a custom, awesome, automatically scaling font icon in your flutter project.

Also, let me know if there is a better way to do all of this, I am all ear!

Take care,

Ben

P.S. from 10/09/2017: If you run into the issue that one of your icons is for some reason cropped (happened to me on iOs devices… Not the simulator; mind you, that would’ve made it way to easy to understand -.-), you can try using fontforge (or any other Font-Editor) to:

1. Open your font
2. Find the broken glyph
3. Check if it is centered properly
4. Center it properly if not. In Fontforge you can do so by opening the glyph editor (double-click the glyph) and go to “Metrics” > “Center in Width”.