Обновление панелей расширения со значком в левой части заголовка панели

Question

Vuetify для Vue. js позволяет добавлять значки на панели расширения (https://vuetifyjs.com/en/components/expansion-panels#custom -icon ). Однако я хотел бы, чтобы они были слева от заголовка, как показано на скриншоте ниже.

CodePen показывает только способ, как добавить значки, но с правой стороны. Я попробовал 2 фрагмента ниже, но безуспешно.

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

и

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

Оба без желаемого результата.

Answer 1

Вы можете достичь того же результата, заключив заголовок панели заголовка со значком в один делитель следующим образом:

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

, отметьте это ручка