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.json
is 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
ttf
file into your desired directory (e.g.fonts/CustomIcons.ttf
) - Move the
dart
file 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
fonts
code intopubspec.yml
(I put mine underneathflutter: uses-material-design
) flutter run
to 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.