Use material icon button for add functionality

static/package-lock.json

@@ -7392,6 +7392,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "material-design-icons": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz",
+      "integrity": "sha1-mnHEh0chjrylHlGmbaaCA4zct78="
+    },
     "md5.js": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.4.tgz",

static/package.json

@@ -36,6 +36,7 @@
     "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/style/select-list.css

@@ -6,3 +6,7 @@
   width: 100%;
   padding-bottom: 20px;
 }
+
+:host/deep/.material-icons {
+  font-size: 32px;
+}

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

@@ -11,7 +11,9 @@
         Ohne Squad
       </mat-button-toggle>
     </mat-button-toggle-group>
-    <a class="pull-right btn btn-success" (click)="openNewUserForm()">+</a>
+    <button mat-icon-button class="pull-right" style="padding-right: 30px;">
+      <mat-icon (click)="openNewUserForm()">add_circle</mat-icon>
+    </button>
   </div>
 
   <div class="input-group list-header">

static/src/app/users/users.module.ts

@@ -4,10 +4,14 @@ import {CommonModule} from '@angular/common';
 import {SharedModule} from '../shared.module';
 import {InfiniteScrollModule} from 'ngx-infinite-scroll';
 import {MatButtonToggleModule} from '@angular/material';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+
 
 @NgModule({
   declarations: usersRoutingComponents,
-  imports: [CommonModule, SharedModule, MatButtonToggleModule, InfiniteScrollModule, usersRouterModule],
+  imports: [CommonModule, SharedModule, MatButtonToggleModule, MatButtonModule, MatIconModule,
+    InfiniteScrollModule, usersRouterModule],
 })
 export class UsersModule {
   static routes = usersRouterModule;

static/src/styles.css

@@ -1,4 +1,5 @@
 @import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";
+@import "../node_modules/material-design-icons/iconfont/material-icons.css";
 
 body {
   padding-top: 50px;
@@ -70,3 +71,8 @@ form {
   border: 2px solid;
   padding: 3px 10px;
 }
+
+/* Icon theme */
+.mat-icon {
+  color: #c5c5c5;
+}