Change color of Calendar icon

[Pau2000]

I've been trying to change the color of the icon background on the calendar component. It's on blue by dafault and I would like it to be gray.

<Calendar id="icon" placeholder="Check-out" v-model="checkOutDate" :showIcon="true" style="width: 10rem;"/>

Any idea how can I do this?

[bahadirsofuoglu]

Hi, You can check this document. Local styling should solve your problem. https://www.primefaces.org/primevue/theming

[Spyabo]

I managed to do it by adding a style scoped on to my component to target the icon

Code: Select all

<style scoped>
:deep(.p-icon) {
    color: #3a82f6;
}
</style>

[bahadirsofuoglu]

I managed to do it by adding a style scoped on to my component to target the icon

Code: Select all

<style scoped>
:deep(.p-icon) {
    color: #3a82f6;
}
</style>

This is also a preferred solution. However, we can now customize all components using pt (pass-through). I'm sharing an example for the calendar icon below.

https://stackblitz.com/edit/kskffi?file=src%2FApp.vue