How to increase the size of the q-timeline icon without breaking alignment?

[thomasemmerich]

Hi everyone,

I'm using Quasar's component and trying to increase the size of the icon inside the timeline dot.

So far, everything works fine visually – the timeline is aligned correctly and looks good. However, when I try to increase the icon size using scoped styles, the icon either:

overflows or misaligns within the dot

or doesn’t resize at all (depending on how I target it)

Here's what I’ve tried in my scoped SCSS block:

::v-deep(.q-timeline__dot .q-icon) { font-size: 36px !important; }

This increases the icon, but causes it to appear off-center or vertically misaligned inside the dot.

What I want:

The icon to be larger (e.g. 36px or 40px)

Still perfectly centered inside the timeline dot

Without breaking the layout or alignment on either side

Any suggestions on how to achieve this the proper way?

Thanks a lot in advance!