Vuetify: [Feature Request] Add a slot to be able to change the icon template in v-stepper-step

[Tofandel]

Problem to solve

This would allow for more costumization of the stepper icon, currently the icon can only be passed as editableIcon, errorIcon, completedIcon

This would allow to change the logic of the displayed icons and to give more flexibility for their display (For example to add an image, or to change the default number or text to an icon, and to change the size and color of the stepper icon)

Related #3963

Proposed solution

To add a scoped slot named "icon" that will pass the props of the parent (hasError, completed, editable, isActive, isInactive and the icons props) so that we can declare our components like so

<v-stepper-step>
    <template #icon="step">
        <v-icon v-if="step.isActive">ActiveIcon</v-icon>
        <v-icon v-else-if="step.editable">{{step.editableIcon}}</v-icon>
        //Etc ...
    </template>
    Step Label
</v-stepper-step>

[megaroeny]

I also was looking to change the icons to Font Awesome icons in the steppers, and it just won't work ☹️ Maybe there's some way to "hack" it?

[Tofandel]

There is a way to hack it but it's really really bad and I don't recommend it

You can use the :step property to change the default text and it accepts html so you can enter something like
<i class="fa fa-smt" > inside, the problem you'll find is it's also the identifier of the step so you can't have the same twice and you also can't use components

[KaelWD]

@jaminroe https://vuetifyjs.com/en/framework/icons#install-font-awesome-5-icons
v-stepper-step also has complete-icon, edit-icon, and error-icon props.

[Tofandel]

@KaelWD @johnleider Any news?

It should be as simple as doing this

    genStepContent () {
      //Simply return the content of the "icon" slot if it's defined with the entire VStepperStep node passed as a prop
      if (typeof this.$scopedSlots.icon === 'function') {
        return this.$scopedSlots.icon(this);
      }

      const children = []

      if (this.hasError) {
        children.push(this.genIcon(this.errorIcon))
      } else if (this.complete) {
        if (this.editable) {
          children.push(this.genIcon(this.editIcon))
        } else {
          children.push(this.genIcon(this.completeIcon))
        }
      } else {
        children.push(String(this.step))
      }

      return children
    },

[Tofandel]

Seems this was forgotten but is in good demand, so a little bump

[nmalchy]

This would be really nice, also the ability to change the color of the individual steps because there isn't a horizontal timeline, and the stepper would work perfectly as a horizontal timeline if it was a bit more customizable.

[res63661]

Checking on this... need it :)

[anjayluh]

In dire need of this too

[FBenkhalifa]

Same here!

[deRaaf]

A workaround for this is putting the icon unicode value in the :before of the step. This becomes a hassle if you have a lot of steps though.