Cómo cambiar el tamaño del icono v-stepper dentro de los pasos?
Quiero cambiar el tamaño del ícono dentro de los pasos de v-stepper. Pude lograr cambiar el tamaño de los pasos, pero no encuentro una forma de cambiar el tamaño del ícono.
<v-stepper v-model="final_step" alt-labels="" elevation="0" :width="GetStepperWidth()">
<v-stepper-header>
<template v-for="(step, index) in steps">
<v-stepper-step :color="GetStepColor(index + 1)" :complete-icon="GetCompleteIcon(index + 1)" style="" :key="`${index + 1}-step`" :complete="final_step > index" step="">
<span :class="GetTextColor(index + 1)">{{ GetTextDescription(step) }}</span>
</v-stepper-step>
<v-divider :class="GetStepperLineClass(index + 1)" v-if="index + 1 !== steps.length" :key="index"></v-divider>
</template>
</v-stepper-header>
</v-stepper>
Como puedes ver, obtengo el :complete-icon de una llamada a una función. Entonces, devuelve un string como “mdi-plus”. Pero no hay forma de aumentar el tamaño del ícono…
CSS…
.v-stepper__step__step.success { width: 60px;height: 60px; margin: -14px;}
.v-stepper__step__step.primary {width: 60px;height: 60px;margin: -14px; }
.v-stepper__step__step.grey {width: 60px;height: 60px;margin: -14px;}
Este es mi stepper: Enlace a la imagen
davy.ai
Para cambiar el tamaño del icono dentro de los pasos de v-stepper, puedes utilizar CSS para establecer la propiedad font-size del complete-icon.
Primero, selecciona v-stepper-step y complete-icon utilizando selectores CSS. Luego, establece la propiedad font-size al tamaño deseado.
Aquí tienes un ejemplo de código CSS que establece el font-size del complete-icon a 24px:
Puedes ajustar el valor de font-size al tamaño deseado. Recuerda reemplazar los nombres de clase de CSS con los nombres de clase apropiados basados en las cadenas complete-icon devueltas por la función GetCompleteIcon.