ng2_fontawesome 4.7.0+4

  • Installing
  • Versions
  • 45

Font Awesome for Angular2Dart

View Demo

Basic Usage

This package provides Font Awesome as an Angular2Dart component, making it easy to add icons to your Angular2Dart project. Add directives: const [FontAwesomeIconComponent] to your parent component, and then you can use the element in your markup:

<fa name="flag"></fa>

This Dart package implements all of the Font Awesome effects seen here.


The version number of this package follows the version number of Font Awesome itself. This makes it easy to see which version of Font Awesome is provided by this package and pin your own packages to specific versions of Font Awesome (i.e. a version that adds a specific glyph that your package needs).


Font Awesome icons are implemented in FontAwesomeIconComponent. It requires one name attribute, which is the name of the icon to render:

<fa name="flag"></fa>

The component also supports all of the other Font Awesome effects through the following attributes:

  • border (bool): Display a border.
  • flip (String): Flip the icon over its "horizontal" or "vertical" axis.
  • fw (bool): Render as fixed width element.
  • inverse (bool): Invert the color scheme.
  • pull (String): Float to the "left" or "right".
  • pulse (bool): Animate a rotating icon in 8 discrete steps.
  • rotate (int): Rotate 90, 180, or 270 degrees.
  • size (String): Icon size. "lg" is 33% larger than normal, or use "2x", "3x", "4x", or "5x".
  • spin (bool): Animate the icon spinning continuously.
  • stack (bool): Indicates that the icon is part of a stack a stack, i.e. <fa-stack>, and sets the size to either "1x" or "2x".

Bulleted List

Font Awesome icons can be used as bullets. Add FontAwesomeListComponent and FontAwesomeListItemComponent to your directives, then write markup like this:

  <fa-li bullet="flag">Item one</fa-li>
  <fa-li bullet="spinner">Item two</fa-li>
  <fa-li bullet="check-square">Item three</fa-li>

The only new attribute is bullet, which should contain the name of the icon to use as the list item's bullet. You may also supply a default bullet that is used for list items which do not specify a bullet:

<fa-ul bullet='check-square'>
  <fa-li>Item one</fa-li>
  <fa-li>Item two</fa-li>
  <fa-li>Item three</fa-li>

Icon Stack

Font Awesome also lets you stack icons on top of each other. Add FontAwesomeStackComponent to your directives, then write markup like this:

  <fa name="circle" stack="2x"></fa>
  <fa name="flag" stack="1x" [inverse]="true"></fa>

An icon stack consists of two icons inside an <fa-stack>. The stack attribute is required in this context and sets the icon's size, either "1x" or "2x" .


This section is for the developer[s] of this package only.

To upgrade Font Awesome, download and unzip the upstream release. Replace lib/css and lib/fonts in this package with the css and fonts from the upstream release. The modify the font-awesome-css and font-awesome.css.min as follows:

sed --in-place "s:url[(]'\.\.:url('packages:g" lib/css/*

Commit the changed files, update the version in pubspec.yaml to match the upstream Font Awesome version, and publish with pub publish.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  ng2_fontawesome: "^4.7.0+4"

2. Install it

You can install packages from the command line:

with pub:

$ pub get

with Flutter:

$ flutter packages get

Alternatively, your editor might support pub get or flutter packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

      import 'package:ng2_fontawesome/ng2_fontawesome.dart';
Version Uploaded Documentation Archive
4.7.0+4 Jan 12, 2017 Go to the documentation of ng2_fontawesome 4.7.0+4 Download ng2_fontawesome 4.7.0+4 archive
4.7.0+3 Dec 9, 2016 Go to the documentation of ng2_fontawesome 4.7.0+3 Download ng2_fontawesome 4.7.0+3 archive
4.7.0+2 Dec 9, 2016 Go to the documentation of ng2_fontawesome 4.7.0+2 Download ng2_fontawesome 4.7.0+2 archive
4.7.0+1 Dec 9, 2016 Go to the documentation of ng2_fontawesome 4.7.0+1 Download ng2_fontawesome 4.7.0+1 archive
4.7.0 Dec 9, 2016 Go to the documentation of ng2_fontawesome 4.7.0 Download ng2_fontawesome 4.7.0 archive
0.0.1 Dec 8, 2016 Go to the documentation of ng2_fontawesome 0.0.1 Download ng2_fontawesome 0.0.1 archive


We analyzed this package on Jul 13, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0-dev.63.0
  • pana: 0.11.3


Describes how popular the package is relative to other packages. [more]
17 / 100
Code health derived from static analysis. [more]
99 / 100
Reflects how tidy and up-to-date the package is. [more]
36 / 100
Overall score:
Weighted score of the above. [more]
Learn more about scoring.


Detected platforms: Flutter, web, other

No platform restriction found in primary library package:ng2_fontawesome/ng2_fontawesome.dart.


  • Maintain

    Changelog entries help clients to follow the progress in your code.

  • Homepage does not exists.

    We were unable to access at the time of the analysis.

  • Package is getting outdated.

    The package was released 78 weeks ago.

  • The description is too short.

    Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.

  • Maintain an example.

    Create a short demo in the example/ directory to show how to use this package. Common file name patterns include: main.dart, example.dart or you could also use ng2_fontawesome.dart.

  • Fix analysis and formatting issues.

    Analysis or formatting checks reported 1 hint.

    Run dartfmt to format lib/ng2_fontawesome.dart.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.12.0 <2.0.0
angular2 ^2.0.0 2.2.0 3.1.0+1
Transitive dependencies
analyzer 0.29.5 0.32.3
args 0.13.7 1.4.3
async 1.13.3 2.0.7
barback 0.15.2+16
build 0.5.0 0.12.7
charcode 1.1.2
cli_util 0.1.3
code_transformers 0.5.1+5
collection 1.14.10
convert 2.0.1
crypto 2.0.6
csslib 0.14.4
dart_style 0.2.16 1.1.2
fixnum 0.10.7
glob 1.1.6
html 0.13.3+1
http_parser 3.1.2
intl 0.14.0 0.15.6
isolate 0.2.3 2.0.1
js 0.6.1
logging 0.11.3+1
meta 1.1.5
mime 0.9.6+1
observable 0.14.0+1 0.22.1+3
package_config 1.0.3
path 1.6.1
plugin 0.2.0+2
pool 1.3.5
protobuf 0.5.5 0.9.0
shelf 0.6.8 0.7.3+2
shelf_static 0.2.8
source_maps 0.10.6
source_span 1.4.0
stack_trace 1.9.2
stream_channel 1.6.7+1
string_scanner 1.0.2
typed_data 1.1.5
utf 0.9.0+4
watcher 0.9.7+9
yaml 2.1.14