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 :>{{
                  GetTextDescription(step)
                }}</span>
              </v-stepper-step>

              <v-divider
                :
                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;}

This is my stepper.

CodePudding user response：

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

CodePudding user response：

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