use svg mat icon and drop icon dependency

api/package-lock.json

@@ -3687,7 +3687,8 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
@@ -3698,7 +3699,8 @@
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3815,7 +3817,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3827,6 +3830,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "1.0.1"
           }
@@ -3849,12 +3853,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -3873,6 +3879,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3953,7 +3960,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -3965,6 +3973,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4086,6 +4095,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",

static/package.json

@@ -36,7 +36,6 @@
     "jquery": "^3.1.0",
     "jquery-ui": "^1.12.0",
     "jquery-ui-bundle": "^1.11.4",
-    "material-design-icons": "^3.0.1",
     "ngx-clipboard": "^11.1.1",
     "ngx-cookie-service": "^1.0.9",
     "ngx-infinite-scroll": "^0.5.2",

static/src/app/app.component.ts

@@ -5,6 +5,8 @@ import {PromotionService} from './services/army-management/promotion.service';
 import {AwardingService} from './services/army-management/awarding.service';
 import {RouteConfig} from './app.config';
 import {DOCUMENT} from '@angular/common';
+import {DomSanitizer} from "@angular/platform-browser";
+import {MatIconRegistry} from "@angular/material";
 
 declare function require(url: string);
 
@@ -29,7 +31,14 @@ export class AppComponent implements OnInit {
               private promotionService: PromotionService,
               private awardingService: AwardingService,
               private router: Router,
+              private iconRegistry: MatIconRegistry,
+              private sanitizer: DomSanitizer,
               @Inject(DOCUMENT) private document) {
+    this.iconRegistry.addSvgIcon('add',
+      sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/twotone-add_circle-24px.svg'));
+    this.iconRegistry.addSvgIcon('add-user',
+      sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/twotone-person_add-24px.svg'));
+
     router.events.subscribe(event => {
       if (event instanceof NavigationStart) {
         this.loading = true;

static/src/app/app.module.ts

@@ -24,10 +24,11 @@ import {UserStore} from './services/stores/user.store';
 import {CookieService} from 'ngx-cookie-service';
 import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service';
 import {MaterialComponentsModule} from './material-components.module';
+import {HttpClientModule} from "@angular/common/http";
 
 @NgModule({
-  imports: [SharedModule, BrowserModule, BrowserAnimationsModule, appRouting, HttpModule, ClipboardModule,
+  imports: [SharedModule, BrowserModule, BrowserAnimationsModule, appRouting, HttpModule, HttpClientModule,
-    MaterialComponentsModule],
+    ClipboardModule, MaterialComponentsModule],
   providers: [
     HttpClient,
     LoginService,

static/src/app/style/select-list.css

@@ -7,6 +7,7 @@
   padding-bottom: 20px;
 }
 
-:host/deep/.material-icons {
+:host/deep/.mat-icon {
-  font-size: 32px;
+  height: 42px;
+  width: 42px;
 }

static/src/app/users/user-list/user-list.component.html

@@ -11,8 +11,8 @@
         Ohne Squad
       </mat-button-toggle>
     </mat-button-toggle-group>
-    <button mat-icon-button class="pull-right" style="padding-right: 30px;">
+    <button mat-icon-button class="pull-right" style="margin-right: 16px;">
-      <mat-icon (click)="openNewUserForm()">add_circle</mat-icon>
+      <mat-icon svgIcon="add-user" (click)="openNewUserForm()"></mat-icon>
     </button>
   </div>
 

static/src/assets/icon/twotone-add_circle-24px.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g id="Bounding_Boxes">
+	<g id="ui_x5F_spec_x5F_header_copy_3" display="none">
+	</g>
+	<path fill="none" d="M0,0h24v24H0V0z"/>
+</g>
+<g id="Duotone">
+	<g id="ui_x5F_spec_x5F_header_copy_2" display="none">
+	</g>
+	<g>
+		<path opacity="0.3" d="M12,4c-4.41,0-8,3.59-8,8c0,4.41,3.59,8,8,8s8-3.59,8-8C20,7.59,16.41,4,12,4z M17,13h-4v4h-2v-4H7v-2h4V7
+			h2v4h4V13z"/>
+		<polygon points="13,7 11,7 11,11 7,11 7,13 11,13 11,17 13,17 13,13 17,13 17,11 13,11 		"/>
+		<path d="M12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10s10-4.48,10-10C22,6.48,17.52,2,12,2z M12,20c-4.41,0-8-3.59-8-8
+			c0-4.41,3.59-8,8-8s8,3.59,8,8C20,16.41,16.41,20,12,20z"/>
+	</g>
+</g>
+</svg>

static/src/assets/icon/twotone-person_add-24px.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g id="Bounding_Boxes">
+	<g id="ui_x5F_spec_x5F_header_copy_2">
+	</g>
+	<path fill="none" d="M0,0h24v24H0V0z"/>
+</g>
+<g id="Duotone">
+	<g id="ui_x5F_spec_x5F_header_copy">
+	</g>
+	<g>
+		<path opacity="0.3" d="M15,16c-2.69,0-5.77,1.28-6,2h12C20.8,17.29,17.7,16,15,16z"/>
+		<circle opacity="0.3" cx="15" cy="8" r="2"/>
+		<path d="M15,12c2.21,0,4-1.79,4-4c0-2.21-1.79-4-4-4s-4,1.79-4,4C11,10.21,12.79,12,15,12z M15,6c1.1,0,2,0.9,2,2s-0.9,2-2,2
+			s-2-0.9-2-2S13.9,6,15,6z"/>
+		<path d="M15,14c-2.67,0-8,1.34-8,4v2h16v-2C23,15.34,17.67,14,15,14z M9,18c0.22-0.72,3.31-2,6-2c2.7,0,5.8,1.29,6,2H9z"/>
+		<polygon points="6,15 6,12 9,12 9,10 6,10 6,7 4,7 4,10 1,10 1,12 4,12 4,15 		"/>
+	</g>
+</g>
+</svg>

static/src/styles.css

@@ -1,5 +1,4 @@
 @import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";
-@import "../node_modules/material-design-icons/iconfont/material-icons.css";
 
 body {
   padding-top: 50px;