Use icons to show type of items in service

src/app/components/service/service.component.html

@@ -2,7 +2,7 @@
 <div>
   <mat-nav-list>
     <a mat-list-item *ngFor="let item of items;let counter = index;" (click)="onItemSelected(counter)"  [class.selected]="item.selected">
-      <mat-icon mat-list-icon>queue_music</mat-icon>
+      <mat-icon mat-list-icon>{{ getIcon(item) }}</mat-icon>
       <p mat-line>{{item.title}}<p>
     </a>
   </mat-nav-list>

src/app/components/service/service.component.ts

@@ -2,16 +2,17 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router'
 
 import { OpenLPService } from '../../openlp.service';
+import { ServiceItem } from '../../responses';
 
 @Component({
-selector: 'openlp-remote-service',
-templateUrl: './service.component.html',
-styleUrls: ['./service.component.scss'],
-providers: [OpenLPService]
+  selector: 'openlp-remote-service',
+  templateUrl: './service.component.html',
+  styleUrls: ['./service.component.scss'],
+  providers: [OpenLPService]
 })
 
 export class OpenLPServiceComponent implements OnInit {
-  items = [];
+  items: ServiceItem[] = [];
   ngOnInit() {
     this.getServiceItems();
   }
@@ -29,4 +30,21 @@ export class OpenLPServiceComponent implements OnInit {
     openlpService.stateChanged$.subscribe(item => this.getServiceItems());
   }
 
+  getIcon(item: ServiceItem): string {
+    if (item.plugin == 'songs') {
+      return 'queue_music';
+    } else if (item.plugin == 'images') {
+      return 'image';
+    } else if (item.plugin == 'bibles') {
+      return 'book';
+    } else if (item.plugin == 'media') {
+      return 'movie';
+    } else if (item.plugin == 'custom') {
+      return 'description';
+    } else if (item.plugin == 'presentations') {
+      return 'slideshow';
+    }
+    return 'crop_square';
+  }
+
 }

src/app/responses.ts

@@ -30,5 +30,4 @@ export interface ServiceItem {
     plugin: string;
     selected: boolean;
     title: string;
-  }
-  
+}