How to add size classes for dashboard sidebar collapse icons

[awais019]

Previously it had leadingIcon class in ui but now although it works but typescript gives error as in latest versions DashboardSidebarCollapse has only base inside ui prop

[darekwojciechowski]

The ui prop on DashboardSidebarCollapse is typed as { base?: any } because the component is a thin wrapper. Its own theme only has base plus a side variant, and everything else gets forwarded to UButton with v-bind. That's why leadingIcon still works at runtime, it just isn't in the type anymore.

Two type-safe ways to do it.

If you're fine with the whole button scaling, use size. It's forwarded to the button, and the button theme bumps the icon along with it (size-4 at sm, size-5 at lg, size-6 at xl):

<UDashboardSidebarCollapse size="xl" />

If you only want the icon bigger, target it from class or ui.base. The collapse button has no label, so the icon is its only child:

<UDashboardSidebarCollapse class="[&>*]:size-5" />

I'd stay away from [&_svg]:size-5 here. Nuxt Icon renders a <span> in CSS mode and an <svg> in SVG mode, so the plain child selector survives both.

[awais019]

Thank you very much. This helps a lot