ConfirmDialog: icon has wrong size

[Timmeeeey]

Describe the bug

The icon in the confirmation dialog has the wrong size when the InputGroupAddonModule is used.

Environment

NA

Reproducer

https://stackblitz.com/edit/github-n6fwtktk-1dgsramq

Angular version

18.2.x

PrimeNG version

18.0.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.14.0

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[imaksp]

Hello team, I tried to find reason for this:
when inputgroup is present it uses following default icon size instead of using custom size defined in .p-confirmdialog-icon class:

.pi {
    font-size: var(--p-icon-size);
}

Also I have noticed some components uses both class & ngClass, also both @if & *ngIf, this is from confirmDialog icon code:

@if (iconTemplate || _iconTemplate) {
    <ng-template *ngTemplateOutlet="iconTemplate || _iconTemplate"></ng-template>
} @else if (!iconTemplate && !_iconTemplate && !_messageTemplate && !messageTemplate) {
    <i [ngClass]="cx('icon')" [class]="option('icon')" *ngIf="option('icon')"></i>
}

Also ngClass & ngSyle might get deprecated soon with this PR: angular/angular#58860

I think such usage should be removed by refactoring code in v20.

[aimanicose]

Hello,

Facing same issue and made the same remark as @imaksp. The issue is not noticeable in the documentation page as the order of the styles is probably different.
Moving the confirmdialog-style bellow inputicon-style manually seems to remove the .pi class override but I can't do it programmatically.

[imaksp]

Hi all, as a workaround you can add this to your style.css file, it should fix priority issue:

.p-confirmdialog-icon {
  font-size: var(--p-confirmdialog-icon-size);
}

[sale1234]

I’m experiencing the same issue. Notably, a hard refresh temporarily resolves it.