Icons not appearing in Stepper


Topic: Icons not appearing in Stepper

londoh pro asked 5 years ago

*_Expected behavior_*Icon will show up as demo in docs

*_Actual behavior_*Icon not appearing

Resources (screenshots, code snippets etc.)

I have a stepper as shown in the (somewhat brief and simplified) snippets below.I'm using separate components per step (as discussed in prev post) The components work fine, validation etc working correctly.

I also tried using alternate template syntax

 <template v-slot:1>

The problem is that no icon appears in step Button - as shown in screenshot:

Only step number is visible

No icon tag is inserted in html

However other icons show up correctly, as per screenshot

I'm grateful for any pointers as to what I'm missing here.

Thanks

l.

<mdb-stepper
    :steps="entryStepper"
    :options="options"
        buttons
        within
        ref="stepper"
        validation
        :validatedSteps="validatedSteps"
        @validate="validate"
        @changeStep="changeActiveStep"
>
    <template #1>
        <step-user
            title="User Details"
        />
    </template>
    <template #2>
        <step-address
                title="Address"
        />

data() {
    return {
        entryStepper: [
            { name: "User Details", icon: "user" },
            { name: "Address", icon: "building" },
            { name: "Media", icon: "media" },
            { name: "Terms and Conditions", icon: "clipboard-check" },
        ],
        options: {
            stepBtn: { color: "info", active: "amber", iconClass: "white-text" },
            nextBtn: { outline: "info", icon: "chevron-right", text: "Next" },
            prevBtn: { outline: "info", icon: "chevron-left", text: "Previous" },
            submitBtn: { color: "amber", icon: "check" },
            lineColor: "amber"
        },
        steps: [
            'stepUser',
            'stepAddress',
            'stepMedia',
            'stepTerms'
        ],

    }
},

Magdalena Dembna staff premium answered 5 years ago

By default, this kind of stepper was designed to display the step's number - but we will extend this component by this option in the upcoming release. Kind regards, Magdalena


londoh pro answered 5 years ago

Thank you, I'll wait the update.

I must also point out that if I still had access to the source code (as per my other recent post here) it would no doubt be simple enough to fix this myself.


Magdalena Dembna staff premium commented 5 years ago

Thank you for your feedback - I believe the discussion on that matter is taking place elsewhere. We have tried to make documentation as clear as possible and lost every option for each kind of stepper. Kind regards, Magdalena


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.0.1
  • Device: any
  • Browser: all
  • OS: any
  • Provided sample code: No
  • Provided link: No
Tags