button icons

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

@@ -1,5 +1,5 @@
 <div>
-  <app-card>
+  <app-card closeLink="../">
     <h1>Neue Veranstaltung</h1>
 
     <div [formGroup]="form" class="split">
@@ -23,8 +23,7 @@
     </div>
 
     <app-button-row>
-      <button (click)="onSave()" color="primary" mat-flat-button>Anlegen</button>
-      <button mat-button routerLink="/show">Abbrechen</button>
+      <app-button (click)="onSave()" [icon]="faSave">Anlegen</app-button>
     </app-button-row>
   </app-card>
 </div>

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

@@ -5,6 +5,7 @@ import {Show} from '../services/show';
 import {ShowService} from '../services/show.service';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {Router} from '@angular/router';
+import {faSave} from '@fortawesome/free-solid-svg-icons/faSave';
 
 @Component({
   selector: 'app-new',
@@ -16,6 +17,7 @@ export class NewComponent implements OnInit {
   public showTypePublic = ShowService.SHOW_TYPE_PUBLIC;
   public showTypePrivate = ShowService.SHOW_TYPE_PRIVATE;
   public form: FormGroup;
+  public faSave = faSave;
 
   constructor(private showService: ShowService, showDataService: ShowDataService, private router: Router) {
     this.shows$ = showDataService.list$();

src/app/modules/shows/show/show.component.html

@@ -22,12 +22,13 @@
                   [songs]="songs"></app-add-song>
 
     <app-button-row>
-      <button (click)="onArchive(true)" *ngIf="!show.archived" mat-button>Archivieren</button>
-      <button (click)="onArchive(false)" *ngIf="show.archived" mat-button>Wiederherstellen</button>
-      <button (click)="onPublish(true)" *ngIf="!show.published" mat-button>Veröffentlichen</button>
-      <button (click)="onPublish(false)" *ngIf="show.published" mat-button>Veröffentlichung zurückziehen</button>
+      <app-button (click)="onArchive(true)" *ngIf="!show.archived" [icon]="faBox">Archivieren</app-button>
+      <app-button (click)="onArchive(false)" *ngIf="show.archived" [icon]="faBoxOpen">Wiederherstellen</app-button>
+      <app-button (click)="onPublish(true)" *ngIf="!show.published" [icon]="faPublish">Veröffentlichen</app-button>
+      <app-button (click)="onPublish(false)" *ngIf="show.published" [icon]="faUnpublish">Veröffentlichung zurückziehen
+      </app-button>
 
-      <button (click)="onDownload()" mat-button>Herunterladen</button>
+      <app-button (click)="onDownload()" [icon]="faDownload">Herunterladen</app-button>
 
     </app-button-row>
   </app-card>

src/app/modules/shows/show/show.component.ts

@@ -9,6 +9,11 @@ import {Song} from '../../songs/services/song';
 import {ShowSongService} from '../services/show-song.service';
 import {ShowSong} from '../services/show-song';
 import {DocxService} from '../services/docx.service';
+import {faBox} from '@fortawesome/free-solid-svg-icons/faBox';
+import {faBoxOpen} from '@fortawesome/free-solid-svg-icons/faBoxOpen';
+import {faExternalLinkAlt} from '@fortawesome/free-solid-svg-icons/faExternalLinkAlt';
+import {faLock} from '@fortawesome/free-solid-svg-icons/faLock';
+import {faFileDownload} from '@fortawesome/free-solid-svg-icons/faFileDownload';
 
 @Component({
   selector: 'app-show',
@@ -22,6 +27,12 @@ export class ShowComponent implements OnInit {
   public showId: string;
   public showText: boolean;
 
+  public faBox = faBox;
+  public faBoxOpen = faBoxOpen;
+  public faPublish = faExternalLinkAlt;
+  public faUnpublish = faLock;
+  public faDownload = faFileDownload;
+
   constructor(
     private activatedRoute: ActivatedRoute,
     private showService: ShowService,

src/app/modules/shows/shows.module.ts

@@ -24,6 +24,7 @@ import {MenuButtonModule} from '../../widget-modules/components/menu-button/menu
 import {SongTextModule} from '../../widget-modules/components/song-text/song-text.module';
 import {NgxMatSelectSearchModule} from 'ngx-mat-select-search';
 import {AddSongModule} from '../../widget-modules/components/add-song/add-song.module';
+import {ButtonModule} from '../../widget-modules/components/button/button.module';
 
 
 @NgModule({
@@ -49,6 +50,7 @@ import {AddSongModule} from '../../widget-modules/components/add-song/add-song.m
     SongTextModule,
     NgxMatSelectSearchModule,
     AddSongModule,
+    ButtonModule,
   ]
 })
 export class ShowsModule {