angular-fontawesome

Official Angular component for Font Awesome 5

Installation

Using

ng add

# See Compatibility table below to choose a correct version
$ ng add @fortawesome/[email protected]

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/[email protected] ```

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/[email protected] ```

Compatibility table

|@fortawesome/angular-fontawesome|Angular|ng-add| |-|-|-| |0.1.x|5.x|not supported| |0.2.x|6.x|not supported| |0.3.x|6.x && 7.x|not supported| |0.4.x, 0.5.x|8.x|not supported| |0.6.x|9.x|supported| |0.7.x|10.x|supported| |0.8.x|11.x|supported|

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

   :

   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

   :

   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

   :

Documentation

• In-depth usage guide
• Using other styles
• Full feature list
• Upgrading instructions

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

Contributing

angular-fontawesome

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.

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: