changed icons to the angular fontawesome library

Service-Soft · Jul 21, 2024 · e6ab7ee · e6ab7ee
1 parent f288446
commit e6ab7ee
Show file tree

Hide file tree

Showing 24 changed files with 101 additions and 29 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,6 +40,8 @@
         "@angular-devkit/build-angular": "~18.1.1",
         "@angular/cli": "~18.1.1",
         "@angular/compiler-cli": "~18.1.1",
+        "@fortawesome/angular-fontawesome": "^0.15.0",
+        "@fortawesome/free-solid-svg-icons": "^6.6.0",
         "@types/jasmine": "~5.1.4",
         "@types/node": "^20.14.11",
         "concurrently": "^8.2.2",

diff --git a/projects/ngx-material-navigation/package.json b/projects/ngx-material-navigation/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ngx-material-navigation",
-    "version": "18.0.1",
+    "version": "18.1.0",
     "license": "MIT",
     "keywords": [
         "angular",
@@ -15,7 +15,9 @@
         "@angular/common": "18",
         "@angular/core": "18",
         "@angular/forms": "18",
-        "@angular/material": "18"
+        "@angular/material": "18",
+        "@fortawesome/angular-fontawesome": "^0.15",
+        "@fortawesome/free-solid-svg-icons": "^6"
     },
     "dependencies": {
         "tslib": "^2.6.2"

diff --git a/...vigation/src/components/nav-element/button/nav-button-flat/nav-button-flat.component.html b/...vigation/src/components/nav-element/button/nav-button-flat/nav-button-flat.component.html
@@ -6,7 +6,7 @@
     (click)="runAction()"
 >
     @if (elementValue.icon) {
-        <i [ngClass]="elementValue.icon"></i>
+        <fa-icon [icon]="elementValue.icon"></fa-icon>
     }
     {{elementValue.name}}
 </button>
diff --git a/...navigation/src/components/nav-element/button/nav-button-flat/nav-button-flat.component.ts b/...navigation/src/components/nav-element/button/nav-button-flat/nav-button-flat.component.ts
@@ -2,6 +2,7 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 
 import { NavButtonComponent } from '../nav-button/nav-button.component';
 
@@ -13,7 +14,8 @@ import { NavButtonComponent } from '../nav-button/nav-button.component';
     standalone: true,
     imports: [
         CommonModule,
-        MatButtonModule
+        MatButtonModule,
+        FaIconComponent
     ]
 })
 export class NavButtonFlatComponent extends NavButtonComponent {}
diff --git a/...aterial-navigation/src/components/nav-element/button/nav-button/nav-button.component.html b/...aterial-navigation/src/components/nav-element/button/nav-button/nav-button.component.html
@@ -4,7 +4,7 @@
 >
     <button mat-raised-button type="button" (click)="runAction()">
         @if (elementValue.icon) {
-            <i [ngClass]="elementValue.icon"></i>
+            <fa-icon [icon]="elementValue.icon"></fa-icon>
         }
         {{elementValue.name}}
     </button>

diff --git a/...-material-navigation/src/components/nav-element/button/nav-button/nav-button.component.ts b/...-material-navigation/src/components/nav-element/button/nav-button/nav-button.component.ts
@@ -2,6 +2,7 @@
 import { CommonModule } from '@angular/common';
 import { Component, EnvironmentInjector, runInInjectionContext } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 
 import { NavElementTypes } from '../../../../models/nav-element.model';
 import { NgxMatNavigationBaseNavElementComponent } from '../../base-nav-element.component';
