Topic: Angular Stepper Icons Broken

wjhanna pro asked 3 years ago


The "Linear Stepper" demo and my own local copy has broken links to the icons. It looks like the jquery version is working correctly.

On my personal code I'm using the Angular version of Font Awesome (using <fa-icon [icon]=""></fa-icon> instead of <i icon=""></i> format, I'm not sure if this is related to the error on my side. If so, how is that something I can configure correctly? 


Arkadiusz Idzikowski staff answered 3 years ago


Thank you for letting us know about that. We will add styles for pro version as well.


anuragd7 free commented 3 years ago

the stepper documentation on website still seems to be broken /incorrect. The icons dont show


Arkadiusz Idzikowski staff commented 3 years ago

Which example from documentation do you use? Do you use Font Awesome Pro in your project?

Please try the workaround provided by @DesertFoxNV and let me know if that works for you.

ul.stepper .step.done:before { font-family: 'Font Awesome 5 Pro' !important; } ul.stepper .step.wrong:before { font-family: 'Font Awesome 5 Pro' !important; }


DesertFoxNV free answered 3 years ago


The Linear Stepper (MDB Pro Component) is broken.

Steps To Reproduce Error 1. Navigate to MDB Angular Linear Stepper Documentation 2. Click the continue button. 3. Observe icon error, with the stepper 1 circle containing a broken icon.![Picture showing error][1] [1]: https://ibb.co/b7j8y6N


DesertFoxNV free commented 3 years ago

Looks like the problem is that I have Font Awesome Pro. The font family property of the stepper

  • is 'Font Awesome 5 Free'. Changing it to 'Font Awesome 5 Pro' fixes my issue. Maybe there is a similar issue with the documentation.


  • DesertFoxNV free commented 3 years ago

    I was able to temporaily fix with the following css overrides:

    ul.stepper .step.done:before { font-family: 'Font Awesome 5 Pro' !important; }

    .white-skin .primary-color, .white-skin ul.stepper li.active a .circle, ul.stepper li.active a .white-skin .circle, .white-skin ul.stepper li.completed a .circle, ul.stepper li.completed a .white-skin .circle, .white-skin ul.stepper .step.active.wrong:before, ul.stepper .white-skin .step.active.wrong:before { background-color: red !important; }

    ul.stepper .step.wrong:before { font-family: 'Font Awesome 5 Pro' !important; }


    wjhanna pro answered 3 years ago


    I figured out the problem. The website documentation is wrong. It shows to add an icon: but the correct syntax is: (removing the leading "fa-").


    Arkadiusz Idzikowski staff answered 3 years ago


    Please make sure that you have new fort-awesome package installed and correct imports in angular.json styles array. There is also a possibility that this specific icon name changed in font awesome 5.

    If it still won't work please show me the code you use to render mdb-icon and code from package.json, angular.json and app.module.ts files.


    wjhanna pro answered 3 years ago


    I created a new project and followed the quick start guide exactly and I still cannot get the mdb-icon to work. Using it as works fine so I know the backend is working somehow. I don't get any errors in the console.


    Arkadiusz Idzikowski staff answered 3 years ago


    Please use our components for the icons and update the syntax to Font Awesome 5 if you use version 7.3.0. There are 3 new directives: fas, far and fab (for solid, regular and brands icons). For example:

    <mdb-icon fas icon="fa-check"></mdb-icon>

    Here you can find list of all icons with the code samples: https://mdbootstrap.com/docs/angular/content/icons-list/

     

     



    Please insert min. 20 characters.

    FREE CONSULTATION

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

    Status

    Resolved

    Specification of the issue

    • User: Pro
    • Premium support: No
    • Technology: MDB Angular
    • MDB Version: 7.0.0
    • Device: PC
    • Browser: Chrome
    • OS: Windows 10
    • Provided sample code: No
    • Provided link: No