1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Suggestion: Support for Font Awesome Pro

tommykjensen free asked 4 years ago

I would very much like to be able to use Font Awesome Pro icons with mdb-icon.

Take following examples:

From free fontawesome, this works

<mdb-icon fas icon="glasses"></mdb-icon>

Icon from Pro Fontwaesome in the mdb-icon directive. I have tried several different versions and none are working.

<mdb-icon fad icon="fad fa-glasses"></mdb-icon>

And last using icon directly from Fontawsome Pro not as a mdb-icon and this works

<i class="fad fa-glasses"></i>

What I would like to be able to do is to use the pro icon directly in the mdb-icon directive (example 2).

Arkadiusz Idzikowski staff answered 4 years ago

Thanks for additional information. I edited your first post and removed unnecessary comments. In the future please try to include all important information in your question (you can always edit the first post). Answers should only contain a solution for the problem.

We currently don't have support for the 'Duotone icons'. We need to create new 'fad' directive.

I added this to our to-do list. We can't provide an ETA for this feature yet but it has high priority so I think it will be added in the near future.

As a workaround you can try to add class="fad" to the mdb-icon element instead of fad directive:<mdb-icon class="fad" icon="glasses"></mdb-icon>

nothingeni free commented 4 years ago

Hello,

I have the same problem, I can't get Pro FontAwesome to work with <mdb-icon>.

angular.json

"styles": [
          "node_modules/@fortawesome/fontawesome-pro/scss/fontawesome.scss",
          "node_modules/@fortawesome/fontawesome-pro/scss/solid.scss",
          "node_modules/@fortawesome/fontawesome-pro/scss/regular.scss",
          "node_modules/@fortawesome/fontawesome-pro/scss/brands.scss",
          "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/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",
          "node_modules/@fortawesome/fontawesome-pro/js/all.js"
        ]

(npm install of FontAwesome pro worked successfully)

Icon used for the example : bed-alt (https://fontawesome.com/icons/bed-alt?style=solid)

Examples i've tried...

<mdb-icon fas icon="fa-bed-alt"></mdb-icon> //Not working

<mdb-icon class="fas" icon="fa-bed-alt"></mdb-icon> //Not working

<mdb-icon icon="fas fa-bed-alt"></mdb-icon> //Not working

<i class="fas fa-bed-alt"></i> //Working

Did I made anything wrong ? Thanks in advance for help!

Arkadiusz Idzikowski staff commented 4 years ago

Please take a look at my answer. You need to pass only icon name to the icon input of mdb-icon component (there was a typo in my answer that suggested that the 'fa' is needed as well, I already edited my post).

For example: <mdb-icon fas icon="bed-alt"></mdb-icon>

nothingeni free commented 4 years ago

Thanks for you answer.

I tried your suggestion : <mdb-icon fas icon="bed-alt"></mdb-icon> but it still doesn't work. The icon stays error ('?/!').

I'll keep using the classic way at the moment <i class="fas fa-bed-alt"></i> as long as it works fine.

I hope MDB will soon support FontAwesome Pro !
Write
Create snippet
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
  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.8.2
  • Device: pc
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No
Tags
About author
tommykjensen
150Support score
12Questions 8Answers 0Snippets