How to use icons in Flutter

What is an icon?

If you are working on building an mobile app, chances are you will be using icons. According to Wikipedia, “in computing, an icon is a pictogram or ideogram displayed on a computer screen in order to help the user navigate a computer system.”

Why use Icons in mobile development?

If you use icons correctly,

• Icons can help users navigate the app without looking at the text.
• Icons can make your app more interesting and grab a user’s attention.
• Icons allows the developer to express their creativities.

So, how do I use Icons in Flutters?

There are three ways to use icons in Flutter. I’m going start with the easiest first.

1. It comes with the box!

After you install and setup Flutter for app development, you get access to all the official material icons from Google. To browse the list of classical Material icons, you can click at Google Fonts Material icons.

Before you start using the Icon class, make sure to look in your project’s pubspec.yaml and set uses-material-design: true. Here is an example of how to use the Icon class.

ListTile(

leading: Icon(Icons.favorite),

title: “Widget of the week”,

trailing: Icon(Icons.arrow_right)

);

This is an example of list tile with a row of heart icon in the most left, title in the middle and right arrow icon in the most right.

This is pretty easy to use, but what happens when you can’t find the icon you want to use.

2. Install more packages!

You can find pre made icon packages on pub.dev , install it and use the icons from the package. For example, you can go to pub.dev and search for material design icon.

I am just going to use material_design_icons_flutter package here. To install the package, I will have to go to my pubspec.yaml file, and in the dependencies: section of the file, add the following line:

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  material_design_icons_flutter: ^5.0.6595

ListTile(

leading: Icon(MdiIcons.car-pickup),

title: “Widget of the week”,

trailing: Icon(Icons.arrow_right));

Here the leading icon is not using the icon from the official material design icons.

But what if you can’t find the icons you like in any of the packages!

3. Flutter Custom Icons

This is probably the most complicate way out of all three, but it becomes easier once you try it.

Here are the steps on how to create flutter custom icons:

• Find the icons you like and download the SVG font file.
• You can’t just use the SVG in your flutter app, so we need to convert the icons for use in Flutter.
  • Go to fluttericon.com , drag the SVG font files to the webpage.
  • Select the icons you want
  • Give your custom Flutter a name which will be use as the class Name. (This is the section next to Download with Use a ValidDartClassName). I’m just going to use FunIcons here.
  • Download, then extract the package from zip file.
  • Create a folder called icons the same level as your lib folder, then drag the FunIcons.ttf file into this Icon folder.
  • Add it as a font asset in the pubspec.yaml,

pubspec.yaml

...
flutter:
  ...
  fonts:
    - family: FunIcons
      fonts:
        - asset: icons/FunIcons.ttf

• …
  • Drag the funicons_icons.dart from the download package to you lib folder.
• Inside of fun_icons.dart,

funicons_icons.dart

class FunIcons {
  FunIcons._();

  static const _kFontFam = 'FunIcons';

  static const IconData Star = const IconData(0xe800, fontFamily: _kFontFam);
  static const IconData Moon = const IconData(0xe801, fontFamily: _kFontFam);
  ...
}

ListTile(

leading: Icon(MdiIcons.car-pickup),

title: “Widget of the week”,

trailing: Icon(FunIcons.Star));

For the trailing icon, I’m using the custom star icon from the FunIcons class I created.

I hope this is helpful for you. It took me awhile to create my own custom icons, but once I figure out how to do it, it’s pretty easy.

Happy Coding!