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

birmain pro asked 3 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 3 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


Aroquiassamy LA ROZE priority answered 3 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 priority commented 3 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.


birmain pro answered 3 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?


Damian Gemza staff answered 3 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



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