Button with Icon Only does not render well when used with badge

[Joebeurg]

Describe the bug

When using the Button component while only specifying an icon and a badge, it does not render well, this is cause by a class that gets appended to the button .p-button-icon-only which has a fixed width width: 2.5rem;.

.p-button.p-button-icon-only {
    width: 2.5rem;
    padding: 0.5rem 0;
}

When a label is provided the badge inside the button is rendered correctly.

This is the button with the issue:

<p-button (click)="sidebarVisible = true" icon="pi pi-align-justify" severity="secondary"
              badge="150" badgeClass="p-badge-warning"/>

This is the button with label:

<p-button label="Menu" (click)="sidebarVisible = true" icon="pi pi-align-justify" severity="secondary"
              badge="150" badgeClass="p-badge-warning"/>

Environment

OS: Windows 11

Reproducer

No response

Angular version

18.0.1

PrimeNG version

17.18.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.14.0

Browser(s)

Microsoft Edge; Version 125.0.2535.92 (Official build) (64-bit)

Steps to reproduce the behavior

No response

Expected behavior

No response

[mjlux]

As correctly mentioned the .p-button-icon-only class interferes with the badge attribute of the p-button component. You can circumvent this issue by using a different setup of your p-button implementation

<p-button severity="secondary">
  <i class="pi pi-align-justify"></i>
  <p-badge value="150" />
</p-button>

Hope this helps