How to use Custom Icons in Flutter(Using SVG or Icon Font)?

Many icons are predefined in the flutter and are very easy to use. Many times though, just these icons are not enough. For example, if you want to show an icon of a particular company or logo etc, you'll have to reach for other than the official icons.

So, Let's see how you can add custom icons to your flutter project

Social Media Icon

Let's say you want to use the above social media icon. As of now, there is no pre-made package on pub.dev, so you'll have to add them yourself. This method will only work for any icon pack which has SVG icon font.

Converting for the use in Flutter

The first step is obviously you need to download the icon pack(SVG). If you are following along with the above icon, get it from this download page.

Once you have downloaded the SVG icon, you need to somehow convert these into icons to be able to use them in your flutter project.

Thankfully, There's one open-source tool fluttericon.com which can do the conversion for you.

Steps to proceed with fluttericon.com

  1. Drag the SVG font file or icons to the webpage
  2. Select the icons you want.
  3. Give your Custom Flutter icon pack a name( this will also be used as the class name)
  4. Download the zip file.

Get the zip file for use in Flutter

Using it in Flutter

After extracting the zip file you want to get the ttf file located under the fonts folder of extracted zip into your flutter project.



I created an icons folder so that regular fonts won't get mixed up with icon fonts.

This is a regular font file so you need to add it as a font asset in pubspec.yaml 

pubspec.yaml

…

flutter:

…

  fonts:    

    - family: AssetIcons

      fonts:

        - asset: assets/icons/AssetIcons.ttf

…



Now, drag the assets_icons.dart extracted from the zip file into the lib folder. It contains a AssetsIcons class which provides every single icon from the font.

assets_icons.dart

class AssetIcons {

  AssetIcons._();

  static const _kFontFam = 'AssetIcons';

  static const String? _kFontPkg = null;

  static const IconData socialMedia = IconData(0xe800, fontFamily: _kFontFam, fontPackage: _kFontPkg);

}


USAGE:
Using these icons is again as simple as importing the assets_icons.dart file

import 'assets_icons.dart';

...

Icon(AssetsIcons.socialMedia, size: 25),

...


 #Flutter


Comments

  1. SistekOctober 19, 2021 at 7:39 AM

    Nice Write up. Although, We analyze the major market participants – Flutter vs. React Native. Read to know more details : Flutter Vs React Native

    ReplyDelete
  2. INSYNCJuly 22, 2022 at 2:28 AM

    Dart has many great benefits for developers, as seen in this post. Developers can use it as a compiler or executor to develop robust, fast, and superior apps. Both Google’s products make Flutter and Dart the most dangerous duo. They also support other Google products. Companies and entrepreneurs should hire Flutter developers who are experienced before anyone else. Contact Insync for the premium quality service by the industry expert Flutter Developers in the market.

    ReplyDelete

Post a Comment

Popular posts from this blog

Flutter ZERO Boilerplate Routing With Auto Route

Navigation and Routing take too much code and effort to implement. Two-Three lines of code have to be written for routing from one screen to another and in the end, it is not maintainable at all and becomes robust. We somehow need a way to generate one file for navigation purposes that can be easily maintained and has less boilerplate in order to be readable. If you are going to implement a router yourself, there's still a lot of boilerplate. All of this changes with the package  auto_route  which works elegantly with code generation. This way you can reduce the boilerplate while still having the ability to customize the routes to your heart's content. What is AutoRoute? It's a flutter navigation package that allows for strongly-typed arguments passing, effortless deep-linking. It uses code generation to simplify routes setup i.e reduce the boilerplate code. It requires only a minimal amount of code to generate everything needed for navigation. Why AutoRoute? For clean Rout...
Read more

Flutter Video Feeds (Like Instagram or Facebook)

There are many packages for the video player in pub.dev  but it is very hectic to maintain the video player in list view as it throws some kind of dispose error or some kind of crashes occurred during playing videos. I tried a lot of packages but at first, I was not able to build video feeds correctly. After I tried using native package by flutter video_player  but I got error such as dispose error and sometimes only 4 out of 10 videos are playing and others crash by throwing platform Exception A VideoPlayerController was used after being disposed. I/flutter : Once you have called dispose() on a VideoPlayerController, it can no longer be used.   or [ERROR:flutter/lib/ui/ui_dart_state.cc(177)] Unhandled Exception: PlatformException(VideoError, Video player had error com.google.android.exoplayer2.ExoPlaybackException: Source error, null, null ) So, to get rid of these errors, I need to dispose the video controller which is no more in the viewport, and re-initialize with the...
Read more