How to use custom icons in Flutter

in utopian-io •  6 years ago 

It's easy, thanks to the creators of FlutterIcon and Fontellođź’–

Read the Medium article here

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).

  1. Go to FlutterIcon.com
  2. Click on the icons that you want, upload custom SVG files, font-files, or JSON files
  3. Insert your own name like 'Custom', 'Icecons' etc.
  4. Click 'Download' and extract files
  5. 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.
  6. Move the ttf file into your desired directory (e.g. fonts/CustomIcons.ttf)
  7. Move the dart file into your desired directory in lib (I did lib/presentation/custom_icons_icons.dart )
  8. Follow the instructions at the top of your dart file and copy the fonts code into pubspec.yml (I put mine underneath flutter: uses-material-design)
    flutter run to ensure project compiles and app starts expectedly
  9. Use your icon!
  10. 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.

Happy Coding!

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  
  ·  6 years ago 

Hi! I am a robot. I just upvoted you! I found similar content that readers might be interested in:
https://medium.com/flutterpub/how-to-use-custom-icons-in-flutter-834a079d977

Congratulations @psyanite! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You received more than 10 upvotes. Your next target is to reach 50 upvotes.

Click here to view your Board
If you no longer want to receive notifications, reply to this comment with the word STOP

Support SteemitBoard's project! Vote for its witness and get one more award!

  ·  6 years ago 

Hello @psyanite! This is a friendly reminder that you have 3000 Partiko Points unclaimed in your Partiko account!

Partiko is a fast and beautiful mobile app for Steem, and it’s the most popular Steem mobile app out there! Download Partiko using the link below and login using SteemConnect to claim your 3000 Partiko points! You can easily convert them into Steem token!

https://partiko.app/referral/partiko

Congratulations @psyanite! You received a personal award!

Happy Birthday! - You are on the Steem blockchain for 2 years!

You can view your badges on your Steem Board and compare to others on the Steem Ranking

Vote for @Steemitboard as a witness to get one more award and increased upvotes!