angular primeng p-confirmdialog - how to replace close icon of dialog panel with google material icon

Question

I am working on a requirement where I need to replace the dialog panel's close icon with google material icon.

Find the following screenshot in which I want to replace the close icon with google material icon.

dialog box screenshot

Following code generates dialog with some custom messages.

confirm(data, dt): boolean {
    let confirmation = false;
    let message
    if (data.SelfOwner == true) {
      message = 'Delete this Dashboard?'
    }
    this.confirmationService.confirm({
      message: message,
      header: 'Confirm delete'
)}

example to add google material icon as follows.

<span class="material-icons">
delete
</span>

But the dialog box automatically rendered with it's default css & html component like.

generated code for dialog box

Can someone guide me how to override dialog's close icon with google material icon.

Thanks in advance.

Answer 1

Use the p-dialog-titlebar-close css class to update the close icon element.

Maybe you must do that change in style.scss file.