Using custom icons in a Flutter app

6 months ago, I quit my job as a senior data warehouse consultant and started working on Tenere as mobile front-end developer. It was quite a big change and a questionable career decision. Yet, I was bored working on similar projects all the time and I was looking for a challenge. Also, the timing seemed right to experiment the dream of owning my own business which was long overdue.

My state of mind before I started working on Tenere

Tenere is not public yet. (You’ll have to wait at most a couple of months more.) So, I will try to explain what the app is for while trying not to disclose so much. Tenere will be a real estate rental platform. You can list your properties and/or you can search and apply for properties you would like to rent. We are working on some fancy features which as far as we know no other app has yet. This much advertisement is enough for now, I believe.

We use Flutter to develop our mobile app. There are a couple of reasons for this. The most important one is we don’t have so much resources to allocate for the development of two completely separate apps for Android and iOS. That left us with a couple of cross-platform frameworks. After taking advice from some experts (Who am I kidding? Friends.) and doing our research we decided to go on with Flutter. Oh, I have to say Maximilian Schwarzmüller’s Learn Flutter & Dart to Build iOS & Android Apps course on Udemy had a great effect on our decision.

Starting with this post, I will try to share some of my experiences in Dart & Flutter. Let’s get on with this post’s subject.

Sorry for such long introduction. Most of the time, I fear that I will be misunderstood and talk too much. That is the main reason people don’t understand me.

Flutter has an icon library of its own and you can search and find more icon libraries at pub.dev. Yet, you might have a design professional in your team just like we do and he might decide that you need custom icons in your app.

Icons are created in SVG format which allows you to flavor them with different sizes and colors in your app. Though you cannot use SVG files directly in your Flutter app. So, how do we use SVG files as icons?

Firstly, for some reason, SVG files our designer has sent me had some problem with them. As you can see in the below image, the icon is too small. This happens because the SVG file is not compound path.

This is a huge waste of your screen space.

My solution was to load the SVG files to https://icomoon.io/app/ and download them back again as SVG without doing any modifications. This solved compound path problem.

After that, I have uploaded SVGs to https://fluttericon.com/. This site takes SVGs, converts them into a font and creates a Dart file for you to use the icons in your app. Let me explain the details.

Once you upload your icons, you can give a name to your Dart class and hit Download button. This will download a compressed file and when you uncompress you will find a folder containing a config.json file (which can be used to load progress if you want to add or remove some icons), a fonts folder which include a TTF file and a Dart file.

You need to put the TTF file anywhere in your Flutter app. As you can see below I have placed it in the assets/icons folder. (Actually, I have more than one icon library. (4 to be exact. (How many parentheses are we allowed to open inside one another?)))

You need to let Flutter know where your TTF file is. You do that in your pubspec.yaml file. Here is how it is supposed to look like.

flutter:
  # Some other stuff here.
  fonts:
    - family: TenereIcons
      fonts:
        - asset: assets/icons/TenereIcons.ttf

One last step is needed. Take the Dart file in the folder you downloaded and place it in your application. I modify that file to match my development standards. You can find a sample below. As you can notice, we use the font family we loaded (TenereIcons) and create IconDatas from that font family. The important data in that Dart file is the name and location of each glyph in the font file.

import 'package:flutter/material.dart';
abstract class TenereIcons {
  static const String _FONT_FAMILY = 'TenereIcons';
  static const IconData NOTIFICATION_OUTLINE = const IconData(
    0xe82a,
    fontFamily: _FONT_FAMILY,
  );
  // Same code with different names and parameters over and over again
}

Now we have IconDatas, we can use them anywhere in the app.

Icon(
  TenereIcons.NOTIFICATION_OUTLINE,
  size: ThemeConstants.ICON_SIZE_6, // 24.0
  color: TenereColors.GREY, // const Color(0xffa6a6bb)
),

The result looks good to me. Here is Tenere’s profile screen including the sample icon.

The reason that you see DEBUG badge on top right is that I am too lazy to create a release version only for this post.