mat-icon doesn't show icon in dialog after closing and re-opening the dialog

Question

I have created a dynamic dialog component, which I can pass action buttons to, which then get displayed in the dialog header. By default, the dialog contains a close action button, and I'm passing an edit action to the dialog header. This edit action contains two buttons:

one select button that changes the dialog content to an edit form if it had not been selected and that cancels the editing if it had been selected prior.
a save button that only displays if the select button had been selected.

Both of these buttons are mat-icon-buttons using a mat-icon. This works fine when I open the dialog for the first time, however the icons do not get displayed if I close and re-open the dialog. The close button icon is displayed but neither of the edit action buttons are.

This is where I open the dialog:

<div id="btn-add">
    <button mat-mini-fab
            (click)="add()">
        <mat-icon>add</mat-icon>
    </button>
</div>
<wb-dialog [title]="selectedArea?.title"
           [active]="!!selectedArea"
           (onClose)="close()">
    <div actions>
        <wb-tab-button [tab]="dialogStatusEnum.EDIT"
                       [form]="areaForm"
                       icon="edit"
                       [active]="this.dialogStatus === dialogStatusEnum.EDIT"
                       (onSelect)="this.tab($event)"
                       (onSubmit)="saveArea()"></wb-tab-button>
    </div>
</wb-dialog>

And its typescript code:

export class AreaComponent {
    public readonly dialogStatusEnum: typeof DialogStatus = DialogStatus;

    public selectedArea: Area | undefined;
    public areaForm: FormGroup;

    constructor(formBuilder: FormBuilder) {
        this.areaForm = formBuilder.group({});
    }
    
    public add(): void {
        this.selectedArea = new Area();
        this.isDialogLoading = false;
    }

    public close(): void {
        this.selectedArea = undefined;
    }

    public tab(tab: DialogStatus | undefined) {
        this.dialogStatus = tab || this.dialogStatusEnum.EDIT;
    }

    public saveArea() {
        // TODO!
    }
}

This is the dialog:

<div class="mat-dialog-wrapper"
     [ngClass]="{'mat-hidden': !active}">
    <mat-card *ngIf="active">
        <mat-card-header>
            <mat-card-title *ngIf="title"
                            [ngClass]="{'mat-placeholder': !!title}">{{title || 'no title'}}</mat-card-title>
            <ng-content select="[actions]"></ng-content>
            <button mat-icon-button
                    (click)="close()"
                    class="mat-card-header-action"><mat-icon>close</mat-icon></button>
        </mat-card-header>
        <ng-content select="[content]"></ng-content>
    </mat-card>
</div>

And the component code:

export class DialogComponent {
    @Input() title: string | undefined;
    @Input() active: boolean;
    @Output() onClose: EventEmitter<void>;

    constructor() {
        this.active = false;
        this.onClose = new EventEmitter<void>();
    }

    public close(): void {
        this.onClose.emit();
    }
}

And here's the button:

<button *ngIf="active"
        mat-icon-button
        (click)="submit()"
        [disabled]="form.invalid"><mat-icon>save</mat-icon></button>
<button mat-icon-button
        (click)="select()"
        [ngClass]="{'mat-active': active}">
    <mat-icon *ngIf="active">block</mat-icon>
    <mat-icon *ngIf="!active">{{icon}}</mat-icon>
</button>

And its component:

export class TabButtonComponent {
    @Input() tab!: DialogStatus;
    @Input() form!: FormGroup;
    @Input() icon: string;
    @Input() active!: boolean;
    @Output() onSelect: EventEmitter<DialogStatus | undefined>;
    @Output() onSubmit: EventEmitter<void>;

    constructor() {
        this.onSelect = new EventEmitter<DialogStatus | undefined>();
        this.onSubmit = new EventEmitter<void>();
    }

    public select(): void {
        this.onSelect.emit(this.active ? undefined : this.tab);
    }

    public submit(): void {
        this.onSubmit.emit();
    }
}

The only similar thing I found is this question message-wont-display-a-second-time-after-being-closed. However, all my bindings work, the click event handlers, the dynamic mat-active CSS class, all of the elements exist in my DOM, the buttons as well as the icons and I couldn't find any difference in the CSS when I compare the first with a subsequent dialog call. The only issue I have is that the icons are not being displayed and I can't figure out why that is or how to fix it.

If I place the tab button directly in the dialog instead of inserting it from the parent this issue does not occur.

mat-icon doesn't show icon in dialog after closing and re-opening the dialog

0 Answers0