<app-layout>
  <mat-toolbar class="page-header" role="heading">
    <h1>Icons</h1>
    <button mat-flat-button color="warn">Actions</button>
  </mat-toolbar>

  <mat-card class="icons-wrapper">
    <mat-tab-group>
      <mat-tab label="Material Icons">
        <div class="icons-content">
          <div *ngFor="let iconName of materialIcons" class="icons-content__icon-wrapper">
            <mat-icon>{{toShakeCase(iconName)}}</mat-icon>
            <span class="icons-content__icon-title">{{iconName}}</span>
          </div>
        </div>
      </mat-tab>

      <mat-tab label="Font Awesome">
        <div class="icons-content">
          <div *ngFor="let iconName of fontAwesomeIcons" class="icons-content__icon-wrapper">
            <mat-icon fontSet="fa fa-fs" fontIcon="{{toFontAwesomeText(iconName)}}"></mat-icon>
            <span class="icons-content__icon-title">{{toFontAwesomeText(iconName)}}</span>
          </div>
        </div>
      </mat-tab>
    </mat-tab-group>
  </mat-card>

  <app-footer></app-footer>
</app-layout>
