Quiero cambiar el tamaño del ícono dentro de los pasos de v-stepper. Me las arreglé para cambiar los tamaños de los pasos. Pero no puedo encontrar una manera de cambiar el tamaño del icono.
<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 puede ver, obtengo el :icono completo de una llamada de función. Entonces, devuelve una cadena. como "mdi-plus". Pero no hay manera de aumentar el tamaño del icono...
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;}Intenta agregar este css, cambia la altura/ancho a tu gusto
.v-stepper__step__step.primary .v-icon__svg { height: 42px; //height and width width: 42px; } .v-stepper__step__step.success .v-icon__svg { height: 42px; //height and width width: 42px; } .v-stepper__step__step.grey .v-icon__svg { height: 42px; //height and width width: 42px; }Se me ocurrió una respuesta temporal. Sin embargo, esta no es la solución ideal. Por esto, pude cambiar los tamaños de los iconos. ¡Pero no específico para el paso a paso! Verifique que todos los íconos y cuadros de texto tengan un tamaño de 30 px.
.mdi-text-box-check-outline::before , .mdi-check-all::before { font-size: 30px; }