Angular Stepper Icon

Hi @MikeOnline,

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

It should work then.

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