How to move the v-icon before the text "State" in v-expansion-panel-header?

[Vyas-Anand]

I'm using Vuetify's <v-expansion-panel-header>, and by default, the v-icon is placed on the right. However, I want to position the v-icon (menu up) before the text "State". Here's my current code:

<v-expansion-panel-header>
  <template v-slot:actions>
    <v-icon>mdi-menu-up</v-icon>
  </template>
  <div style="display: flex; align-items: center; justify-content: space-between; width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.5);">
    <div style="display: flex; align-items: center;">
      <span style="color: gray; margin-left: 8px;">State</span>
      <span style="font-weight: bold;">(0)</span>
    </div>
  </div>
</v-expansion-panel-header>