@@ -14,7 +15,8 @@ import { NgxMatNavigationBaseNavElementComponent } from '../../base-nav-element.
     standalone: true,
     imports: [
         CommonModule,
-        MatButtonModule
+        MatButtonModule,
+        FaIconComponent
     ]
 })
 export class NavButtonComponent extends NgxMatNavigationBaseNavElementComponent<NavElementTypes.BUTTON> {

diff --git a/...gation/src/components/nav-element/link/nav-external-link/nav-external-link.component.html b/...gation/src/components/nav-element/link/nav-external-link/nav-external-link.component.html
@@ -7,7 +7,7 @@
     [attr.aria-label]="elementValue.ariaLabel"
 >
     @if (elementValue.icon) {
-        <i [ngClass]="elementValue.icon"></i>
+        <fa-icon [icon]="elementValue.icon"></fa-icon>
     }
     {{elementValue.name}}
 </a>
diff --git a/...vigation/src/components/nav-element/link/nav-external-link/nav-external-link.component.ts b/...vigation/src/components/nav-element/link/nav-external-link/nav-external-link.component.ts
@@ -2,6 +2,7 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 
 import { NavElementTypes } from '../../../../models/nav-element.model';
 import { NgxMatNavigationBaseNavElementComponent } from '../../base-nav-element.component';
@@ -14,7 +15,8 @@ import { NgxMatNavigationBaseNavElementComponent } from '../../base-nav-element.
     standalone: true,
     imports: [
         CommonModule,
-        MatButtonModule
+        MatButtonModule,
+        FaIconComponent
     ]
 })
 export class NavExternalLinkComponent extends NgxMatNavigationBaseNavElementComponent<NavElementTypes.EXTERNAL_LINK> { }
diff --git a/...gation/src/components/nav-element/link/nav-internal-link/nav-internal-link.component.html b/...gation/src/components/nav-element/link/nav-internal-link/nav-internal-link.component.html
@@ -8,7 +8,7 @@
     [attr.aria-label]="elementValue.ariaLabel"
 >
     @if (elementValue.icon) {
-        <i [ngClass]="elementValue.icon"></i> 
+        <fa-icon [icon]="elementValue.icon"></fa-icon> 
     }
     {{elementValue.name}}
 </a>
diff --git a/...vigation/src/components/nav-element/link/nav-internal-link/nav-internal-link.component.ts b/...vigation/src/components/nav-element/link/nav-internal-link/nav-internal-link.component.ts
@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 
 import { NavElementTypes } from '../../../../models/nav-element.model';
 import { NgxMatNavigationBaseNavElementComponent } from '../../base-nav-element.component';
@@ -16,7 +17,8 @@ import { NgxMatNavigationBaseNavElementComponent } from '../../base-nav-element.
     imports: [
         CommonModule,
         MatButtonModule,
-        RouterModule
+        RouterModule,
+        FaIconComponent
     ]
 })
 export class NavInternalLinkComponent extends NgxMatNavigationBaseNavElementComponent<NavElementTypes.INTERNAL_LINK> {

diff --git a/projects/ngx-material-navigation/src/components/nav-element/nav-element.component.html b/projects/ngx-material-navigation/src/components/nav-element/nav-element.component.html
@@ -67,7 +67,7 @@
                 [attr.aria-label]="element.ariaLabel"
             >
                 @if (elementMenu.icon) {
-                    <i [ngClass]="elementMenu.icon"></i>
+                    <fa-icon [icon]="elementMenu.icon"></fa-icon>
                 }
                 {{elementMenu.name}}
             </button>
@@ -81,7 +81,7 @@
                 [attr.aria-label]="element.ariaLabel"
             >
                 @if (elementMenu.icon) {
-                    <i [ngClass]="elementMenu.icon"></i>
+                    <fa-icon [icon]="elementMenu.icon"></fa-icon>
                 }
                 {{elementMenu.name}}
             </button>

diff --git a/projects/ngx-material-navigation/src/components/nav-element/nav-element.component.ts b/projects/ngx-material-navigation/src/components/nav-element/nav-element.component.ts
@@ -4,6 +4,7 @@ import { AfterContentChecked, Component, HostListener, Input, OnInit, ViewChild
 import { MatButton, MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 
 import { NavButtonComponent } from './button/nav-button/nav-button.component';
 import { NavButtonFlatComponent } from './button/nav-button-flat/nav-button-flat.component';
@@ -45,7 +46,8 @@ import { NavUtilities } from '../../utilities/nav.utilities';
         NavInternalLinkComponent,
         NavExternalLinkComponent,
         NavCustomComponent,
-        NavTextComponent
+        NavTextComponent,
+        FaIconComponent
     ]
 })
 export class NavElementComponent implements AfterContentChecked, OnInit {

diff --git a/...av-element/title/nav-title-with-external-link/nav-title-with-external-link.component.html b/...av-element/title/nav-title-with-external-link/nav-title-with-external-link.component.html
@@ -8,7 +8,7 @@
 >
     <h1>
         @if (elementValue.icon) {
-            <i [ngClass]="elementValue.icon"></i>
+            <fa-icon [icon]="elementValue.icon"></fa-icon>
         }
         {{elementValue.title}}
     </h1>

diff --git a/.../nav-element/title/nav-title-with-external-link/nav-title-with-external-link.component.ts b/.../nav-element/title/nav-title-with-external-link/nav-title-with-external-link.component.ts
@@ -1,6 +1,7 @@
 /* eslint-disable jsdoc/require-jsdoc */
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 
 import { NavElementTypes } from '../../../../models/nav-element.model';
 import { NgxMatNavigationBaseNavElementComponent } from '../../base-nav-element.component';
@@ -11,6 +12,6 @@ import { NgxMatNavigationBaseNavElementComponent } from '../../base-nav-element.
     templateUrl: './nav-title-with-external-link.component.html',
     styleUrls: ['./nav-title-with-external-link.component.scss', '../base-nav-title.scss'],
     standalone: true,
-    imports: [CommonModule]
+    imports: [CommonModule, FaIconComponent]
 })
 export class NavTitleWithExternalLinkComponent extends NgxMatNavigationBaseNavElementComponent<NavElementTypes.TITLE_WITH_EXTERNAL_LINK> { }
