How To Use Custom Icons in Flutter

Hello guys, Today we are going to learn how to use custom icons in Flutter.
We already know that Flutter has set of Material Design styles is built in Icon, but for a high  Apps, it is usually not enough. To do this, we need to introduce custom ones into the project Icons

Preparation

We must first prepare icon font files ( .ttf).
So for this we are fluttericon to prepare the fonts https://fluttericon.com/

Select icons that you want or upload custom SVG files, font-files, or JSON files
Add your own name to the icon then click download and extract the files

Declare a custom font

It's not enough to just copy the font files into the project, we need a way to tell Flutter that new fonts are available. Open the pubspec.yaml file in the project root directory and find fonts which commented in the file.

To add custom fonts , add a fonts here. Each entry in this list should have type "family" key with font family name, and a "fonts" key with a list giving the asset/other descriptors for the font.

The comment is to let us add a custom font declaration below the text, combined with the commented out example and the current project directory, we can configure it like this

Note: After configuration, be sure to execute the flutter packages get command and rebuild project, otherwise the font file cannot be used.

add generated dart file into your desired directory in lib (lib/custom_icons.dart )

Writing custom IconData
In fact, so far, we can use the icon just downloaded, like this code:
 

Where the font Family value 'customfonts'is the new font we have just stated

Summary
This article uses a practical Ant Design icon example to introduce in detail how Flutter to introduce custom icons in it, I hope it can help you