@fortawesome/angular-fontawesome

Official Angular component for Font Awesome 5+

Showing:

Popularity

Downloads/wk

135K

GitHub Stars

1.2K

Maintenance

Last Commit

2mos ago

Contributors

25

Package

Dependencies

1

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Angular Icon

Reviews

Average Rating

5.0/55
Read All Reviews
ejmason101
sowmyapalani
danilokorber

Top Feedback

3Great Documentation
3Easy to Use
3Performant

Readme

Official Javascript Component

angular-fontawesome

npm

Official Angular component for Font Awesome 5+

Installation

Using ng add:

# See Compatibility table below to choose a correct version
$ ng add @fortawesome/angular-fontawesome@<version>

Using Yarn

$ yarn add @fortawesome/fontawesome-svg-core
$ yarn add @fortawesome/free-solid-svg-icons
# See Compatibility table below to choose a correct version
$ yarn add @fortawesome/angular-fontawesome@<version>

Using NPM

$ npm install @fortawesome/fontawesome-svg-core
$ npm install @fortawesome/free-solid-svg-icons
# See Compatibility table below to choose a correct version
$ npm install @fortawesome/angular-fontawesome@<version>

Compatibility table

@fortawesome/angular-fontawesomeAngularFont Awesomeng-add
0.1.x5.x5.xnot supported
0.2.x6.x5.xnot supported
0.3.x6.x && 7.x5.xnot supported
0.4.x, 0.5.x8.x5.xnot supported
0.6.x9.x5.xsupported
0.7.x10.x5.xsupported
0.8.x11.x5.xsupported
0.9.x12.x5.xsupported
0.10.x13.x5.x && 6.xsupported

Usage

To get up and running using Font Awesome with Angular follow below steps:

  1. Add FontAwesomeModule to imports in src/app/app.module.ts:

    ```typescript
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    
    import { AppComponent } from './app.component';
    import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
    
    @NgModule({
      imports: [
        BrowserModule,
        FontAwesomeModule
      ],
      declarations: [AppComponent],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    ```
    
  2. Tie the icon to the property in your component src/app/app.component.ts:

    ```typescript
    import { Component } from '@angular/core';
    import { faCoffee } from '@fortawesome/free-solid-svg-icons';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html'
    })
    export class AppComponent {
      faCoffee = faCoffee;
    }
    ```
    
  3. Use the icon in the template src/app/app.component.html:

    ```html
    <fa-icon [icon]="faCoffee"></fa-icon>
    ```
    

Documentation

Examples

Stackblitz

Here's a StackBlitz Starter Sample on how to display Solid, Regular, and Brand icons using the Icon Library.

Demo application

You can find examples in the projects/demo directory. You can follow the docs to run the demo app on your own machine.

Contributing

angular-fontawesome is a product of the community, you can take a look at the developer docs to find about more on how to contribute back to the project.

Contributors

The following contributors have either helped to start this project, have contributed code, are actively maintaining it (including documentation), or in other ways being awesome contributors to this project. We'd like to take a moment to recognize them.

devoto13 zeevkatz scttcper DavidePastore donmckenna paustint mzellho elebitzero mcenkar SiddAjmera stephaniepurvis loicgasser damienwebdev ronniebarker bhanuhiteshi MrSuttonmann ej2 peterblazejewicz arjenbrandenburgh athisun madebyjeffrey benjamincharity

If we've missed someone (which is quite likely) submit a Pull Request to us and we'll get it resolved.

The Font Awesome team:

mlwilkerson supercodepoet robmadole talbs

Rate & Review

Great Documentation3
Easy to Use3
Performant3
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
Elliot Mason127.0.0.112 Ratings12 Reviews
Maker | Cypherpunk
6 months ago
Easy to Use
Great Documentation
Performant

I have found that the free icon set has had everything I have needed for my various personal projects. Very easy and quick addon to an Angular app to get some high quality icons!


0
sowmyapalaniRome42 Ratings61 Reviews
Busy coding life.
November 10, 2020

This library will let us use the font-awesome in angular apps, its really easy to use. just import the module. then use it with the tag fa-icon. it have a good documentation also.


1
spawoz-work
Danilo Körber14 Ratings26 Reviews
8 months ago
Great Documentation
Easy to Use
Performant

Fantastic library to get all kind of icons easily integrated in Angular. Gets even better when you have the Pro subscription but also the free one has almost everything you need.


0

Tutorials

No tutorials found
Add a tutorial