2 files changed, 13 insertions, 3 deletions

diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index 6969329e8..629c04e6b 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -53,9 +53,7 @@
         <p>{{ message.detail }}</p>
       </div>
 
-      <span *ngIf="message.severity === 'success'" class="glyphicon glyphicon-ok"></span>
-      <span *ngIf="message.severity === 'info'" class="glyphicon glyphicon-info-sign"></span>
-      <span *ngIf="message.severity === 'error'" class="glyphicon glyphicon-remove"></span>
+      <my-global-icon [iconName]="getNotificationIcon(message)"></my-global-icon>
     </div>
   </ng-template>
 </p-toast>
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index a60138af9..8fdab0c40 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -31,6 +31,7 @@ import { BroadcastMessageLevel, HTMLServerConfig, UserRole } from '@shared/model
 import { MenuService } from './core/menu/menu.service'
 import { POP_STATE_MODAL_DISMISS } from './helpers'
 import { InstanceService } from './shared/shared-instance'
+import { GlobalIconName } from './shared/shared-icons'
 
 @Component({
   selector: 'my-app',
@@ -150,6 +151,17 @@ export class AppComponent implements OnInit, AfterViewInit {
     this.screenService.isBroadcastMessageDisplayed = false
   }
 
+  getNotificationIcon (message: { severity: 'success' | 'error' | 'info' }): GlobalIconName {
+    switch (message.severity) {
+      case 'error':
+        return 'cross'
+      case 'success':
+        return 'tick'
+      case 'info':
+        return 'help'
+    }
+  }
+
   private initRouteEvents () {
     const eventsObs = this.router.events