How to change v-stepper's step icons size?

Question

I am trying to change the step icons size (inside a v-stepper).

<v-stepper v-model="currentStep">
    <v-stepper-header>
          <v-stepper-item :color="orangeColor" title="Step 1" value="1" id="firstStep"></v-stepper-item>
          <v-divider></v-divider>
          <v-stepper-item :color="orangeColor" title="Step 2" value="2" id="secondStep"></v-stepper-item>
          <v-divider></v-divider>
          <v-stepper-item :color="orangeColor" title="Step 3" value="3" id="thirdStep"></v-stepper-item>
    </v-stepper-header>
</v-stepper>

Using Vuetify 3.5.3 version, I didn't find a single method working. I tried to play with the CSS, found multiple methods online, but for older versions of Vuetify.

Does anyone has a solution to this?

Answer 1

width, height and font-size of the .v-stepper-item__avatar element seems to affect the icons in question.

For scoped styling use :deep() selector:

<style scoped>
  .v-stepper :deep(.v-stepper-item__avatar) {
    width: 40px !important;
    height: 40px !important;
    font-size: 1rem !important;
  }
</style>

demo