---------------------- Yes, you can change the color of the icon in a UPageCard component by customizing the UI slots. Based on the documentation, the icon in UPageCard is rendered in the `leadingIcon` slot, which by default has the class `text-(--ui-primary)` that applies the primary color to the icon. There are a few ways to customize the icon color: ### 1. Using the `ui` prop You can override the default styles by using the `ui` prop to target the `leadingIcon` slot: ```vue ``` ### 2. Using the `highlight-color` prop If you're using the `highlight` feature, you can use the `highlight-color` prop which will affect the icon color since it uses the primary color variable: ```vue ``` ### 3. Using a custom class You can also apply a custom class to the entire component and use CSS to target the icon: ```vue ``` The documentation shows that the PageCard component's theme configuration includes the `leadingIcon` slot with the default styling of `size-5 shrink-0 text-(--ui-primary)`, which you can override using any of the methods above.

Change icon color of UPageCard

Similar Threads

Similar Threads

Similar Threads