The best way to add custom icons to your Flutter project
Do you ever lay in bed and wonder what is the best way of including custom icons into your Flutter project? No? Me neither. But now that you are here I guess I have no other choice but to just tell you about this secret. It’s a rather short one so don’t get too comfortable.
Flutter icon generator
The secret is rather simple, it’s this generator right here: FlutterIcon. It will handle all necessary code generation steps for creating the correct Flutter class and a corresponding font that will include your icons. No more including your icons as images or any other madness like that.
Here are the necessary steps on how to use it.
- Go to: https://fluttericon.com/.
- Drop in your custom SVG icons if necessary.
- You can choose from a variety of Material Design Icons that are available.
- You can search icons by name.
- Here you can specify the name of the icon class that will be generated. We propose to choose AppIcons for an intuitive class name.
- Use the Download button to generate and download all necessary files.
You can additionally choose from a variety of additional options:
a. Download only the config file so you can share the configuration with another person without downloading unnecessary files.
b. If you have a config file you can import it here.
c. Unselect all selected icons.
d. Resets all changes to the currently imported configuration.
e. Specifies the default size for every icon.
After the download, extract the downloaded .zip file. There you will find 3 files:
- app_icons_icons.dart — this is the main class through which you will access your icons in code.
- AppIcons.ttf — a font file containing all your necessary icons
- config.json — contains the configuration of your icons for later usage in the generator. Keep this file safely hidden somewhere in case you need to modify your icon configuration.
The next steps for including these files in your project are as follows:
- Create a dedicated folder for your custom fonts (assets/fonts).
- Copy the AppIcons.ttf file to this location.
- Go to your pubspec.yaml file and under the fonts section add the necessary font imports so it looks something like this:
Remember to check the spaces before each line as it’s a common mistake to make while copy-pasting.
4. Rename the generated app_icons_icons.dart file to just app_icons.dart and copy it to your desired location (preferably somewhere in your presentation layer).
5. Create your custom icons using the generated class like this:
Conclusion
I hope this small tutorial helped you to better manage your custom Flutter icons. If you would rather not bother to go through all this process, you can always use the community material_design_icons_flutter package containing all the Material Design icons. This is a great starting place to build your whole app around if you aren’t committed to using your own custom icons.
Deviniti is your guide to the universe of digital transformation and enterprise software. Check out who we are and what we can do on our website.
If you want to learn more Flutter tips and tricks, make sure to check out other articles available on Deviniti Technology-Driven Blog:
