Add icons to the Flutter project

Tram Ho

Flutter already supports an extremely rich and diverse icon store. However, sometimes we want to use our own icons. So how do I add an icon to my Flutter project and how to use them? Let’s find out in this article together!

1. Create icon

Step 1:

Have your icon ready, maybe 1 or more icons. Note that the icons must be of the .SVG format. Here I will use 2 icons podium.svg and home.svg

Step 2:

Go to https://www.fluttericon.com . Here, you just need to drag and drop your icons into the Custom Icons section. After drag and drop we will get the following result:

It can be seen that my 2 icons have been imported to the website. The next thing to do is click on the icons you want to use, then choose download. Looking to the left of the download button, you will see an EditText that allows us to enter a name for our icon set. Note that this is not the name of the icon. This name we will use to access the icons. Here I will set it as AppIcons. When downloading, we will have 3 files: AppIcons.ttf located in the font directory, app_icons_icons.dart, config.json. So we have our icon set already. Next will be how to use them in your application

2. Use icons

Step 1:

  • You copy the font folder to the assets folder (if you don’t have one, you can create this folder)
  • Copy the file app_icons_icons.dart to the icons folder in the lib directory (you can rename this file neatly, here I change to app_icons.dart)
  • Next open the file pubspec.yaml add the following code:

  • Finally, we just need to call the icon to use

And this is the result :

Note

We still have one more unused file, config.json. This file will help us import the icons that are already in our library on https://www.fluttericon.com/ . It comes in handy when we want to add new icons in our icons set

Share the news now

Source : Viblo