2

I've a new angular cli(8+) project with sass(SCSS). I checked Fontawesome docs and have found multiple ways of hosting fontawesome icons (npm package install, angular package or simple scss).

I want to know what are the differences between them? Which is the recommended way for an Angular CLI project having sass.

Imtiaz Shakil Siddique
  • 3,732
  • 30
  • 37

1 Answers1

1

When you install Fontawesome via the npm package manager it comes already with all the Scss files. So, there is not a choice between "npm package install" and "simple Scss". The question here is more: Using the package manager or hosting yourself only the Scss files you will need in your project inside the assets folder for example? Choosing that last option you won't be able to easily update the library version with npm.

EDIT: With this CSS/SCSS approach you'll always load all icons (a font file, which is a huge especially for FontAwesome Pro)

The angular package it's quite another subject. It's a new official package of FontAwesome. Instead of importing inside your project the Scss files, you can directly use FontAwesome Angular component.

EDIT: This package uses SVG icons instead and will use Angular CLI infrastructure to remove all unused icons from your final bundle.

The simpler:

  • Install npm package or host only the CSS minified files you need,
  • add a link to the file(s) location in your angular.cli file

You will be able to use the Fontawesome classes (like .fab .fa-twitter) in all your Html files.

Sccs import :

If you want to personalize your classes with Fontawesome mixins, you can import Scss files inside any Scss files of your project.

A use case: a .user-button class that extends a .fa-icon properties and contains a Fontawesome user icon.

Angular package :

You will never have to deal with FontAwesome classes, but only import the module inside your app.module.ts and use FontAwesome icons as specifics component.

jafar_mnkd
  • 112
  • 6
  • 4
    I guess one important difference which you should mention is that with CSS/SCSS approach you'll always load all icons (a font file, which is a huge especially for FontAwesome Pro). If you use `angular-fontawesome` package it uses SVG icons instead and will use Angular CLI infrastructure to remove all unused icons from your final bundle. [ref 1](https://github.com/FortAwesome/angular-fontawesome/blob/d3f83a57b6adaa8991704b5d8caa1361722bd758/docs/usage.md#methodologies) and [ref 2](https://fontawesome.com/how-to-use/on-the-web/advanced/svg-javascript-core#comparing). – Yaroslav Admin Feb 26 '20 at 15:21
  • Some icons have animations... if I only integrate the scss files, will those animation icons work out of the box? – Imtiaz Shakil Siddique Feb 26 '20 at 15:40
  • 1
    can you update your answer with the comments of @YaroslavAdmin . Then I'd except your answer as it will be complete then ... – Imtiaz Shakil Siddique Mar 02 '20 at 06:46