Most icons do not appear.


Topic: Most icons do not appear.

kimini asked 2 years ago

I am using Angular Pro (Version 7.2.0). Most of FontAwesome icons are not displayed. Why?

<!-- Do not show -->
<mdb-icon fas icon = "pen"> </ mdb-icon>
<mdb-icon far icon = "hand-paper"> </ mdb-icon>

<!-- Is displayed-->
<mdb-icon fas icon = "heart"> </ mdb-icon>
<mdb-icon fas icon = "camera-retro"> </ mdb-icon>

Samantha pro premium answered 2 years ago

never mind... don't forget to also update the angular.json file to include "node_modules/@fortawesome/fontawesome-free/css/all.min.css" and delete older version.


Damian Gemza staff answered 2 years ago

Dear kimini,

Please check, if your application is using the latest Font Awesome 5 library (@fortawesome/fontawesome-free). The mdb-icon is updated, to use the FA5 library instead of FA4.

If your app has installed the FA5 library, please update to the latest @7.4.3 version of MDB Angular, and check if the problem still exists. If it is, please let me know.

Best Regards,

Damian


Samantha pro premium answered 2 years ago

In my case the problem still exist.


Samantha pro premium answered 2 years ago

Hey! Still a bug with this... I can show any icons with the html syntax <i class="fas fa-flag-checkered"></i> but when I use <mdb-icon fas icon="flag-checkered"></mdb-icon> the icon will not be showned.

The <i class=""> html syntax will ouput a <svg data-icon="flag-checkered"...> and the angular syntax will be <svg icon="flag-checkered" data-icon="null"...>. The angular syntax will not be working.

I guess this is a bug!?


Damian Gemza staff answered 2 years ago

Dear Samantha,

Could you please specify, which version of FontAwesome and MDB Angular you're using exactly? Without this, I won't be able to help you well.

Best Regards,

Damian


Samantha pro premium answered 2 years ago

@Damian Gemza

I use

  • "@fortawesome/fontawesome-free": "^5.8.1",
  • "ng-uikit-pro-standard": "file:ng-uikit-pro-standard-7.4.4.tgz",

In angular.json

"styles": [
              "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
              "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
              "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/@fortawesome/fontawesome-free/js/all.min.js"
            ]

I also saw this post and try the same configuration with no success. https://mdbootstrap.com/support/angular/font-awesome-icon-problem-in-latest-update/


Damian Gemza staff answered 2 years ago

Dear @Samantha

Please remove the fontawesome-free scripts from the scripts array in angular.json, and it should be working fine.

Please let me know if this resolved your problem.

Best Regards,

Damian


Samantha pro premium answered 2 years ago

@Damian Gemza
It didn't help but I found the problem. Some icons don't have the right attribute like this one <mdb-icon far icon="check"></mdb-icon> the far attribute should be fas and it will work immediately.

Samantha


Arkadiusz Idzikowski staff commented 2 years ago

Thanks, we will take a closer look at that.


cheema098 answered 11 months ago

icons are not working please help!

angular.json file

"styles": [ "node_modules/font-awesome/scss/font-awesome.scss", "node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss", "node_modules/angular-bootstrap-md/assets/scss/mdb.scss", "src/styles.scss" ], "scripts": [ "node_modules/chart.js/dist/Chart.js", "node_modules/hammerjs/hammer.min.js" ]

html.ts file'

<mdb-icon fab icon="twitter"></mdb-icon>

bot its not working


Konrad Stępień staff commented 11 months ago

Hi @cheema098,

Any errors in the console?

Could you follow the quick start page?


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: Angular
  • MDB Version: 7.2.0
  • Device: PC
  • Browser: Chrome,Firefox,Edge
  • OS: Windows
  • Provided sample code: No
  • Provided link: No