Add Font Awesome Icons to Flutter App

Font Awesome is an alternative to traditional old image icons, which is used by many app developers. The FontAwesome team has been working hard to create a library of scalable vector icons that can be used in web design. The set of icons includes the most popular glyphs for everything from social media sites to transportation and even weather conditions.

Adding Font Awesome icons to a Flutter app is easy, thanks to font_awesome_flutter library. The library provides 1500 additional icons of Font Awesome Icon pack available as Flutter Icons.

Install

dependencies:
  font_awesome_flutter: 8.8.1

Import into a file

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

Examples

Icon button

return IconButton(
  icon: FaIcon(FontAwesomeIcons.percentage), 
  onPressed: () {  }
 );

Icon in a container

SizedBox(
	width: 50,
	child: FaIcon(
	  FontAwesomeIcons.moneyBill,
	  color: Colors.lightBlue,
	),
),

Icon in a RaisedButton

RaisedButton(
  onPressed: _calculate,
  child: Row(
    children: <Widget>[
      FaIcon(FontAwesomeIcons.calculator, color: Colors.blue),
      SizedBox(width: 5),
      Text(
        "Calculate",
      ),
    ],
  ),
),

Troubleshoot: icons not showing up on device

Sometimes Flutter has a cached version of the app on your device, so it won’t show new fonts. You will see a cross mark instead of a real icon.

How to fix

1. Stop the app
2. Running flutter clean in your app directory
3. Deleting the app from your device
4. Rebuild & Deploy the app.