fix(#17309): set width and height for xl icon only avatars

[Bogatejc]

This pull request fixes #17309, which reports a bug where xlarge icon avatars are not centered within the component.

Root Cause

The .p-avatar-xl .p-avatar-icon class is missing the width and height properties, unlike the styles for large icon avatars.

Fix

This PR implements the following solution:

.p-avatar-xl .p-avatar-icon {
    font-size: ${dt('avatar.xl.font.size')};
    width: ${dt('avatar.lx.icon.size')};
    height: ${dt('avatar.lx.icon.size')};
}

Alternative Solution

An alternative approach would be adding display: contents to .p-avatar-icon. This would eliminate the need to define width and height for each size group. However, the implemented solution was chosen for its consistency with the existing styling patterns.

Closes #17309.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Skipped Deployments

Name	Status	Preview	Updated (UTC)
primeng	⬜️ Ignored (Inspect)	Visit Preview	Jan 10, 2025 0:01am
primeng-v18	⬜️ Ignored (Inspect)	Visit Preview	Jan 10, 2025 0:01am

[vercel]

Someone is attempting to deploy a commit to the primetek Team on Vercel.

A member of the Team first needs to authorize it.