Adding iconfont in Flutter

What is icon font?

 Icon fonts are just fonts. However, instead of containing letters or numbers, they contain symbols and glyphs.

How do i create icon fonts?

Well you can do that on fluttericon.com

This website is awesome as it has so many icons to choose from. Choose the icons you like and set icon size (default is 16px).

Apart from icons to choose from you also have choice to use your own custom icon(svg). Just drag and drop the icon svg into website and it will include it in your final icon font zip package.

Usage

• Download the font and put it in  in your /fonts project directory.
• Most of the instructions are given in your downloaded font zip.
• And edit your project's pubspec.yaml like shown below

flutter:

    fonts:

         -family: MyFlutterApp //font family name 

          fonts:

             -asset: fonts/MyFlutterApp.ttf //your font name 

• Create a dart file with any name e.g. icon_data.dart
• Copy the code from the dart file provided in font zip file, it could be like shown below:

import 'package:flutter/material.dart';

const _kFontFam = 'MyFlutterApp';

const IconData xda = const IconData(0xe800, fontFamily: _kFontFam);

const IconData telegram = const IconData(0xe801, fontFamily: _kFontFam);

const IconData github_circle = const IconData(0xe802, fontFamily: _kFontFam); 

• Now just import your icon dart file e.g icon_data.dart in your dart file where you want to use icon

import 'icon_data.dart';

......//your code

FlatButton.icon(

    onPressed: () {},

    icon: Icon(github_circle, size: 30.0,), //Write your icon name here in place of github_circle

    label: Text("Hello!", style: TextStyle(color: Colors.black, fontSize: 16.0),)

And that's how we can use awesome icon fonts in our Flutter app.