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

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>

[Tofandel]

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

[gegeke]

@ibraahim6 @Tofandel I think the cleanest solution right now is to extend the VStepperStep with custom code:

VeStepperStep (Vuetify Extended Stepper Step):

import { VStepperStep } from 'vuetify/lib/components/VStepper'
export default {
  // eslint-disable-next-line
  name: 've-stepper-step',
  extends: VStepperStep,
  methods: {
    genStepContent() {
      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 if (this.$attrs.icon) {
        // this "else if" branch is added,
        // so the step can display custom
        // Vuetify icons
        children.push(this.genIcon(this.$attrs.icon))
      } else {
        children.push(String(this.step))
      }

      return children
    },
  },
}

To make it work smoothly with the stepper, the VStepper should also be extended:

import { VStepper } from 'vuetify/lib'
export default {
  // eslint-disable-next-line
  name: 've-stepper',
  extends: VStepper,
  methods: {
    register(item) {
      if (
        item.$options.name === 've-stepper-step' ||
        item.$options.name === 'v-stepper-step'
      ) {
        this.steps.push(item)
      } else if (item.$options.name === 'v-stepper-content') {
        item.isVertical = this.vertical
        this.content.push(item)
      }
    },

    unregister(item) {
      if (
        item.$options.name === 've-stepper-step' ||
        item.$options.name === 'v-stepper-step'
      ) {
        this.steps = this.steps.filter(i => i !== item)
      } else if (item.$options.name === 'v-stepper-content') {
        item.isVertical = this.vertical
        this.content = this.content.filter(i => i !== item)
      }
    },
  },
}

This way, when you include & use ve-stepper you can add steps of ve-stepper-step that accept an icon prop - everything else stays the same as it is with the original VStepper & VStepperStep.

Working piece: @codesandbox

https://user-images.githubusercontent.com/5388876/121066542-4df2a180-c7ca-11eb-9f4d-47c006788caa.mov