Replaced all the mat-icons with fontawesome

src/Ombi/ClientApp/src/app/media-details/components/shared/issues-panel/issues-panel.component.html

@@ -5,7 +5,9 @@
                 {{'Issues.Title' | translate}}
             </mat-panel-title>
             <mat-panel-description>
-                <span *ngIf="isOutstanding">{{issuesCount}} </span><span><mat-icon *ngIf="isOutstanding" matTooltip="{{'Issues.Outstanding' | translate}}">error_outline</mat-icon></span>
+                <span *ngIf="isOutstanding">{{issuesCount}} </span><span>
+                    <i *ngIf="isOutstanding" matTooltip="{{'Issues.Outstanding' | translate}}" class="fas fa-exclamation-triangle"></i>
+                </span>
                 <span *ngIf="!isOutstanding">{{issuesCount}}</span>
             </mat-panel-description>
         </mat-expansion-panel-header>

src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.html

@@ -31,13 +31,13 @@
     </button>
     <mat-menu #menu="matMenu">
         <button mat-menu-item (click)="openRequestOnBehalf()" [disabled]="!canRequestOnBehalf">
-            <mat-icon>supervised_user_circle</mat-icon>
-            <span>{{'MediaDetails.RequestOnBehalf' | translate}}</span>
+            <i class="fas fa-user-friends icon-spacing"></i>
+            <span> {{'MediaDetails.RequestOnBehalf' | translate}}</span>
         </button>
         <button mat-menu-item [disabled]="!canShowAdvanced" (click)="openAdvancedOptions()">
-            <mat-icon>movie_filter</mat-icon>
-            <span *ngIf="type === RequestType.movie">{{'MediaDetails.RadarrConfiguration' | translate}}</span>
-            <span *ngIf="type === RequestType.tvShow">{{'MediaDetails.SonarrConfiguration' | translate}}</span>
+            <i class="fas fa-ticket-alt icon-spacing"></i>
+            <span *ngIf="type === RequestType.movie"> {{ 'MediaDetails.RadarrConfiguration' | translate}}</span>
+            <span *ngIf="type === RequestType.tvShow"> {{ 'MediaDetails.SonarrConfiguration' | translate}}</span>
         </button>
     </mat-menu>
 </div>

src/Ombi/ClientApp/src/app/media-details/components/tv/panels/tv-request-grid/tv-request-grid.component.html

@@ -75,7 +75,7 @@
 
 
 <button *ngIf="!tv.fullyAvailable && requestable" mat-fab color="accent" id="addFabBtn" class="floating-fab" [matMenuTriggerFor]="aboveMenu">
-  <mat-icon>add</mat-icon></button>
+  <i class="fas fa-plus fa-lg"></i>
 <mat-menu #aboveMenu="matMenu" yPosition="above">
 
   <button id="requestAll" mat-menu-item (click)="requestAllSeasons()">{{'Search.TvShows.AllSeasons' | translate }}</button>

src/Ombi/ClientApp/src/app/settings/ombi/ombi.component.html

@@ -16,7 +16,7 @@
                     <mat-label>Api Key</mat-label>
                     <input matInput id="ApiKey" name="ApiKey"  formControlName="apiKey" readonly="readonly">
                     <button type="button" matSuffix (click)="refreshApiKey()" style="display:inline-block;">
-                        <mat-icon class="fas fa-sync"></mat-icon>
+                        <i class="fas fa-sync-alt fa-lg"></i>
                     </button>
 
                 </mat-form-field>

src/Ombi/ClientApp/src/app/settings/plex/plex.component.ts

