Add font awesome & import them

package-lock.json

@@ -498,6 +498,43 @@
         }
       }
     },
+    "@fortawesome/angular-fontawesome": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.4.0.tgz",
+      "integrity": "sha512-DYVXdCzwQo6d0CxVMRK+10LpBAvYN9xigWeQW4wKYq/Czd5es46nPMKixB5rHfNViECwwlM2gTM61K4DpxlJxg==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.19",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.19.tgz",
+      "integrity": "sha512-nd2Ul/CUs8U9sjofQYAALzOGpgkVJQgEhIJnOHaoyVR/LeC3x2mVg4eB910a4kS6WgLPebAY0M2fApEI497raQ=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.19",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.19.tgz",
+      "integrity": "sha512-D4ICXg9oU08eF9o7Or392gPpjmwwgJu8ecCFusthbID95CLVXOgIyd4mOKD9Nud5Ckz+Ty59pqkNtThDKR0erA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.19"
+      }
+    },
+    "@fortawesome/free-regular-svg-icons": {
+      "version": "5.9.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.9.0.tgz",
+      "integrity": "sha512-6ZO0jLhk/Yrso0u5pXeYYSfZiHCNoCF7SgtqStdlEX8WtWD4IOfAB1N+MlSnMo12P5KR4cmucX/K0NCOPrhJwg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.19"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.9.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.9.0.tgz",
+      "integrity": "sha512-U8YXPfWcSozsCW0psCtlRGKjjRs5+Am5JJwLOUmVHFZbIEWzaz4YbP84EoPwUsVmSAKrisu3QeNcVOtmGml0Xw==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.19"
+      }
+    },
     "@ngtools/webpack": {
       "version": "8.0.6",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-8.0.6.tgz",

package.json

@@ -19,6 +19,10 @@
     "@angular/platform-browser": "~8.0.3",
     "@angular/platform-browser-dynamic": "~8.0.3",
     "@angular/router": "~8.0.3",
+    "@fortawesome/angular-fontawesome": "^0.4.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.19",
+    "@fortawesome/free-regular-svg-icons": "^5.9.0",
+    "@fortawesome/free-solid-svg-icons": "^5.9.0",
     "bootstrap": "^4.3.1",
     "jquery": "^3.4.1",
     "popper.js": "^1.15.0",

src/app/app.module.ts

@@ -1,11 +1,14 @@
-import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HomeComponent } from './components/home/home.component';
-import { SpendComponent } from './components/shared/spend/spend.component';
 import { EarnComponent } from './components/shared/earn/earn.component';
+import { SpendComponent } from './components/shared/spend/spend.component';
 import { TotalComponent } from './components/shared/total/total.component';
 
 @NgModule({
@@ -18,9 +21,20 @@ import { TotalComponent } from './components/shared/total/total.component';
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    FontAwesomeModule,
   ],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {
+  static readonly icons = [
+    faPlus,
+  ];
+
+  constructor() {
+    for (const icon of AppModule.icons) {
+      library.add(icon);
+    }
+  }
+}