Added fontawesome npm package for more consistency.

package-lock.json

@@ -1835,6 +1835,35 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@fortawesome/angular-fontawesome": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.5.0.tgz",
+      "integrity": "sha512-5IR/jNMddiEpgApcqSMfp7l5kZqOtxQYzkSLW6iZ4MZHbQQ+Kc9tu9qi2hro6VFSk/sPxeYEzkzGZUNrMYiwOg==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.25",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.25.tgz",
+      "integrity": "sha512-3RuZPDuuPELd7RXtUqTCfed14fcny9UiPOkdr2i+cYxBoTOfQgxcDoq77fHiiHcgWuo1LoBUpvGxFF1H/y7s3Q=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.25",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.25.tgz",
+      "integrity": "sha512-MotKnn53JKqbkLQiwcZSBJVYtTgIKFbh7B8+kd05TSnfKYPFmjKKI59o2fpz5t0Hzl35vVGU6+N4twoOpZUrqA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.25"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.11.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.11.2.tgz",
+      "integrity": "sha512-zBue4i0PAZJUXOmLBBvM7L0O7wmsDC8dFv9IhpW5QL4kT9xhhVUsYg/LX1+5KaukWq4/cbDcKT+RT1aRe543sg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.25"
+      }
+    },
     "@ngtools/webpack": {
       "version": "8.3.15",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-8.3.15.tgz",

package.json

@@ -19,6 +19,9 @@
     "@angular/platform-browser": "~8.2.11",
     "@angular/platform-browser-dynamic": "~8.2.11",
     "@angular/router": "~8.2.11",
+    "@fortawesome/angular-fontawesome": "^0.5.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.25",
+    "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "rxjs": "~6.4.0",
     "tslib": "^1.10.0",
     "zone.js": "~0.9.1"

src/app/app.module.ts

@@ -2,6 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 import { ReactiveFormsModule } from '@angular/forms';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -18,7 +19,8 @@ import { LoginComponent } from './components/login/login.component';
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    FontAwesomeModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/components/home/home.component.html

@@ -16,7 +16,7 @@
                 <a [href]="item ? '' : ('mailto:doemiddag.hetheerenlanden@cvo-av.nl?subject=Reservatie Surprise box ' + (i + 1))">
                   <span class="{{ item ? 'unavailable' : 'available' }}">{{ i + 1 }}<br>
                     <div class="tooltip">{{ item ? 'Gereserveerd' : 'Klik om te reserveren' }}</div>
-                    <i class="fas fa-gift"></i>
+                    <fa-icon [icon]="faGift"></fa-icon>
                   </span>
                 </a>
               </div>

src/app/components/home/home.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { ApiData, DataService } from 'src/app/services/data.service';
 import { Router } from '@angular/router';
-import { $ } from 'protractor';
+import { faGift } from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'app-home',
@@ -11,6 +11,8 @@ import { $ } from 'protractor';
 })
 export class HomeComponent implements OnInit {
 
+  faGift = faGift;
+
   data: Observable<ApiData>;
   loggedIn: boolean;