Search code examples
vuejs3vuetifyjs3

Change color of expand-icon in v-expansion-panel

Here is a v-exapansion-panel of Vueitfy.3:

> <VExpansionPanels class="py-6 px-16">
>             <VExpansionPanel
> expand-icon="material-symbols:arrow-circle-down-outline-rounded"
> collapse-icon="material-symbols:arrow-circle-up-outline-rounded"
> v-for="faq in faqs"
>                 :key="faq.question"
>                 :title="faq.question"
>                 :text="faq.answer"
> class="expansion-panel mb-2"
>             />
>           </VExpansionPanels>

I want the color of exapnd icons when hovering occurs, should have a new one. how can do this?

Solution

  • Some simple CSS should do it. Select the expansion panel component then deep select the icon and apply color if hovering:

    .v-expansion-panel >>> .v-expansion-panel-title__icon:hover {
  color: red;
}

    sandbox example