@@ -52,7 +52,10 @@ export class PlexComponent implements OnInit, OnDestroy {
     }
 
     public selectServer(selectedServer: IPlexServerResponse, server: IPlexServer) {
-        server.ip = selectedServer.localAddresses.split(",")[0];
+        var splitServers = selectedServer.localAddresses.split(",");
+        if (splitServers.length > 1) {
+            server.ip = splitServers[splitServers.length - 1];
+        }
         server.name = selectedServer.name;
         server.machineIdentifier = selectedServer.machineIdentifier;
         server.plexAuthToken = selectedServer.accessToken;

src/Ombi/ClientApp/src/app/settings/themoviedb/themoviedb.component.html

@@ -30,7 +30,7 @@
                         <mat-chip *ngFor="let key of excludedKeywords" [selectable]="false" [removable]="true"
                             (removed)="remove(key)">
                             {{key.name}}
-                            <mat-icon matChipRemove>cancel</mat-icon>
+                            <i matChipRemove class="fas fa-times fa-lg"></i>
                         </mat-chip>
                     </mat-chip-list>
 

src/Ombi/ClientApp/src/app/shared/remaining-requests/remaining-requests.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="remaining?.hasLimit">
   <small id="remainingRequests" class="text-center">
-      <mat-icon [matTooltip]="getTooltipContent()">{{matIcon}}</mat-icon> {{'Requests.Remaining.Quota' | translate: {remaining: remaining.remaining, total: remaining.limit} }}
+      <i class="{{matIcon}}" [matTooltip]="getTooltipContent()"></i> {{'Requests.Remaining.Quota' | translate: {remaining: remaining.remaining, total: remaining.limit} }}
   </small>
 </div>
 

src/Ombi/ClientApp/src/app/shared/remaining-requests/remaining-requests.component.ts

@@ -53,17 +53,17 @@ export class RemainingRequestsComponent implements OnInit {
         switch (this.type) {
             case RequestType.movie:
                 this.requestService.getRemainingMovieRequests().subscribe(callback);
-                this.matIcon = "movie";
+                this.matIcon = "fas fa-film";
 
                 break;
             case RequestType.tvShow:
                 this.requestService.getRemainingTvRequests().subscribe(callback);
-                this.matIcon = "tv";
+                this.matIcon = "fas fa-tv";
 
                 break;
             case RequestType.album:
                 this.requestService.getRemainingMusicRequests().subscribe(callback);
-                this.matIcon = "library_music";
+                this.matIcon = "fas fa-music";
 
                 break;
         }

src/Ombi/ClientApp/src/styles/shared.scss

@@ -137,4 +137,8 @@ table {
 
 ::ng-deep .mat-form-field.mat-focused .mat-form-field-label {
     color: $accent;
+}
+
+.icon-spacing {
+    margin-right: 1%;
 }

tests/cypress/fixtures/discover/popularMovies.json

@@ -233,45 +233,6 @@
     "subscribed": false,
     "showSubscribe": true
   },
-  {
-    "adult": false,
-    "backdropPath": "/vKzbIoHhk1z9DWYi8kyFe9Gg0HF.jpg",
-    "genreIds": [],
-    "originalLanguage": "en",
-    "originalTitle": "Coming 2 America",
-    "overview": "Prince Akeem Joffer is set to become King of Zamunda when he discovers he has a son he never knew about in America – a street savvy Queens native named Lavelle. Honoring his royal father's dying wish to groom this son as the crown prince, Akeem and Semmi set off to America once again.",
-    "popularity": 2243.493896484375,
-    "posterPath": "/nWBPLkqNApY5pgrJFMiI9joSI30.jpg",
-    "releaseDate": "2021-03-05T00:00:00",
-    "title": "Coming 2 America",
-    "video": false,
-    "voteAverage": 7.099999904632568,
-    "voteCount": 552,
-    "alreadyInCp": false,
-    "trailer": null,
-    "homepage": null,
-    "rootPathOverride": 0,
-    "qualityOverride": 0,
-    "type": 1,
-    "releaseDates": null,
-    "digitalReleaseDate": null,
-    "id": 484718,
-    "approved": false,
-    "denied": null,
-    "deniedReason": null,
-    "requested": false,
-    "requestId": 0,
-    "available": false,
-    "plexUrl": null,
-    "embyUrl": null,
-    "jellyfinUrl": null,
-    "quality": null,
-    "imdbId": "tt6802400",
-    "theTvDbId": null,
-    "theMovieDbId": "484718",
-    "subscribed": false,
-    "showSubscribe": true
-  },
   {
     "adult": false,
     "backdropPath": "/lOSdUkGQmbAl5JQ3QoHqBZUbZhC.jpg",

tests/cypress/tests/details/movie/moviedetails-buttons.spec.ts

@@ -99,11 +99,11 @@ describe("Movie Details Buttons", () => {
   it("Movie Requested, Deny Movie", () => {
     cy.login();
 
-    Page.visit("484718");
+    Page.visit("671");
 
     Page.requestButton.click();
     cy.verifyNotification(
-      "Coming 2 America (2021) has been successfully added"
+      "Harry Potter and the Philosopher's Stone (2001) has been successfully added"
     );
 
     cy.reload();