changed icons to fontawesome

src/Ombi/ClientApp/src/app/interfaces/ICommon.ts

@@ -30,7 +30,6 @@ export interface IUsersModel {
 export interface INavBar {
     id: string;
     icon: string;
-    faIcon: string;
     name: string;
     link: string;
     requiresAdmin: boolean;

src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html

@@ -27,16 +27,14 @@
                         matTooltip="{{nav.toolTipMessage | translate}}" matTooltipPosition="right"
                         [routerLinkActive]="'active-list-item'">
 
-                        <mat-icon *ngIf="nav.icon" aria-label="Side nav toggle icon" [style]="nav.style">{{nav.icon}}
-                        </mat-icon>
-                        <i *ngIf="nav.faIcon" class="far fa-lg {{nav.faIcon}}"
+                        <i *ngIf="nav.icon" class="fa-lg {{nav.icon}}"
                             style="padding-left: 5px; padding-right: 5px;" aria-hidden="true"></i>
                         &nbsp;{{nav.name | translate}}
                     </a>
                     <a id="{{nav.id}}" *ngIf="!nav.externalLink" mat-list-item [routerLink]="nav.link" [style]="nav.color"
                         [routerLinkActive]="'active-list-item'">
 
-                        <mat-icon aria-label="Side nav toggle icon">{{nav.icon}}</mat-icon>
+                        <i class="fa-lg {{nav.icon}}"></i>
                         &nbsp;{{nav.name | translate}}
                     </a>
                 </div>
@@ -44,7 +42,7 @@
 
             <a id="nav-logout" mat-list-item [routerLinkActive]="'active-list-item'"
                 aria-label="Toggle sidenav" (click)="logOut();">
-                <mat-icon aria-label="Side nav toggle icon">exit_to_app</mat-icon>
+                <i class="fa-lg fas fa-sign-out-alt"></i>
                 &nbsp;{{ 'NavigationBar.Logout' | translate }}
             </a>
 
@@ -64,7 +62,7 @@
         <mat-toolbar color="primary" class="top-bar-container">
             <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"
                 *ngIf="isHandset$ | async">
-                <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
+                <i class="fa-lg fas fa-bars"></i>
             </button>
 
             <div class="col-8 col-lg-10 top-search-bar">
@@ -77,7 +75,7 @@
             </div>
             <div class="col-2 top-filter">
                 <button id="search-filter" mat-icon-button [matMenuTriggerFor]="filterMenu">
-                    <mat-icon>filter_alt</mat-icon>
+                    <i class="fa-lg fas fa-filter"></i>
                 </button>
                 <mat-menu #filterMenu="matMenu" yPosition="below" class="smaller-panel">
                     <mat-slide-toggle id="filterMovies" class="mat-menu-item slide-menu" [checked]="searchFilter.movies"

src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts

@@ -83,16 +83,16 @@ export class MyNavComponent implements OnInit {
       this.filterService.changeFilter(this.searchFilter);
     }
     this.navItems = [
-      { id: "nav-discover", name: "NavigationBar.Discover", icon: "find_replace", link: "/discover", requiresAdmin: false, enabled: true, faIcon: null },
-      { id: "nav-requests", name: "NavigationBar.Requests", icon: "list", link: "/requests-list", requiresAdmin: false, enabled: true, faIcon: null },
-      { id: "nav-issues", name: "NavigationBar.Issues", icon: "notification_important", link: "/issues", requiresAdmin: false, enabled: this.issuesEnabled, faIcon: null },
-      { id: "nav-userManagement", name: "NavigationBar.UserManagement", icon: "account_circle", link: "/usermanagement", requiresAdmin: true, enabled: true, faIcon: null },
+      { id: "nav-discover", name: "NavigationBar.Discover", icon: "fas fa-bolt", link: "/discover", requiresAdmin: false, enabled: true },
+      { id: "nav-requests", name: "NavigationBar.Requests", icon: "fas fa-stream", link: "/requests-list", requiresAdmin: false, enabled: true },
+      { id: "nav-issues", name: "NavigationBar.Issues", icon: "fas fa-exclamation-triangle", link: "/issues", requiresAdmin: false, enabled: this.issuesEnabled },
+      { id: "nav-userManagement", name: "NavigationBar.UserManagement", icon: "fas fa-users", link: "/usermanagement", requiresAdmin: true, enabled: true },
       //id: "",  { name: "NavigationBar.Calendar", icon: "calendar_today", link: "/calendar", requiresAdmin: false, enabled: true },
-      { id: "nav-adminDonate", name: "NavigationBar.Donate", icon: "attach_money", link: "https://www.paypal.me/PlexRequestsNet", externalLink: true, requiresAdmin: true, enabled: true, toolTip: true, style: "color:red;", toolTipMessage: 'NavigationBar.DonateTooltip', faIcon: null },
-      { id: "nav-userDonate", name: "NavigationBar.Donate", icon: "attach_money", link: customizationSettings.customDonationUrl, externalLink: true, requiresAdmin: false, enabled: customizationSettings.enableCustomDonations, toolTip: true, toolTipMessage: customizationSettings.customDonationMessage, faIcon: null },
-      { id: "nav-featureSuggestion", name: "NavigationBar.FeatureSuggestion", icon: null, link: "https://features.ombi.io/", externalLink: true, requiresAdmin: true, enabled: true, toolTip: true, toolTipMessage: 'NavigationBar.FeatureSuggestionTooltip', faIcon: "fa-lightbulb" },
-      { id: "nav-settings", name: "NavigationBar.Settings", icon: "settings", link: "/Settings/About", requiresAdmin: true, enabled: true, faIcon: null },
-      { id: "nav-userPreferences", name: "NavigationBar.UserPreferences", icon: "person", link: "/user-preferences", requiresAdmin: false, enabled: true, faIcon: null },
+      { id: "nav-adminDonate", name: "NavigationBar.Donate", icon: "fas fa-dollar-sign", link: "https://www.paypal.me/PlexRequestsNet", externalLink: true, requiresAdmin: true, enabled: true, toolTip: true, style: "color:red;", toolTipMessage: 'NavigationBar.DonateTooltip' },
+      { id: "nav-userDonate", name: "NavigationBar.Donate", icon: "fas fa-dollar-sign", link: customizationSettings.customDonationUrl, externalLink: true, requiresAdmin: false, enabled: customizationSettings.enableCustomDonations, toolTip: true, toolTipMessage: customizationSettings.customDonationMessage },
+      { id: "nav-featureSuggestion", name: "NavigationBar.FeatureSuggestion", icon: "far fa-lightbulb", link: "https://features.ombi.io/", externalLink: true, requiresAdmin: true, enabled: true, toolTip: true, toolTipMessage: 'NavigationBar.FeatureSuggestionTooltip'},
+      { id: "nav-settings", name: "NavigationBar.Settings", icon: "fas fa-cogs", link: "/Settings/About", requiresAdmin: true, enabled: true },
+      { id: "nav-userPreferences", name: "NavigationBar.UserPreferences", icon: "fas fa-user", link: "/user-preferences", requiresAdmin: false, enabled: true },
     ];
   }