CODEWITHSUNDEEP
cssangularsvgfont-awesomewebfonts
Jaffakex
Jaffakex

Reputation: 538

Should I use fontawesome-free or angular-fontawesome

We are starting an Angular 6 project and want to use Font Awesome 5.1. Font Awesome provides two Node packages:

Using SVG with JS is the new way to use Font Awesome while Web Fonts and CSS is the more classic approach. For me it seems it is a bit more hassle to use SVG with JS because you have to import each icon, but it saves file size.

We are going to be using around 30 icons in our app and are wondering which approach would be better for us.

Upvotes: 11

Views: 8961

Answers (3)

vaibhavkhot
vaibhavkhot

Reputation: 502

Use Angular Font Awesome as it's work as an Angular component. Also Rendered as SVG so help in data-bound logics.

Upvotes: 0

mwilkerson
mwilkerson

Reputation: 1424

Some other considerations:

  1. angular-fontawesome integrates tightly with the Angular framework, so if you think you may want to have some data bound icons (eg: email icon with a counter of unread messages, or some icon with a rotation angle bound to some data value in your model), then you may find it nice to use angular-fontawesome where the icon is not only rendered as an SVG, it's rendered as an Angular component.
  2. The SVG method of Font Awesome 5 is capable of some features that are not available with the Web Fonts and CSS method. For example, Power Transforms, Layers, and Counters. Since angular-fontawesome builds on the SVG with JavaScript implementation, it supports all of those extra features too.
  3. Tree-shaking / subsetting: There are many, many icons that you won't be using. If you care about optimizing the size of your downloaded assets in your production builds, then you might want to make sure you're using tree-shaking, which you'll get mostly automagically if you use angular-cli (Caveat: see that link about configuring your build to work around a build performance regression that makes Webpack 4 production builds slow until the fix is released.)

Upvotes: 9

user4676340
user4676340

Reputation:

I've just wondered the same thing, so even though it's opinion based (and thus subject to closure), I'll answer you :

I started by using the library as described in their guide.

I quickly realized you could NOT use all the icons you wanted, because there is no way in using fas or far icons.

So I switched to the "old" way : I installed the library with

npm i @fortawesome/fontawesome-free

and imported it in my angular.json file : 

projects -> yourProject -> architect -> build -> styles : {
  "node_modules/@fortawesome/fontawesome-free/css/all.css"
}

I now have to use the usual way with 

<i class="fab fa-accessible-icon"></i>

But i can use all the icons provided instead of only a single set.

Upvotes: 21

Related Questions