[Feature Request] V-expansion-panels icon position

[beerwin]

Problem to solve

We have some designs where the icon is on the left side of the expansion header title.

Proposed solution

An option to place the icon on the left side, just before the header text.

[KaelWD]

You can do this with CSS order or v-expansion-panel-header's default slot.

[roblugt]

Shame this has been closed; we need this functionality too and the closure comment does not really give sufficient signposting to a workable solution.

[johngoben-righteye]

I agree that the closure comment did not have significant sign posting for a workable solution. I did manage to figure out a solution using order as a clue.

<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>

[ogmo0n]

How about if I need the default chevron icon on the right and a custom icon on the left of the header?

[ogmo0n]

Never mind - I nested my icon within the v-expansion-panel-header and achieved what I was going for

[arsh13]

I agree that the closure comment did not have significant sign posting for a workable solution. I did manage to figure out a solution using order as a clue.

<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>

I was stuck at the same thing today. There's no documentation about how to shift icons to the left too.
Thanks @johngoben-righteye, your solution saved a lot of my efforts.

[surajsharmadev]

.v-expansion-panel-header {
display: flex;
flex-direction: row;
justify-content: space-between;
}

[RoboVij]

A workaround: https://stackoverflow.com/a/72444901

[beerwin]

Having to resort to CSS hacks kinda defeats the purpose of using a styled component. At the other end @RoboVij's solution works well (abusing the default slot). I think that workaround could be added to the documentation.