Topic: Most icons do not appear.
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 priority answered 6 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 6 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 priority answered 6 years ago
Samantha pro premium priority answered 6 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 6 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 priority answered 6 years ago
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 6 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 priority answered 6 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
cheema098 answered 5 years 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 5 years ago
Hi @cheema098,
Any errors in the console?
Could you follow the quick start page?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.2.0
- Device: PC
- Browser: Chrome,Firefox,Edge
- OS: Windows
- Provided sample code: No
- Provided link: No