The icons on the buttons do not work (Update 7.3.0)


Topic: The icons on the buttons do not work (Update 7.3.0)

birmain pro asked 6 years ago

After updating MDB version 7.3.0, the icons on the buttons are no longer visible. 
This is the html code for the button:

<buttonmdbBtntype="button"[disabled]="pv.disabledBorrar()"(click)="pv.onDeleteLinea()"class="boton_ctrl btn btn-secondary"mdbWavesEffect><mdb-iconicon="trash"size="lg"></mdb-icon></button>
 

Damian Gemza staff answered 6 years ago

Dear @birmain 

With 7.3.0 we have migrated from the Font Awesome 4 to Font Awesome 5. As we describe it in our changelog - this change is not backward compatible. You have to migrate your project to the FA5.

Also with the 7.3.0 version we have added 4 directives for Font Awesome 5 - far, fas, fab and fal. Use it to choose the type of your icon with the mdb-icon component.

Best Regards,

Damian


birmain pro answered 6 years ago

Hello Damian, The installation of version 7 I made it via npm putting in package.json: "ng-uikit-pro-standard": "file: ng-uikit-pro-standard-7.3.0.tgz" In his answer he tells me that I must migrate my project to Font Awesome 5. Is not it enough to use the new nomenclature that you have suggested to me? The icons still do not appear, could you tell me what I'm missing?


Aroquiassamy LA ROZE pro premium priority answered 6 years ago

Hi @Damian, I am getting same issue ( @birmain ) while using mdb-icon. Can you please give me any solution ASAP.


Aroquiassamy LA ROZE pro premium priority commented 6 years ago

We got solution in this issue. As given in mdb site <mdb-icon fas icon="fa-chart-line"></mdb-icon> to <mdb-icon fas icon="chart-line"></mdb-icon>. Please update your site for icon list component.


Damian Gemza staff answered 6 years ago

Dear Aroquiassamy LA ROZE - thanks for your report!

There shouldn't be that fa- prefix. We'll definitely fix this problem in our documentation.

Dear birmain - Please remove the "font-awesome" package, install the "@fortawesome/fontawesome-free" package, and then in your angular.json file change font awesome import to the below one:

"node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss", "node_modules/@fortawesome/fontawesome-free/scss/solid.scss", "node_modules/@fortawesome/fontawesome-free/scss/regular.scss", "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",

After that you can check, if Font Awesome 5 works fine - add the below icon to your application and check if it works fine:

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

Best Regards, Damian


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 70
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: No
Tags