Vuetify Expansion Panels with icon on the left side of Panel's header
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
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