'how to remove icons in v-expansion-panels (vuetify)

I want to remove icon in the v-expansion-panels. and here is my codes in Vuejs

<v-card-text style="height: 300px;"> 
    <v-card class="mx-auto mt-5" max-width="500" flat>
      <v-row justify="center">
         <v-expansion-panels popout>
           <v-expansion-panel
              v-for="(item,i) in 9"
                :key="i"
                >
               <v-expansion-panel-header>Item</v-expansion-panel-header>
               </v-expansion-panel>
             </v-expansion-panels>
          </v-row>
      </v-card>
  </v-card-text>

I tried these to remove icon..

.theme--light.v-expansion-panels .v-expansion-panel-header .v-expansion-panel-header__icon .v-icon {
        color: white !important;
    }
    .mdi-chevron-down::before {
        display: none !important;
    }
    .v-expansion-panel-header__icon {
        display: none !important;
    }
    .v-icon notranslate mdi mdi-chevron-down theme--light {
        display: none !important;
    }

but none of them works. how can I remove the icon? please help me..

Solution 1:^[1]

Set the expand-icon prop of v-expansion-panel-header to an empty string

<v-expansion-panel-header expand-icon="">Item</v-expansion-panel-header>

Demo

Solution 2:^[2]

Just add hide-actions to the panel-header

https://vuetifyjs.com/en/api/v-expansion-panel-header/#props

Solution 3:^[3]

Just add the props: disable-icon-rotate

<v-expansion-panel-header disable-icon-rotate>Item</v-expansion-panel-header>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Zim
Solution 2	Henry Ecker
Solution 3	Stephen Ostermiller

'how to remove icons in v-expansion-panels (vuetify)

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]