Use Symfony UX Icons

[javiereguiluz]

Let's start using more UX packages in this project. I propose to use Tabler icons because we use them in all Symfony websites, in the Symfony Profiler and Toolbar, etc.

I'm pinging @smnandre and @Kocal because I have a question. I had to apply these attributes by default:

ux_icons:
    default_icon_attributes:
        width: 1.2em
        height: 1.2em
        style: 'position: relative; top: -2px;'

If I don't, the icons look very small and not aligned vertically:

• The alignment is ideally solved by using flex in buttons and other elements that display icons + text. Since I'd like to add Twig Components here, I prefer to not change HTML/CSS much and instead, apply these attributes as a trade-off until we solve this in a better way.
• About the small icon size, I don't know why they look so small with the default 1em. Any help is appreciated.

Thanks!

[Kocal]

Hi Javier, em is a relative unit that scales on ancestors font-size.

When you render an icon inside a .btn.btm-sm which has a font-size: 0.875rem, the icon will be rendered smaller (visually 14px x 14px) instead of 16px x 16px if the parent's font-size was 1rem:

Enregistrement.de.l.ecran.2024-10-01.a.08.09.45.mov

And here where the icon is inside a .btn.btn-lg, you can see it's visually rendered as 20px x 20px:

Enregistrement.de.l.ecran.2024-10-01.a.08.14.39.mov

[javiereguiluz]

@Kocal yes, you are right. But even with the 1em width/height of the icons, to me they look visibly smaller than the text that goes along them. I'll keep the 1.2em default attribute then. Thanks!

[Kocal]

It may also be related to the fact that previous icons (via FontAwesome) were rendered using a font, whereas now a <svg> element is used. 🤔

[smnandre]

Not sure i'd recommand using "position relative, margin-top: -2px" on the long term, but nothing dramatic either.. poke me next week if you want me to look at it @javiereguiluz :)