I want to change the Icon size inside the v-stepper steps. I could manage to change the step sizes. But cannot find a way to change the icon size.
<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>
As you can see, I get the :complete-icon from a function call. So, it returns a string. like "mdi-plus" . But no way to increase the icon size...
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;}
Try adding this css, change de height/width at your liking
.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;
}
I came up with a temporary answer. This is not the ideal solution though. By this , I could change the icon sizes . But not specific to the stepper !!! Check all icon and text box check icon sizes will be 30px by this.
.mdi-text-box-check-outline::before ,
.mdi-check-all::before
{
font-size: 30px;
}