@fortawesome/angular-fontawesome

What is @fortawesome/angular-fontawesome?

@fortawesome/angular-fontawesome is an Angular wrapper for Font Awesome, a popular icon toolkit. It allows you to easily integrate Font Awesome icons into your Angular applications.

What are @fortawesome/angular-fontawesome's main functionalities?

Basic Icon Usage

This feature allows you to use Font Awesome icons in your Angular templates. The example shows how to include a 'coffee' icon from the 'fas' (Font Awesome Solid) icon set.

<fa-icon [icon]="['fas', 'coffee']"></fa-icon>

Customizing Icons

You can customize the appearance of the icons by applying styles directly. The example demonstrates how to change the color and size of the 'coffee' icon.

<fa-icon [icon]="['fas', 'coffee']" [styles]="{ color: 'red', 'font-size': '24px' }"></fa-icon>

Using Icon Libraries

This feature allows you to add entire icon packs to the library, making them available throughout your application. The example shows how to add the 'fas' (Font Awesome Solid) icon pack.

import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons';

constructor(library: FaIconLibrary) {
  library.addIconPacks(fas);
}

Dynamic Icons

You can dynamically change the icon based on component properties. The example shows how to bind the icon to a component property called 'dynamicIcon'.

<fa-icon [icon]="dynamicIcon"></fa-icon>

Other packages similar to @fortawesome/angular-fontawesome

ngx-bootstrap-icons

ngx-bootstrap-icons is an Angular library for using Bootstrap icons. It provides a similar functionality to @fortawesome/angular-fontawesome but uses Bootstrap's icon set instead of Font Awesome.

angular-material-icons

angular-material-icons is an Angular module that allows you to use Material Design icons in your Angular applications. It offers similar features to @fortawesome/angular-fontawesome but uses Google's Material Design icons.

README

angular-fontawesome

Angular component for Font Awesome 5, built with Angular Librarian and conforming to the Angular Package Format.

Basic Usage

Add an icon to an Angular template:

<fa-icon [icon]="faUser"></fa-icon>

Run yarn start or npm run start to see more example uses.

Advanced Usage

With Mask and Transform

<fa-icon [icon]="faCircle" transform="shrink-9 right-4" [mask]="faSquare"></fa-icon>

Spin animation with click toggle

<fa-icon [icon]="faSync" [spin]="isSyncAnimated" (click)="isSyncAnimated=!isSyncAnimated"></fa-icon>

Transform within binding

<fa-icon [icon]="faMagic" transform="rotate-{{magicLevel}}"></fa-icon>
<input type='range' [value]="magicLevel" (input)="magicLevel=$event.target.value"/>

(Slide input range to "turn up the magic")

Project Status

This project is a work in progress, not yet production ready.

We're now inviting early adopters who like living on the edge, are willing to figure out some things on their own, and reply with refining feedback and pull requests, to jump into this with us and drive it toward its first stable release.

This component depends upon the Font Awesome 5 base API library, @fortawesome/fontawesome, and uses the icon pack libraries such as @fortawesome/fontawesome-free-solid.

Much of this project's work thus far has been to drive changes down into those underlying packages, such as adding Type Script for the whole framework and moving away from the use of default exports.

Tree Shaking

As of January 17, 2018, we are in the process of simplifying the developer experience for Angular developers to make tree shaking work more easily. Pro subscribers can follow some of that conversation here.

In the meantime, enabling tree shaking requires some extra configuration.

Some have used the following Type Script configuration in tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "@fortawesome/fontawesome-free-solid": ["node_modules/@fortawesome/fontawesome-free-solid/shakable.es.js"],
      "@fortawesome/fontawesome-free-brands": ["node_modules/@fortawesome/fontawesome-free-brands/shakable.es.js"]
    }
  }
}

Additional Context

We are developing official @fortawesome-scoped components for several JavaScript development frameworks, such as Angular, React, Ember and Vue. We intend to balance consistency of developer experience across these various components with best practices and patterns that may be distinct within each of those frameworks. So, for example, we want it to feel natural for one who is accustomed to an Angular mindset to use this Angular component.

Since there are some concepts that are consistent between this component and our React component, and is since the React component's documentation is currently more comprehensive, some readers may benefit from also reviewing it. It may help you to infer how to use and experiment with this Angular component.

How to Help

1. Write more tests like those in icon.component.spec.ts to increase our test coverage and submit pull requests.

2. If you are an experienced Angular developer, after experimenting with this component, provide feedback about what refinements might help it feel more like an "Angular" way of doing things. Open a new issue with each distinct recommendation.