replace Fontawesome css with libary

angular.json

               "src/manifest.webmanifest"
             ],
             "styles": [
-              "node_modules/@fortawesome/fontawesome-free/css/brands.min.css",
-              "node_modules/@fortawesome/fontawesome-free/css/solid.min.css",
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/assets/sass/paper-kit.scss",
               "src/assets/css/demo.css",
               "src/assets/css/nucleo-icons.css"
             ],
             "scripts": [
-              "node_modules/@fortawesome/fontawesome-free/js/brands.min.js",
-              "node_modules/@fortawesome/fontawesome-free/js/solid.min.js"
             ]
           },
           "configurations": {
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
             "scripts": [
-              "node_modules/@fortawesome/fontawesome-free/js/brands.min.js",
-              "node_modules/@fortawesome/fontawesome-free/js/solid.min.js"
             ],
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "node_modules/@fortawesome/fontawesome-free/css/brands.min.css",
-              "node_modules/@fortawesome/fontawesome-free/css/solid.min.css",
               "src/assets/sass/paper-kit.scss",
               "src/assets/css/demo.css",
               "src/assets/css/nucleo-icons.css"

package.json

     "@angular/platform-browser-dynamic": "9.0.6",
     "@angular/router": "9.0.6",
     "@angular/service-worker": "9.0.6",
+    "@fortawesome/angular-fontawesome": "~0.6.1",
     "@fortawesome/fontawesome-free": "^5.13.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-brands-svg-icons": "^5.13.0",
+    "@fortawesome/free-regular-svg-icons": "^5.13.0",
+    "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@ng-bootstrap/ng-bootstrap": "6.0.0",
     "bootstrap": "^4.5.0",
     "core-js": "3.6.4",
     "zone.js": "0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "0.900.6",
+    "@angular-devkit/build-angular": "^0.901.7",
     "@angular/cli": "9.0.6",
     "@angular/compiler-cli": "9.0.6",
     "@angular/language-service": "9.0.6",

src/app/app.component.ts

-import { Component, OnInit, Inject, Renderer2, ElementRef, ViewChild } from '@angular/core';
-import { Router, NavigationEnd } from '@angular/router';
-import { Subscription } from 'rxjs/Subscription';
+import { DOCUMENT, Location } from '@angular/common';
+import { Component, ElementRef, Inject, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
 import 'rxjs/add/operator/filter';
-import { DOCUMENT } from '@angular/common';
-import { LocationStrategy, PlatformLocation, Location } from '@angular/common';
+import { Subscription } from 'rxjs/Subscription';
 import { NavbarComponent } from './shared/navbar/navbar.component';
 
 @Component({
     private _router: Subscription;
     @ViewChild(NavbarComponent) navbar: NavbarComponent;
 
-    constructor( private renderer : Renderer2, private router: Router, @Inject(DOCUMENT,) private document: any, private element : ElementRef, public location: Location) {}
+    constructor(private renderer: Renderer2, private router: Router, @Inject(DOCUMENT) private document: any, private element: ElementRef, public location: Location) { }
     ngOnInit() {
-        var navbar : HTMLElement = this.element.nativeElement.children[0].children[0];
+        let navbar: HTMLElement = this.element.nativeElement.children[0].children[0];
         this._router = this.router.events.filter(event => event instanceof NavigationEnd).subscribe((event: NavigationEnd) => {
             if (window.outerWidth > 991) {
                 window.document.children[0].scrollTop = 0;
-            }else{
+            } else {
                 window.document.activeElement.scrollTop = 0;
             }
             this.navbar.sidebarClose();
                 navbar.classList.add('navbar-transparent');
             }
         });
-        var ua = window.navigator.userAgent;
-        var trident = ua.indexOf('Trident/');
+        let ua = window.navigator.userAgent;
+        let trident = ua.indexOf('Trident/');
         if (trident > 0) {
             // IE 11 => return version number
-            var rv = ua.indexOf('rv:');
+            let rv = ua.indexOf('rv:');
             var version = parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
         }
         if (version) {
-            var body = document.getElementsByTagName('body')[0];
+            let body = document.getElementsByTagName('body')[0];
             body.classList.add('ie-background');
 
         }
 
     }
     removeFooter() {
-        var titlee = this.location.prepareExternalUrl(this.location.path());
-        titlee = titlee.slice( 1 );
-        if(titlee === 'signup' || titlee === 'nucleoicons'){
+        let titlee = this.location.prepareExternalUrl(this.location.path());
+        titlee = titlee.slice(1);
+        if (titlee === 'signup' || titlee === 'nucleoicons') {
             return false;
         }
         else {

src/app/app.module.ts

 import { PdfHeaderComponent } from './page-header/pdf-header/pdf-header.component';
 import { MusicHeaderComponent } from './page-header/music-header/music-header.component';
 import { ServiceWorkerModule } from '@angular/service-worker';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 
 @NgModule({
     ComponentsModule,
     PageHeaderModule,
     ServiceWorkerModule.register('ngsw-worker.js', { enabled: true }),
+    FontAwesomeModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/pages/games-dashboard/games-dashboard.component.html

           <div class="col-sm-4 offset-md-4">
             <div class="info text-center">
               <div class="icon icon-danger">
-                <i class="fab fa-itch-io"></i>
+                <fa-icon [icon]="icons.faItchIo" ></fa-icon>
               </div>
               <div class="description">
                 <h4 class="info-title">Mini Beans Jam Games</h4>
                   >Play Now!</a
                 >
                 <a href="https://karotofel.itch.io/mrq" class="btn btn-primary">
-                  Check out on <i class="fab fa-itch-io"></i>
+                  Check out on <fa-icon [icon]="icons.faItchIo" ></fa-icon>
                 </a>
               </div>
             </div>
                   href="https://karotofel.itch.io/wtfungi"
                   class="btn btn-primary"
                 >
-                  Check out on <i class="fab fa-itch-io"></i>
+                  Check out on <fa-icon [icon]="icons.faItchIo" ></fa-icon>
                 </a>
               </div>
             </div>
                   href="https://karotofel.itch.io/laser-blues"
                   class="btn btn-primary"
                 >
-                  Check out on <i class="fab fa-itch-io"></i>
+                  Check out on <fa-icon [icon]="icons.faItchIo" ></fa-icon>
                 </a>
               </div>
             </div>
                   href="https://karotofel.itch.io/salty-piranha"
                   class="btn btn-primary"
                 >
-                  Check out on <i class="fab fa-itch-io"></i>
+                  Check out on <fa-icon [icon]="icons.faItchIo" ></fa-icon>
                 </a>
               </div>
             </div>

src/app/pages/games-dashboard/games-dashboard.component.ts

 import { Component, OnInit } from '@angular/core';
-
+import { IconServiceService } from 'app/service/icon-service.service';
 @Component({
   selector: 'app-games-dashboard',
   templateUrl: './games-dashboard.component.html',
   styleUrls: ['./games-dashboard.component.css']
 })
 export class GamesDashboardComponent implements OnInit {
-
+  public icons = IconServiceService;
   constructor() { }
 
   ngOnInit(): void {

src/app/pages/music/music.component.html

           <div class="col-sm-12">
             <div class="info text-center">
               <div class="icon icon-danger">
-                <i class="fas fa-music"></i>
+                <fa-icon [icon]="icons.faMusic"></fa-icon>
               </div>
               <h4 class="info-title">My favorite Music</h4>
               <div class="info-separator separator"></div>

src/app/pages/music/music.component.ts

 import { Component, OnInit } from '@angular/core';
+import { IconServiceService } from 'app/service/icon-service.service';
 
 @Component({
   selector: 'app-music',
   styleUrls: ['./music.component.css']
 })
 export class MusicComponent implements OnInit {
-
+  public icons = IconServiceService;
   constructor() { }
 
   ngOnInit(): void {

src/app/pages/project-dashboard/project-dashboard.component.html

         <div class="row text-center title">
           <div class="col-sm-4 offset-md-4">
             <div class="info text-center logo">
-              <i class="fas fa-globe"></i>
+              <fa-icon [icon]="icons.faGlobe"></fa-icon>
             </div>
             <div class="description">
               <h4 class="info-title">Web Projects</h4>
         <div class="col-sm-6">
           <div class="info text-center">
             <div class="icon icon-danger">
-              <i class="fab fa-github"></i>
+              <fa-icon [icon]="icons.faGithub" ></fa-icon>
             </div>
             <div class="description">
               <h4 class="info-title">
         <div class="col-sm-6">
           <div class="info text-center">
             <div class="icon icon-danger">
-              <i class="fab fa-npm"></i>
+              <fa-icon [icon]="icons.faNpm" ></fa-icon>
             </div>
             <div class="description">
               <h4 class="info-title">

src/app/pages/project-dashboard/project-dashboard.component.ts

 import { Component, OnInit } from '@angular/core';
+import { IconServiceService } from 'app/service/icon-service.service';
 
 @Component({
   selector: 'app-project-dashboard',
   styleUrls: ['./project-dashboard.component.css']
 })
 export class ProjectDashboardComponent implements OnInit {
-
+  public icons = IconServiceService;
   constructor() { }
 
   ngOnInit(): void {

src/app/pages/resume/resume.component.html

                 class="text-center skill col-sm-3"
               >
                 <div class="text-center skill-logo">
-                  <div [innerHTML]="skill.iconHtml"></div>
+                  <fa-icon
+                    *ngIf="skill.isFaIcon; else noIcon"
+                    [icon]="skill.icon"
+                  ></fa-icon>
+                  <ng-template #noIcon>
+                    <div [innerHTML]="skill.icon"></div>
+                  </ng-template>
                 </div>
                 <div class="text-center">
                   {{ skill.name }}
                 </div>
                 <div class="text-center">
-                  <i class="{{ getStarClass(skill.starCount, 0) }}"></i>
-                  <i class="{{ getStarClass(skill.starCount, 1) }}"></i>
-                  <i class="{{ getStarClass(skill.starCount, 2) }}"></i>
-                  <i class="{{ getStarClass(skill.starCount, 3) }}"></i>
-                  <i class="{{ getStarClass(skill.starCount, 4) }}"></i>
+                  <fa-icon [icon]="getStarIcon(skill.starCount, 0)"></fa-icon>
+                  <fa-icon [icon]="getStarIcon(skill.starCount, 1)"></fa-icon>
+                  <fa-icon [icon]="getStarIcon(skill.starCount, 2)"></fa-icon>
+                  <fa-icon [icon]="getStarIcon(skill.starCount, 3)"></fa-icon>
+                  <fa-icon [icon]="getStarIcon(skill.starCount, 4)"></fa-icon>
                 </div>
               </div>
             </div>
                 class="text-center skill col-sm-6"
               >
                 <div class="text-center skill-logo">
-                  <div [innerHTML]="skill.iconHtml"></div>
+                  <fa-icon
+                    *ngIf="skill.isFaIcon; else noIcon"
+                    [icon]="skill.icon"
+                  ></fa-icon>
+                  <ng-template #noIcon>
+                    <div [innerHTML]="skill.icon"></div>
+                  </ng-template>
                 </div>
                 <div class="text-center">
                   {{ skill.name }}
                 </div>
                 <div class="text-center">
-                  <i class="{{ getStarClass(skill.starCount, 0) }}"></i>
-                  <i class="{{ getStarClass(skill.starCount, 1) }}"></i>
-                  <i class="{{ getStarClass(skill.starCount, 2) }}"></i>
-                  <i class="{{ getStarClass(skill.starCount, 3) }}"></i>
-                  <i class="{{ getStarClass(skill.starCount, 4) }}"></i>
+                  <fa-icon [icon]="getStarIcon(skill.starCount, 0)"></fa-icon>
+                  <fa-icon [icon]="getStarIcon(skill.starCount, 1)"></fa-icon>
+                  <fa-icon [icon]="getStarIcon(skill.starCount, 2)"></fa-icon>
+                  <fa-icon [icon]="getStarIcon(skill.starCount, 3)"></fa-icon>
+                  <fa-icon [icon]="getStarIcon(skill.starCount, 4)"></fa-icon>
                 </div>
               </div>
             </div>
                 class="text-center skill col-sm-6"
               >
                 <div class="text-center skill-logo">
-                  <div [innerHTML]="skill.iconHtml"></div>
+                  <fa-icon
+                    *ngIf="skill.isFaIcon; else noIcon"
+                    [icon]="skill.icon"
+                  ></fa-icon>
+                  <ng-template #noIcon>
+                    <div [innerHTML]="skill.icon"></div>
+                  </ng-template>
                 </div>
                 <div class="text-center">
                   {{ skill.name }}
                 </div>
                 <div class="text-center">
-                  <i class="{{ getStarClass(skill.starCount, 0) }}"></i>
-                  <i class="{{ getStarClass(skill.starCount, 1) }}"></i>
-                  <i class="{{ getStarClass(skill.starCount, 2) }}"></i>
-                  <i class="{{ getStarClass(skill.starCount, 3) }}"></i>
-                  <i class="{{ getStarClass(skill.starCount, 4) }}"></i>
+                  <fa-icon [icon]="getStarIcon(skill.starCount, 0)"></fa-icon>
+                  <fa-icon [icon]="getStarIcon(skill.starCount, 1)"></fa-icon>
+                  <fa-icon [icon]="getStarIcon(skill.starCount, 2)"></fa-icon>
+                  <fa-icon [icon]="getStarIcon(skill.starCount, 3)"></fa-icon>
+                  <fa-icon [icon]="getStarIcon(skill.starCount, 4)"></fa-icon>
                 </div>
               </div>
             </div>
                     class="text-center skill col-sm-6"
                   >
                     <div class="text-center skill-logo">
-                      <div [innerHTML]="skill.iconHtml"></div>
+                      <fa-icon
+                        *ngIf="skill.isFaIcon; else noIcon"
+                        [icon]="skill.icon"
+                      ></fa-icon>
+                      <ng-template #noIcon>
+                        <div [innerHTML]="skill.icon"></div>
+                      </ng-template>
                     </div>
                     <div class="text-center">
                       {{ skill.name }}
           <div class="col-md-6 text-center">
             <div class="info">
               <div class="icon icon-danger">
-                <i class="fas fa-gamepad"></i>
+                <fa-icon [icon]="icons.faGamepad"></fa-icon>
               </div>
               <div class="description">
                 <h4 class="info-title">Games</h4>
           <div class="col-md-6 text-center">
             <div class="info">
               <div class="icon icon-danger">
-                <i class="fas fa-code"></i>
+                <fa-icon [icon]="icons.faCode"></fa-icon>
               </div>
               <div class="description">
                 <h4 class="info-title">Projects</h4>
         <div class="row">
           <div *ngFor="let skill of hobbys" class="text-center skill col-sm-6">
             <div class="text-center skill-logo">
-              <div [innerHTML]="skill.iconHtml"></div>
+              <fa-icon
+                *ngIf="skill.isFaIcon; else noIcon"
+                [icon]="skill.icon"
+              ></fa-icon>
+              <ng-template #noIcon>
+                <div [innerHTML]="skill.icon"></div>
+              </ng-template>
             </div>
             <div class="text-center">
               {{ skill.name }}

src/app/pages/resume/resume.component.ts

 import { Component, OnInit } from '@angular/core';
+import { IconServiceService } from 'app/service/icon-service.service';
 
 export type Star = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 4.5 | 5;
 export const STAR_CLASS_MAP = {
-  0: 'far fa-star',
-  0.5: 'fas fa-star-half',
-  1: 'fas fa-star',
+  0: IconServiceService.farStar,
+  0.5: IconServiceService.faStarHalfAlt,
+  1: IconServiceService.fasStar,
 }
 export const MAX_STARS = 5;
 
 }
 export interface Skill {
   name: string;
-  iconHtml: string;
+  icon: any;
   starCount?: Star;
+  isFaIcon: boolean;
   description?: {
     text?: string;
     links?: Link[];
   public softSkills: Skill[] = [
     {
       name: 'Teamwork',
-      iconHtml: '<i class="fas fa-users"></i>',
+      icon: IconServiceService.faUsers,
+      isFaIcon: true,
       starCount: 4
     },
     {
       name: 'Communication',
-      iconHtml: '<i class="fas fa-comments"></i>',
+      icon: IconServiceService.faComments,
+      isFaIcon: true,
       starCount: 4.5
     },
   ];
   public likeToLearn: Skill[] = [
     {
       name: 'IoT',
-      iconHtml: '<i class="fas fa-microchip"></i>',
+      icon: IconServiceService.faMicrochip,
+      isFaIcon: true,
     },
     {
       name: 'Deep Learning',
-      iconHtml: '<i class="fas fa-cogs"></i>',
+      icon: IconServiceService.faCogs,
+      isFaIcon: true,
     },
     {
       name: 'Game Development',
-      iconHtml: '<i class="fas fa-gamepad"></i>',
+      icon: IconServiceService.faGamepad,
+      isFaIcon: true,
     },
     {
       name: 'Vuejs',
-      iconHtml: '<i class="fab fa-vuejs"></i>',
+      icon: IconServiceService.faVuejs,
+      isFaIcon: true,
     },
   ];
 
   public hobbys: Skill[] = [
     {
       name: 'Gaming',
-      iconHtml: '<i class="fas fa-gamepad"></i>',
+      icon: IconServiceService.faGamepad,
+      isFaIcon: true,
     },
     {
       name: 'Music',
-      iconHtml: '<i class="fas fa-music"></i>',
+      icon: IconServiceService.faMusic,
+      isFaIcon: true,
       description: {
         links: [
           {
     },
     {
       name: 'Programming',
-      iconHtml: '<i class="fas fa-code"></i>',
+      icon: IconServiceService.faCode,
+      isFaIcon: true,
     },
     {
       name: 'Cooking',
-      iconHtml: '<i class="fas fa-utensils"></i>',
+      icon: IconServiceService.faUtensils,
+      isFaIcon: true,
     },
     {
       name: 'Skating',
-      iconHtml: '<i class="fas fa-snowboarding"></i>',
+      icon: IconServiceService.faSnowboarding,
+      isFaIcon: true,
     },
     {
       name: 'Pen & Paper',
-      iconHtml: '<i class="far fa-edit"></i>',
+      icon: IconServiceService.faEdit,
+      isFaIcon: true,
     },
   ];
 
   public languages: Skill[] = [
     {
       name: 'German (native language)',
-      iconHtml: '<img height="30" src="/assets/icons/flags/german.png" alt="German">',
+      icon: '<img height="30" src="/assets/icons/flags/german.png" alt="German">',
+      isFaIcon: false,
       starCount: 5
     },
     {
       name: 'English',
-      iconHtml: '<img height="30" src="/assets/icons/flags/english.png" alt="English">',
+      icon: '<img height="30" src="/assets/icons/flags/english.png" alt="English">',
+      isFaIcon: false,
       starCount: 3.5
     },
   ];
   public skills: Skill[] = [
     {
       name: 'Unit-testing',
-      iconHtml: '<i class="fas fa-vial"></i>',
+      icon: IconServiceService.faVial,
+      isFaIcon: true,
       starCount: 3
     },
     {
       name: 'Jira',
-      iconHtml: '<i class="fab fa-jira"></i> ',
+      icon: IconServiceService.faJira,
+      isFaIcon: true,
       starCount: 4
     },
     {
       name: 'Apache',
-      iconHtml: '<img height="30" src="/assets/icons/apache.png" alt="Apache">',
+      icon: '<img height="30" src="/assets/icons/apache.png" alt="Apache">',
+      isFaIcon: false,
       starCount: 2.5
     },
     {
       name: 'Nginx',
-      iconHtml: '<img height="30" src="/assets/icons/nginx.svg" alt="Nginx">',
+      icon: '<img height="30" src="/assets/icons/nginx.svg" alt="Nginx">',
+      isFaIcon: false,
       starCount: 4.5
     },
     {
       name: 'Jenkins',
-      iconHtml: '<i class="fab fa-jenkins"></i>',
+      icon: IconServiceService.faJenkins,
+      isFaIcon: true,
       starCount: 3
     },
     {
       name: 'SQL',
-      iconHtml: '<i class="fas fa-database"></i>',
+      icon: IconServiceService.faDatabase,
+      isFaIcon: true,
       starCount: 3.5
     },
     {
       name: 'Python',
-      iconHtml: '<i class="fab fa-python"></i>',
+      icon: IconServiceService.faPython,
+      isFaIcon: true,
       starCount: 2
     },
     {
       name: 'PHP',
-      iconHtml: '<i class="fab fa-php"></i>',
+      icon: IconServiceService.faPhp,
+      isFaIcon: true,
       starCount: 4
     },
     {
       name: 'HTML & CSS',
-      iconHtml: '<i class="fab fa-html5"></i>',
+      icon: IconServiceService.faHtml5,
+      isFaIcon: true,
       starCount: 4.5
     },
     {
       name: 'Angular 2+ & AngularJS',
-      iconHtml: '<i class="fab fa-angular"></i>',
+      icon: IconServiceService.faAngular,
+      isFaIcon: true,
       starCount: 4.5
     },
 
     {
       name: 'NestJs',
-      iconHtml: '<img height="30" src="/assets/icons/nestjs.svg" alt="NestJs">',
+      icon: '<img height="30" src="/assets/icons/nestjs.svg" alt="NestJs">',
+      isFaIcon: false,
       starCount: 4
     },
     {
       name: 'Twig',
-      iconHtml: '<img height="30" src="/assets/icons/twig.svg" alt="Twig">',
+      icon: '<img height="30" src="/assets/icons/twig.svg" alt="Twig">',
+      isFaIcon: false,
       starCount: 4.5
     },
     {
       name: 'Electron',
-      iconHtml: '<i class="fas fa-atom"></i>',
+      icon: IconServiceService.faAtom,
+      isFaIcon: true,
       starCount: 4
     },
     {
       name: 'Typescript',
-      iconHtml: '<img height="30" color="white" class="skill-logo" src="/assets/icons/typescript.svg" alt="Typescript">',
+      icon: '<img height="30" color="white" class="skill-logo" src="/assets/icons/typescript.svg" alt="Typescript">',
+      isFaIcon: false,
       starCount: 4
     },
     {
       name: 'Ubuntu',
-      iconHtml: '<i class="fab fa-ubuntu"></i>',
+      icon: IconServiceService.faUbuntu,
+      isFaIcon: true,
       starCount: 4
     },
     {
       name: 'Docker',
-      iconHtml: '<i class="fab fa-docker"></i>',
+      icon: IconServiceService.faDocker,
+      isFaIcon: true,
       starCount: 3
     },
     {
       name: 'Kubernetes',
-      iconHtml: '<img height="30" src="/assets/icons/kubernetes.png" alt="Kubernetes">',
+      icon: '<img height="30" src="/assets/icons/kubernetes.png" alt="Kubernetes">',
+      isFaIcon: false,
       starCount: 2
     },
     {
       name: 'Git',
-      iconHtml: '<i class="fab fa-git"></i>',
+      icon: IconServiceService.faGit,
+      isFaIcon: true,
       starCount: 4.5
     },
     {
       name: 'NPM',
-      iconHtml: '<i class="fab fa-npm"></i>',
+      icon: IconServiceService.faNpm,
+      isFaIcon: true,
       starCount: 5
     },
 
     {
       name: 'Unity',
-      iconHtml: '<i class="fab fa-unity"></i>',
+      icon: IconServiceService.faUnity,
+      isFaIcon: true,
       starCount: 2
     },
 
     {
       name: 'Godot',
-      iconHtml: '<img height="30" src="/assets/icons/kubernetes.png" alt="Godot">',
+      icon: '<img height="30" src="/assets/icons/kubernetes.png" alt="Godot">',
+      isFaIcon: false,
       starCount: 4.5
     },
     {
       name: 'C#',
-      iconHtml: '<div height="30">C#</div>',
+      icon: '<div height="30">C#</div>',
+      isFaIcon: false,
       starCount: 4.5
     },
 
   ];
-  
+  public icons = IconServiceService;
   constructor() { }
 
   ngOnInit(): void {
   }
 
 
-  getStarClass(starCount: Star, starIndex: number) {
+  getStarIcon(starCount: Star, starIndex: number) {
     const starSizes: number[] = [];
     let starCountWorker = starCount;
     for (let starIterator = 1; starIterator <= MAX_STARS; starIterator++) {

src/app/service/icon-service.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { IconServiceService } from './icon-service.service';
+
+describe('IconServiceService', () => {
+  let service: IconServiceService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(IconServiceService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/service/icon-service.service.ts

+import { Injectable } from '@angular/core';
+import { faStar as farStar } from '@fortawesome/free-regular-svg-icons';
+import { faEdit, faHeart, faStar as fasStar, faStarHalfAlt, faMusic, faGlobe, faGamepad, faCode, faUsers, faComments, faCogs, faUtensils, faSnowboarding, faVial, faDatabase, faAtom, faMicrochip, faAddressCard } from '@fortawesome/free-solid-svg-icons';
+import { faItchIo, faVuejs, faJira, faJenkins, faPython, faPhp, faHtml5, faAngular, faUbuntu, faDocker, faGit, faNpm, faUnity, faGithub, faXing } from '@fortawesome/free-brands-svg-icons';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class IconServiceService {
+  static faEdit = faEdit;
+  static farStar = farStar;
+  static fasStar = fasStar;
+  static faStarHalfAlt = faStarHalfAlt;
+  static faHeart = faHeart;
+  static faItchIo = faItchIo;
+  static faMusic = faMusic;
+  static faGlobe = faGlobe;
+  static faGamepad = faGamepad;
+  static faCode = faCode;
+  static faUsers = faUsers;
+  static faComments = faComments;
+  static faCogs = faCogs;
+  static faUtensils = faUtensils;
+  static faSnowboarding = faSnowboarding;
+  static faVial = faVial;
+  static faDatabase = faDatabase;
+  static faAtom = faAtom;
+  static faMicrochip = faMicrochip;
+  static faAddressCard = faAddressCard;
+  static faVuejs = faVuejs;
+  static faJira = faJira;
+  static faJenkins = faJenkins;
+  static faPython = faPython;
+  static faPhp = faPhp;
+  static faHtml5 = faHtml5;
+  static faAngular = faAngular;
+  static faUbuntu = faUbuntu;
+  static faDocker = faDocker;
+  static faGit = faGit;
+  static faNpm = faNpm;
+  static faUnity = faUnity;
+  static faGithub = faGithub;
+  static faXing = faXing;
+
+
+  constructor() { }
+}

src/app/shared/footer/footer.component.html

       </nav>
       <div class="credits ml-auto">
         <span class="copyright">
-          made with <i class="fa fa-heart heart"></i> by cziermann with help of
+          made with <fa-icon [icon]="icons.faHeart"></fa-icon> by cziermann with help of
           <a href="https://www.creative-tim.com/product/paper-kit-2-angular"
             >paper-kit-2</a
           >

src/app/shared/footer/footer.component.ts

 import { Component, OnInit } from '@angular/core';
+import { IconServiceService } from 'app/service/icon-service.service';
 
 @Component({
     selector: 'app-footer',
     styleUrls: ['./footer.component.scss']
 })
 export class FooterComponent implements OnInit {
-    test : Date = new Date();
-
+    public icons = IconServiceService;
     constructor() { }
 
     ngOnInit() {}

src/app/shared/navbar/navbar.component.html

             href="https://github.com/JackWolfskind"
             target="_blank"
           >
-            <i class="fab fa-github"></i>
+            <fa-icon [icon]="icons.faGithub" ></fa-icon>
             <p class="d-lg-none">GitHub</p>
           </a>
         </li>
             href="https://www.npmjs.com/~cziermann"
             target="_blank"
           >
-            <i class="fab fa-npm"></i>
+          <fa-icon [icon]="icons.faNpm" ></fa-icon>
             <p class="d-lg-none">NPM</p>
           </a>
         </li>
             href="https://www.xing.com/profile/Christian_Ziermann3"
             target="_blank"
           >
-            <i class="fab fa-xing"></i>
+          <fa-icon [icon]="icons.faXing" ></fa-icon>
             <p class="d-lg-none">Xing</p>
           </a>
         </li>
             data-placement="bottom"
             [routerLink]="['/resume']"
           >
-            <i class="fas fa-address-card"></i>
+          <fa-icon [icon]="icons.faAddressCard"></fa-icon>
             <p class="d-lg-none">About Me</p>
           </a>
         </li>
             data-placement="bottom"
             [routerLink]="['/games']"
           >
-            <i class="fas fa-gamepad"></i>
+          <fa-icon [icon]="icons.faGamepad"></fa-icon>
             <p class="d-lg-none">Games</p>
           </a>
         </li>
             data-placement="bottom"
             [routerLink]="['/projects']"
           >
-            <i class="fas fa-code"></i>
+          <fa-icon [icon]="icons.faCode"></fa-icon>
             <p class="d-lg-none">Projects</p>
           </a>
         </li>

src/app/shared/navbar/navbar.component.ts

 import { Component, OnInit, ElementRef } from '@angular/core';
 import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
+import { IconServiceService } from 'app/service/icon-service.service';
 
 @Component({
     selector: 'app-navbar',
 export class NavbarComponent implements OnInit {
     private toggleButton: any;
     private sidebarVisible: boolean;
-
-    constructor(public location: Location, private element : ElementRef) {
+    public icons = IconServiceService;
+    constructor(public location: Location, private element: ElementRef, ) {
         this.sidebarVisible = false;
     }
 
         // console.log(html);
         // console.log(toggleButton, 'toggle');
 
-        setTimeout(function(){
+        setTimeout(function () {
             toggleButton.classList.add('toggled');
         }, 500);
         html.classList.add('nav-open');
         }
     };
     isHome() {
-      var titlee = this.location.prepareExternalUrl(this.location.path());
-      if(titlee.charAt(0) === '#'){
-          titlee = titlee.slice( 1 );
-      }
-        if( titlee === '/home' ) {
+        let titlee = this.location.prepareExternalUrl(this.location.path());
+        if (titlee.charAt(0) === '#') {
+            titlee = titlee.slice(1);
+        }
+        if (titlee === '/home') {
             return true;
         }
         else {
         }
     }
     isDocumentation() {
-      var titlee = this.location.prepareExternalUrl(this.location.path());
-      if(titlee.charAt(0) === '#'){
-          titlee = titlee.slice( 1 );
-      }
-        if( titlee === '/documentation' ) {
+        let titlee = this.location.prepareExternalUrl(this.location.path());
+        if (titlee.charAt(0) === '#') {
+            titlee = titlee.slice(1);
+        }
+        if (titlee === '/documentation') {
             return true;
         }
         else {