Angular FontAwesome Pro


Topic: Angular FontAwesome Pro

Jason Caruso asked a year ago

Expected behavior

I would like to add FontAwesome Pro to my project and i have a pro license with them. Should I be able to add it and use mdb-icon in Angular with those Pro Icons?

Actual behavior

Does not work:

<mdb-icon fas icon="search" aria-hidden="true"></mdb-icon>

Does work:

<i class="fas fa-search"></i>

Resources (screenshots, code snippets etc.)


Arkadiusz Idzikowski staff commented a year ago

It should not matter here if you use the Free or Pro version, especially if the non-component version works correctly. Are there any errors in the console when you add <mdb-icon to the app view?


@Arkadiusz Idzikowski in my Angular.js I have the following styles and scripts:

        "styles": [
          "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",                 "node_modules/@fortawesome/fontawesome-pro/css/all.min.css",
          "node_modules/@fortawesome/fontawesome-free/scss/solid.scss", 
          "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",   
          "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
          "node_modules/@fortawesome/fontawesome-pro/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-pro/js/all.min.js",
          "node_modules/chart.js/dist/Chart.js",
          "node_modules/easy-pie-chart/dist/easypiechart.js",
          "node_modules/screenfull/dist/screenfull.js",
          "node_modules/hammerjs/hammer.min.js"
        ]

No, mdb-icon is not working.


Jason Caruso commented a year ago

If i remove the pro css and js and the free version works.


Arkadiusz Idzikowski staff commented a year ago

Can you check if there are any errors in the browser console when you try to use mdb-icon component (with the configuration in which the component doesn't work)?


Jason Caruso commented a year ago

@Arkadiusz Idzikowski Sorry for the late response... Here is the error I get:

client:135 Conflict: Multiple assets emit different content to the same filename fa-regular-400.eot
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-solid-900.eot
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-regular-400.woff2
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-solid-900.woff2
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-regular-400.woff
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-solid-900.woff
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-regular-400.ttf
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-solid-900.ttf
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-regular-400.svg
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-solid-900.svg
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-brands-400.eot
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-brands-400.woff2
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-brands-400.woff
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-brands-400.ttf
warnings @ client:135
client:135 

Arkadiusz Idzikowski staff commented a year ago

@Jason Caruso please try to remove all FA Free imports from the styles array in angular.json 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: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 10.1.1
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No