fontawsome angular code example

Example 1: font awesome install in angular

npm install --save font-awesome angular-font-awesome
//once installed you will to import font awesome to your app.module.ts
import { AngularFontAwesomeModule} from 'angular-font-awesome';
//on your app.module.ts add AngularFontAwesomeModule under imports
imorts[
.../
AngularFontAwesomeModule,
],

Example 2: add font awesome to angular

<!--In the index.html-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

Example 3: angular font awesome

ng add @fortawesome/angular-fontawesome@<version>

// 0.1.x	        angular 5.x	not supported
// 0.2.x	        angular 6.x	not supported
// 0.3.x	        angular 6.x && 7.x	not supported
// 0.4.x, 0.5.x	angular 8.x	not supported
// 0.6.x	        angular 9.x	supported
// 0.7.x	        angular 10.x	supported

// Usage
// Typescript
import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'font awesome usage';
  faCoffee = faCoffee;
}

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

Example 4: how to use the downloaded fontawsoem icons in angula

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      ....
      "styles": [
          "styles.css",
          "../node_modules/bootstrap/dist/css/bootstrap.css",
          "../node_modules/font-awesome/css/font-awesome.css" // -here webpack will automatically build a link css element out of this!?
      ],
      ...
  }
  ]
],

Example 5: how to get fas icons in angualr

import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
library.add(fas, far);