build: add angular font awesome

* Add angular font awesome
* Add custom shared module for icons

package-lock.json

@@ -664,6 +664,35 @@
         }
       }
     },
+    "@fortawesome/angular-fontawesome": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.1.1.tgz",
+      "integrity": "sha512-74JdLuQWfYsrEaZ6ahTyiLzXQ6dfv8UApGXHOYdtGYqod1f+zsMz7GA8ivAnnrg4xytUJgCuejEx0G8+miBxlg==",
+      "requires": {
+        "tslib": "1.9.1"
+      }
+    },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.2.tgz",
+      "integrity": "sha512-OBzXzYJ+nDMece2nKeuV7hLuwqPN3jv1Fk56gag2DL4BiwWl8gkFQplj5Krep9HwtjFxbM6/DWN6ZG7FRC5N0w=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.2.tgz",
+      "integrity": "sha512-j+DmvRF3FPekdLir3ocSl3fO12FxKXEot/kqeodUqTBsmU0EcPvRLn9ip3xzQrMSJ2cWyqv4GNxFm5kT0XR8mw==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "0.2.2"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.2.0.tgz",
+      "integrity": "sha512-ZgUtvhtdOMGaXSenAxzjVhn+Bz1tYKqUPIVeZ/40vrilOu8dF95EjRW1JcUJ938gNE8pjaB/G2AlJN8T0wcXxw==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "0.2.2"
+      }
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",

package.json

@@ -37,6 +37,9 @@
     "@angular/platform-browser-dynamic": "^6.0.6",
     "@angular/router": "^6.0.6",
     "@angular/service-worker": "^6.0.6",
+    "@fortawesome/angular-fontawesome": "^0.1.1",
+    "@fortawesome/fontawesome-svg-core": "^1.2.2",
+    "@fortawesome/free-solid-svg-icons": "^5.2.0",
     "@ngx-translate/core": "^10.0.2",
     "@swimlane/ngx-charts": "^8.1.0",
     "angular-archwizard": "^3.0.0",

src/app/shared/file-upload/file-upload.component.html

@@ -1,6 +1,7 @@
 <button mat-button (click)="inputFile.click()">
-  <mat-icon>file_upload</mat-icon>
+  <fa-icon icon="file-upload" size="lg"></fa-icon>
+  &nbsp;&nbsp;
   Upload an image
 </button>
-{{ filename }}
+{{ filename || 'No File Uploaded' }}
 <input type="file" #inputFile (change)="onFileSelected($event)" [style.display]="'none'" />

src/app/shared/icons.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import {
+  faFileUpload,
+  faSearch
+} from '@fortawesome/free-solid-svg-icons';
+
+// Add an icon to the library for convenient access in other components
+library.add(
+  faFileUpload,
+  faSearch
+);
+
+@NgModule({
+  imports: [],
+  declarations: [],
+  exports: [FontAwesomeModule]
+})
+export class IconsModule { }
+

src/app/shared/shared.module.ts

@@ -1,14 +1,17 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { LoaderComponent } from './loader/loader.component';
 import { FileUploadComponent } from './file-upload/file-upload.component';
 import { DeleteDialogComponent } from './delete-dialog/delete-dialog.component';
+
 import { MaterialModule } from './material.module';
+import { IconsModule } from './icons.module';
 
 @NgModule({
   imports: [
     CommonModule,
+    IconsModule,
     MaterialModule
   ],
   declarations: [
@@ -19,6 +22,7 @@ import { MaterialModule } from './material.module';
   exports: [
     CommonModule,
     FileUploadComponent,
+    IconsModule,
     LoaderComponent,
     MaterialModule
   ],