refactor(theme): use relative units for icon badge sizing

[dr-itz]

---

Documentation.
Examples.
Dashboards Demo.
Playwright report.

Coverage Reports:

• charts-ng
• dashboards-ng
• element-ng
• element-translate-ng
• maps-ng
• native-charts-ng

[gemini-code-assist]

Code Review

This pull request updates badge styles by converting pixel-based dimensions and offsets to rem units and changing a border-radius to a percentage. The feedback recommends using the typography.px-to-rem() utility function instead of hardcoded rem values to improve maintainability and ensure consistency with the project's styling patterns.

[spliffone]

Can we fix the navbar and tabs before we merge this PR? Since it difficult to test the behaviour when we increase the font size

[dr-itz]

Can we fix the navbar and tabs before we merge this PR? Since it difficult to test the behaviour when we increase the font size

can you be more specific? We already have normal badges that are based on font-size. This is a small independent fix. There's no point in addressing anything else before this

[spliffone]

Can we fix the navbar and tabs before we merge this PR? Since it difficult to test the behaviour when we increase the font size

can you be more specific? We already have normal badges that are based on font-size. This is a small independent fix. There's no point in addressing anything else before this

Yes, the si-navbar-vertical-badges or si-tabs example look incorrect:

Maybe fix first those components to judge the correct behaviour of the badges.

[dr-itz]

@spliffone this one is ready. vertical nav didn't even use the badge-text CSS, which it does now. vertical alignment for navbar, tabs, etc. is fixed. Positioning in those needs addressing when fixing those components

[spliffone]

Incredible work, thank you for fixing the positioning too