Add custom svg icon for comment tags

Refactor init of custom icons into a separate service

src/app/app.component.ts

@@ -2,9 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { SwUpdate } from '@angular/service-worker';
 import { NotificationService } from './services/util/notification.service';
-import { MatIconRegistry } from '@angular/material';
-import { DomSanitizer } from '@angular/platform-browser';
 import { Rescale } from './models/rescale';
+import { CustomIconService } from './services/util/custom-icon.service';
 
 @Component({
   selector: 'app-root',
@@ -18,25 +17,14 @@ export class AppComponent implements OnInit {
   constructor(private translationService: TranslateService,
               private update: SwUpdate,
               public notification: NotificationService,
-              private matIconRegistry: MatIconRegistry,
-              private domSanitizer: DomSanitizer) {
+              private customIconService: CustomIconService) {
     translationService.setDefaultLang(this.translationService.getBrowserLang());
     sessionStorage.setItem('currentLang', this.translationService.getBrowserLang());
-    for (const icon of this.icons) {
-      this.matIconRegistry.addSvgIcon(
-        icon,
-        this.domSanitizer.bypassSecurityTrustResourceUrl('../assets/icons/' + icon + '.svg')
-      );
-    }
+    customIconService.init();
   }
 
   public static rescale: Rescale = new Rescale();
 
-  icons = [
-    'beamer',
-    'meeting_room'
-  ];
-
   title = 'frag.jetzt';
 
   public static scrollTop() {

src/app/app.module.ts

@@ -42,13 +42,14 @@ import { HomeCreatorPageComponent } from './components/home/home-creator-page/ho
 import { HomeParticipantPageComponent } from './components/home/home-participant-page/home-participant-page.component';
 import { CommentSettingsService } from './services/http/comment-settings.service';
 import { BonusTokenService } from './services/http/bonus-token.service';
+import { CustomIconService } from './services/util/custom-icon.service';
 import { ModeratorModule } from './components/moderator/moderator.module';
 import { ImprintComponent } from './components/home/_dialogs/imprint/imprint.component';
 import { DataProtectionComponent } from './components/home/_dialogs/data-protection/data-protection.component';
 import { HelpPageComponent } from './components/shared/_dialogs/help-page/help-page.component';
 import { CookiesComponent } from './components/home/_dialogs/cookies/cookies.component';
 import { DataProtectionEnComponent } from '../assets/i18n/data-protection/data-protection-en';
-import { DataProtectionDeComponent } from 'assets/i18n/data-protection/data-protection-de';
+import { DataProtectionDeComponent } from '../assets/i18n/data-protection/data-protection-de';
 import { CookiesEnComponent } from '../assets/i18n/cookies/cookies-en';
 import { CookiesDeComponent } from '../assets/i18n/cookies/cookies-de';
 import { ImprintEnComponent } from '../assets/i18n/imprint/imprint-en';
@@ -160,6 +161,7 @@ export function initializeApp(appConfig: AppConfig) {
     ModeratorService,
     CommentSettingsService,
     BonusTokenService,
+    CustomIconService,
     WsConnectorService,
     {
       provide: MatDialogRef,

src/app/components/creator/room-creator-page/room-creator-page.component.html

@@ -37,7 +37,7 @@
             {{ 'room-page.bonus-token' | translate}}
           </button>
           <button mat-menu-item (click)="showTagsDialog()" aria-labelledby= "person">
-            <mat-icon>grade</mat-icon>
+            <mat-icon svgIcon="comment_tag"></mat-icon>
             {{ 'room-page.tags' | translate}}
           </button>
         </mat-menu>

src/app/services/util/custom-icon.service.ts

+import { DomSanitizer } from '@angular/platform-browser';
+import { MatIconRegistry } from '@angular/material/icon';
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class CustomIconService {
+
+  icons = [
+    'beamer',
+    'meeting_room',
+    'comment_tag'
+  ];
+
+  constructor(
+    private matIconRegistry: MatIconRegistry,
+    private domSanitizer: DomSanitizer
+  ) {}
+
+  init() {
+    for (const icon of this.icons) {
+      this.matIconRegistry.addSvgIcon(
+        icon,
+        this.domSanitizer.bypassSecurityTrustResourceUrl('../assets/icons/' + icon + '.svg')
+      );
+    }
+  }
+}

src/assets/icons/comment_tag.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<g>
+	<path d="M447.434,132.449l-16.971-16.971l-21.305,21.305c2.96,14.063-1.009,29.293-11.929,40.214
+		c-17.184,17.183-45.043,17.183-62.226,0c-17.184-17.183-17.184-45.042,0-62.226c10.92-10.92,26.15-14.889,40.213-11.929
+		l21.305-21.305l-16.97-16.971c-11.716-11.716-132.535-11.716-144.25,0L47.918,251.949c-11.716,11.716-11.716,30.711,0,42.427
+		l169.706,169.706c11.715,11.715,30.711,11.715,42.427,0l187.383-187.384C459.149,264.982,459.149,144.164,447.434,132.449z"/>
+	<path d="M361.874,150.126c4.686,4.686,12.284,4.686,16.97,0l90.51-90.51c4.687-4.687,4.687-12.285,0-16.971
+		c-4.686-4.686-12.284-4.686-16.97,0l-90.51,90.51C357.188,137.842,357.188,145.44,361.874,150.126z"/>
+</g>
+</svg>