diff --git a/...av-element/title/nav-title-with-internal-link/nav-title-with-internal-link.component.html b/...av-element/title/nav-title-with-internal-link/nav-title-with-internal-link.component.html
@@ -8,7 +8,7 @@
 >
     <h1>
         @if (elementValue.icon) {
-            <i [ngClass]="elementValue.icon"></i>
+            <fa-icon [icon]="elementValue.icon"></fa-icon>
         }
         {{elementValue.title}}
     </h1>

diff --git a/.../nav-element/title/nav-title-with-internal-link/nav-title-with-internal-link.component.ts b/.../nav-element/title/nav-title-with-internal-link/nav-title-with-internal-link.component.ts
@@ -2,6 +2,7 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 
 import { NavElementTypes } from '../../../../models/nav-element.model';
 import { NgxMatNavigationBaseNavElementComponent } from '../../base-nav-element.component';
@@ -14,7 +15,8 @@ import { NgxMatNavigationBaseNavElementComponent } from '../../base-nav-element.
     standalone: true,
     imports: [
         CommonModule,
-        RouterModule
+        RouterModule,
+        FaIconComponent
     ]
 })
 export class NavTitleWithInternalLinkComponent extends NgxMatNavigationBaseNavElementComponent<NavElementTypes.TITLE_WITH_INTERNAL_LINK> {

diff --git a/...x-material-navigation/src/components/nav-element/title/nav-title/nav-title.component.html b/...x-material-navigation/src/components/nav-element/title/nav-title/nav-title.component.html
@@ -1,7 +1,7 @@
 <div [class.sidenavElement]="isSidenavElement" [class.menuItem]="isMenuItem" [attr.aria-label]="elementValue.ariaLabel">
     <h1>
         @if (elementValue.icon) {
-            <i [ngClass]="elementValue.icon"></i>
+            <fa-icon [icon]="elementValue.icon"></fa-icon>
         }
         {{elementValue.title}}
     </h1>

diff --git a/...ngx-material-navigation/src/components/nav-element/title/nav-title/nav-title.component.ts b/...ngx-material-navigation/src/components/nav-element/title/nav-title/nav-title.component.ts
@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 
 import { NavElementTypes } from '../../../../models/nav-element.model';
 import { NgxMatNavigationBaseNavElementComponent } from '../../base-nav-element.component';
@@ -10,7 +11,7 @@ import { NgxMatNavigationBaseNavElementComponent } from '../../base-nav-element.
     templateUrl: './nav-title.component.html',
     styleUrls: ['./nav-title.component.scss', '../base-nav-title.scss'],
     standalone: true,
-    imports: [CommonModule]
+    imports: [CommonModule, FaIconComponent]
 })
 // eslint-disable-next-line jsdoc/require-jsdoc
 export class NavTitleComponent extends NgxMatNavigationBaseNavElementComponent<NavElementTypes.TITLE> { }
