Angular Stepper Icon


Topic: Angular Stepper Icon

MikeOnline pro premium priority asked 4 years ago

I am trying to use icon in stepper steps, however the example in the docs do not seem to work, Can I get an explanation or more detailed example of how to use Icons in an angular stepper.

I have tried to follow the discussion on: https://mdbootstrap.com/support/angular/angular-stepper-icons-broken/ but I cant seem to figure out what they are talking about.


Konrad Stępień staff answered 4 years ago

Hi @MikeOnline,

Can you try to provide styles to the global file of styles styles.scss?

It should work then.


abhinov answered 4 years ago

Hi I am also having the same issue, i can't get the icon to show up in my stepper, using angular pro.

Have coped the code and included syles in the global style sheet.

HTML

<mdb-stepper #stepper [linear]="true" class="w-100">
    <mdb-step name="Step 1" [stepForm]="firstFormGroup" class="step1">
      <form [formGroup]="firstFormGroup">
        <div class="md-form">
          <input type="text" class="form-control" mdbInput mdbValidate formControlName="email">
          <label for="">Email</label>
          <mdb-error *ngIf="email.invalid && (email.dirty || email.touched)">Input invalid</mdb-error>
          <mdb-success *ngIf="email.valid && (email.dirty || email.touched)">Input valid</mdb-success>
        </div>
      </form>
      <button mdbBtn size="sm" color="primary" (click)="stepper.next()">CONTINUE</button>
    </mdb-step>
    <mdb-step name="Step 2" [stepForm]="secondFormGroup" class="step2">
      <form [formGroup]="secondFormGroup">
        <div class="md-form">
          <input type="password" class="form-control" mdbInput mdbValidate formControlName="password">
          <label for="">Password</label>
          <mdb-error *ngIf="password.invalid && (password.dirty || password.touched)">Input invalid</mdb-error>
          <mdb-success *ngIf="password.valid && (password.dirty || password.touched)">Input valid</mdb-success>
        </div>
      </form>
      <button mdbBtn size="sm" color="primary" (click)="stepper.next()">CONTINUE</button>
      <button mdbBtn size="sm" color="secondary" (click)="stepper.previous()">BACK</button>
    </mdb-step>
    <mdb-step name="Step 3" label="Step 3 label" class="step3">
      <p class="pl-2">Finish!</p>
      <div class="step-actions">
        <button mdbBtn  size="sm" color="primary" (click)="onSubmit()">SUBMIT</button>
      </div>
    </mdb-step>
  </mdb-stepper>

SCSS:

ul.stepper.horizontal .step .step-title::before {
font-weight: 900;
font-family: "Font Awesome 5 Free";
}

ul.stepper.horizontal .step:nth-of-type(1) .step-title {
    &:before {
        content: "\f007";
    }
}

ul.stepper.horizontal .step:nth-of-type(2) .step-title {
    &:before {
        content: "\f004";
    }
}

ul.stepper.horizontal .step:nth-of-type(3) .step-title {
    &:before {
        content: "\f005";
    }
}

Also imported the mdb syles into the global styles.scss

/* You can add global styles to this file, and also import other style files */
@import 'src/styles/index';
@import "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss";

body {
    background-color: $background-colour !important;
}

I just can't seem to get the icons loading


Arkadiusz Idzikowski staff commented 4 years ago

Did you install Font Awesome 5 and imported FA styles in the angular.json/styles.scss file?


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 Angular
  • MDB Version: 9.3.1
  • Device: Laptop
  • Browser: *ium
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes
Tags