It’s easy, thanks to the creators of FlutterIcon and Fontello💖
How it works
The custom icons will be converted into a ttf font file, which will be added into the project. An automatically generated Dart file will be added, allowing icons to be used like Icon(CustomCons.upvote).
- Go to FlutterIcon.com
- Click on the icons that you want, upload custom SVG files, font-files, or JSON files
- Insert your own name like ‘Custom’, ‘Icecons’ etc.
- Click ‘Download’ and extract files
- The
config.jsonis absolute genius, it saves all your selections and custom icons, so when you revisit the website just drag and drop it in and it’s all there again. - Move the
ttffile into your desired directory (e.g.fonts/CustomIcons.ttf) - Move the
dartfile into your desired directory inlib(I didlib/presentation/custom_icons_icons.dart) - Follow the instructions at the top of your dart file and copy the
fontscode intopubspec.yml(I put mine underneathflutter: uses-material-design) flutter runto ensure project compiles and app starts expectedly- Use your icon!
- Party 🎉
Tabs Example:
import CustomIcons from '../lib/presentation/custom_icons_icons.dart'Tab(icon: Icon(CustomIcons.heart)
Here I’ve imported my dart class as CustomIcons and used the heart in a tab. In IntelliJ, you can write the code first, then Alt-Enter on CustomIcons and it will add the correct relative path for the import for you.
For more information like, how to create your own icons using Illustrator, import/export fonts visit the full wiki: https://github.com/ilikerobots/polyicon/wiki/Help
Coding is not just about features, it’s also about Collaboration. If there’s a specific thing you’re trying to implement but can’t leave a comment below and I’ll see if I can write a tutorial for it.
See the Steemit article here
Happy Coding!
The Flutter Pub is a medium publication to bring you the latest and amazing resources such as articles, videos, codes, podcasts etc. about this great technology to teach you how to build beautiful apps with it. You can find us on Facebook, Twitter, and Medium or learn more about us here. We’d love to connect! And if you are a writer interested in writing for us, then you can do so through these guidelines.
