Vuetify Expansion Panels with icon on the left side of Panel's header

Question

The Vuetify for Vue.js provides a way to add icons to the Expansion Panels (https://vuetifyjs.com/en/components/expansion-panels#custom-icon). However, I'd like to have them on the left side of the header like the screenshot below shows.

The CodePen shows only a way how to add the icons, but on the right side. I've tried the 2 snippets below, but without any success.

<template v-slot:actions>
  <v-icon left>mdi-check</v-icon>
</template>

and

<v-icon left>mdi-check</v-icon>

Both without a desired result.

Answer 1

The accepted answer works, but it breaks icon-rotate. A better approach could be using order:

<template>
    <v-expansion-panel-header>
        <template v-slot:actions>
            <v-icon class="icon">$expand</v-icon>
        </template>
        <span class="header">{{ headerText }}</span>
    </v-expansion-panel-header>
</template>

<style>
    .icon {
        order: 0;
    }

    .header {
        order: 1;
    }
</style>

https://github.com/vuetifyjs/vuetify/issues/9698#issuecomment-628132033

Answer 2

You could achieve the same result by wrapping the header panel title with icon in one div as follows:

 <v-expansion-panel-header class="justify-self-start" disable-icon-rotate>
     <div>
          <v-icon color="error">mdi-alert-circle</v-icon>
             <span>Item</span>
     </div>

</v-expansion-panel-header>

please check this pen

Answer 3

So you don't have to hack with CSS.

  <v-expansion-panel-header hide-actions>
    <template v-slot:default="{ open }">
      <div>
        <v-icon>
          <template v-if="open">mdi-chevron-up</template>
          <template v-else>mdi-chevron-down</template>
        </v-icon>
        Item
      </div>
    </template>
  </v-expansion-panel-header>