button icons

src/app/modules/user/info/info.component.html

@@ -13,7 +13,7 @@
   </mat-form-field>
 
   <app-button-row>
-    <button mat-button routerLink="../logout">Abmelden</button>
+    <app-button [icon]="faSignOut" routerLink="../logout">Abmelden</app-button>
   </app-button-row>
 </app-card>
 

src/app/modules/user/info/info.component.ts

@@ -3,6 +3,7 @@ import {UserService} from '../../../services/user/user.service';
 import {Observable} from 'rxjs';
 import {User} from '../../../services/user/user';
 import {ChordMode} from '../../../widget-modules/components/song-text/song-text.component';
+import {faSignOutAlt} from '@fortawesome/free-solid-svg-icons/faSignOutAlt';
 
 @Component({
   selector: 'app-info',
@@ -11,6 +12,7 @@ import {ChordMode} from '../../../widget-modules/components/song-text/song-text.
 })
 export class InfoComponent implements OnInit {
   public user$: Observable<User>;
+  public faSignOut = faSignOutAlt;
 
   constructor(private userService: UserService) {
   }

src/app/modules/user/info/role.pipe.ts

@@ -1,5 +1,4 @@
 import {Pipe, PipeTransform} from '@angular/core';
-import {roles} from '../../../services/user/roles';
 
 
 @Pipe({
@@ -7,7 +6,7 @@ import {roles} from '../../../services/user/roles';
 })
 export class RolePipe implements PipeTransform {
 
-  transform(role: roles): string {
+  transform(role: string): string {
     switch (role) {
       case 'contributor':
         return 'Mitarbeiter';

src/app/modules/user/login/login.component.html

@@ -10,9 +10,9 @@
       <input (keyup.enter)="onLogin()" formControlName="pass" matInput type="password">
     </mat-form-field>
     <app-button-row>
-      <button (click)="onLogin()" mat-button>Anmelden</button>
-      <button mat-button routerLink="/user/password">Passwort zurücksetzen</button>
-      <button mat-button routerLink="/user/new">neuen Benutzer anlegen</button>
+      <app-button (click)="onLogin()" [icon]="faSignIn">Anmelden</app-button>
+      <app-button [icon]="faNewPassword" routerLink="/user/password">Passwort zurücksetzen</app-button>
+      <app-button [icon]="faNewUser" routerLink="/user/new">neuen Benutzer anlegen</app-button>
       <p *ngIf="errorMessage" class="error">{{errorMessage|authMessage}}</p>
     </app-button-row>
 

src/app/modules/user/login/login.component.ts

@@ -2,6 +2,9 @@ import {Component, OnInit} from '@angular/core';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {Router} from '@angular/router';
 import {UserService} from '../../../services/user/user.service';
+import {faSignInAlt} from '@fortawesome/free-solid-svg-icons/faSignInAlt';
+import {faWindowRestore} from '@fortawesome/free-solid-svg-icons/faWindowRestore';
+import {faUserPlus} from '@fortawesome/free-solid-svg-icons/faUserPlus';
 
 @Component({
   selector: 'app-login',
@@ -11,6 +14,9 @@ import {UserService} from '../../../services/user/user.service';
 export class LoginComponent implements OnInit {
   public form: FormGroup;
   public errorMessage: string;
+  public faSignIn = faSignInAlt;
+  public faNewPassword = faWindowRestore;
+  public faNewUser = faUserPlus;
 
   constructor(private userService: UserService, private router: Router) {
   }

src/app/modules/user/new/new.component.html

@@ -13,6 +13,6 @@
   </mat-form-field>
 
   <app-button-row>
-    <button (click)="onCreate()" mat-button>Benutzer anlegen</button>
+    <app-button (click)="onCreate()" [icon]="faNewUser">Benutzer anlegen</app-button>
   </app-button-row>
 </app-card>

src/app/modules/user/new/new.component.ts

@@ -1,6 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
 import {UserService} from '../../../services/user/user.service';
+import {faUserPlus} from '@fortawesome/free-solid-svg-icons/faUserPlus';
 
 @Component({
   selector: 'app-new',
@@ -9,6 +10,7 @@ import {UserService} from '../../../services/user/user.service';
 })
 export class NewComponent implements OnInit {
   public form: FormGroup;
+  public faNewUser = faUserPlus;
 
   constructor(private fb: FormBuilder, private userService: UserService) {
   }

src/app/modules/user/password/password.component.html

@@ -6,7 +6,7 @@
     </mat-form-field>
 
     <app-button-row>
-      <button (click)="onResetPassword()" mat-button>neues Passwort anfordern</button>
+      <app-button (click)="onResetPassword()" [icon]="faNewPassword">neues Passwort anfordern</app-button>
       <p *ngIf="errorMessage" class="error">{{errorMessage|authMessage}}</p>
     </app-button-row>
 

src/app/modules/user/password/password.component.ts

@@ -2,6 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {Router} from '@angular/router';
 import {UserService} from '../../../services/user/user.service';
+import {faWindowRestore} from '@fortawesome/free-solid-svg-icons/faWindowRestore';
 
 @Component({
   selector: 'app-password',
@@ -11,6 +12,7 @@ import {UserService} from '../../../services/user/user.service';
 export class PasswordComponent implements OnInit {
   public form: FormGroup;
   public errorMessage: string;
+  public faNewPassword = faWindowRestore;
 
   constructor(public userService: UserService, private router: Router) {
   }

src/app/modules/user/user.module.ts

@@ -19,6 +19,7 @@ import {UsersComponent} from './info/users/users.component';
 import {RoleModule} from '../../services/user/role.module';
 import {UserComponent} from './info/users/user/user.component';
 import {NewComponent} from './new/new.component';
+import {ButtonModule} from '../../widget-modules/components/button/button.module';
 
 
 @NgModule({
@@ -35,6 +36,7 @@ import {NewComponent} from './new/new.component';
     MatSelectModule,
     FormsModule,
     RoleModule,
+    ButtonModule,
 
 
   ]