diff --git a/projects/ngx-material-navigation/src/components/navbar/navbar.component.ts b/projects/ngx-material-navigation/src/components/navbar/navbar.component.ts
@@ -3,6 +3,8 @@ import { AfterContentChecked, Component, ElementRef, EnvironmentInjector, HostLi
 import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
+import { IconDefinition } from '@fortawesome/angular-fontawesome';
+import { faBars } from '@fortawesome/free-solid-svg-icons';
 
 import { NavElement, NavElementPosition, NavElementTypes } from '../../models/nav-element.model';
 import { NavbarRow } from '../../models/navbar.model';
@@ -19,11 +21,11 @@ export const NGX_BURGER_MENU_ARIA_LABEL: InjectionToken<string> = new InjectionT
 );
 
 // eslint-disable-next-line jsdoc/require-jsdoc
-export const NGX_BURGER_MENU_ICON: InjectionToken<string> = new InjectionToken<string>(
-    'Provider for the burger menu icon. Default: "fas fa-bars"',
+export const NGX_BURGER_MENU_ICON: InjectionToken<IconDefinition> = new InjectionToken<IconDefinition>(
+    'Provider for the burger menu icon. Default: "faBars"',
     {
         providedIn: 'root',
-        factory: () => 'fas fa-bars'
+        factory: () => faBars
     }
 );
 
@@ -113,7 +115,7 @@ export class NgxMatNavigationNavbarComponent implements AfterContentChecked {
         private readonly sanitizer: DomSanitizer,
         public navService: NgxMatNavigationService,
         @Inject(NGX_BURGER_MENU_ICON)
-        private readonly burgerMenuIcon: string,
+        private readonly burgerMenuIcon: IconDefinition,
         @Inject(NGX_BURGER_MENU_ARIA_LABEL)
         private readonly burgerMenuAriaLabel: string,
         private readonly injector: EnvironmentInjector

diff --git a/projects/ngx-material-navigation/src/models/nav-link.model.ts b/projects/ngx-material-navigation/src/models/nav-link.model.ts
@@ -1,4 +1,5 @@
 import { Route } from '@angular/router';
+import { IconDefinition } from '@fortawesome/angular-fontawesome';
 
 import { BaseNavElement, NavElementTypes } from './nav-element.model';
 import { NavRoute } from './nav-route.model';
@@ -14,7 +15,7 @@ export abstract class NavLink extends BaseNavElement {
     /**
      * An icon to display left of the link.
      */
-    icon?: string;
+    icon?: IconDefinition;
     /**
      * Whether or not the link should be opened in a new tab.
      */

diff --git a/projects/ngx-material-navigation/src/models/nav-menu.model.ts b/projects/ngx-material-navigation/src/models/nav-menu.model.ts
@@ -1,3 +1,4 @@
+import { IconDefinition } from '@fortawesome/angular-fontawesome';
 import { NavButton } from './nav-button.model';
 import { NavCustom } from './nav-custom.model';
 import { BaseNavElement, NavElementTypes } from './nav-element.model';
@@ -34,5 +35,5 @@ export interface NavMenu extends BaseNavElement {
     /**
      * An icon to display left of the menu.
      */
-    icon?: string
+    icon?: IconDefinition
 }
diff --git a/projects/ngx-material-navigation/src/models/nav-route.model.ts b/projects/ngx-material-navigation/src/models/nav-route.model.ts
@@ -1,6 +1,7 @@
 import { Data, ResolveFn, Route } from '@angular/router';
 
 import { PageNotFoundConfig } from './page-not-found-config.model';
+import { IconDefinition } from '@fortawesome/angular-fontawesome';
 
 /**
  * An opinionated model of the Angular Route.
@@ -46,7 +47,7 @@ export interface NavAnchor {
     /**
      * An optional icon for the anchor.
      */
-    icon?: string,
+    icon?: IconDefinition,
     /**
      * The aria label of the element.
      */