<h1 mat-dialog-title class="prevent-select">Seleccionar icono</h1>
<div mat-dialog-content class="prevent-select">
  <div class="form-column">
    @for (category of categories; track $index) {
      <div class="section-divider">{{ category }}</div>
      <div class="form-row">
        @for (icon of icons.get(category); track $index) {
          <div class="form-cell C03 center_horizontal">
            <div [ngClass]="{ selectable_icon: iconSelected != icon.name, selected_icon: iconSelected == icon.name }" 
            (click)="selectIcon(icon.name, category)">
              <mat-icon>{{ icon.name }}</mat-icon>
              <p>{{ icon.name }}</p>
            </div>
          </div>
        }
      </div>
    }
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close cdkFocusInitial>Cerrar</button>
  <button mat-button [mat-dialog-close]="iconSelected">Continuar</button>
</div>