mdbSideNavItem icon limitation?


Topic: mdbSideNavItem icon limitation?

digitalmanagerguru pro asked 7 months ago

Hi there,

I am using mdbSideNavItem and I wanted to use font awesome pro icons and duotone ones, but for what I saw I can only use free ones.

Is there a way to use other types of fontawesome icons on "slimIcon"?

If not, would be awesome to improve that on a future release.

best regards

Magdalena Dembna staff premium commented 6 months ago

Do you have FA pro licence? We have added a support for duotone icons - property fad in several components, but MDB package includes only free icons. Adding this property will add the fad class to the i element, but it won't work unless you're Fontawesome pro user.

digitalmanagerguru pro commented 6 months ago

Yes, I do have a pro license. But for what I saw the slimIcon component wasn't ready for pro icons.

Magdalena Dembna staff premium commented 6 months ago

I have created a task to solve this issue. Kind regards, Magdalena

digitalmanagerguru pro answered 6 months ago

Hi there,

I've news about this. I wanted to solved my code already before your code is released, so the solution for your components could be this:

On src/components/pro/Navigation/SideNavItem.vue:

On src/components/pro/Navigation/SideNavCat.vue:

On src/components/Content/Fa.vue:

Best regards

Magdalena Dembna staff premium commented 6 months ago

Thank you for this solution, we will most certainly implement a similar solution soon. Kind regards, Magdalena

digitalmanagerguru pro commented 5 months ago

Btw, only to remind that last 6.0.1 version still doesnt have fad (duotone) icons on slimIcon (mdb-side-nav-item). But it does work with icon on mdb-side-nav-cat (basically its all fixed now except the props not being passed to mdbIcon on mdbSideNavItem as fas, fab, fad, duotone etc that's why the mdbIcon isn't showing properly the fad/far/fab we put on MdbSideNavItem and instead shows the default type. Re-check my diffchecker if you've any doubt about my explanation,

Mikołaj Smoleński staff commented 4 months ago

Thanks for all your remarks.

digitalmanagerguru pro commented 2 months ago

Just to give a reminder that my last post above error still exists on last version

Magdalena Dembna staff premium commented 2 months ago

This issue will be solved in the upcoming release. Kind regards, Magdalena

digitalmanagerguru pro commented 4 days ago

Just a friendly reminder on this one. No pressures :P

Magdalena Dembna staff premium answered 4 days ago

Props for modifying slim icons:

slimIcon: {
      type: String
    slimFar: {
      type: Boolean,
      default: false
    slimFab: {
      type: Boolean,
      default: false
    slimFal: {
      type: Boolean,
      default: false
    slimFad: {
      type: Boolean,
      default: false

Are those not working properly? Kind regards, Magdalena

Well, the slim's works (congrats on that :p). But in only adds the icon when Slim.

If I try to use an icon instead of a slimIcon, to have the icon for wide and slim sidebar, it will not work.

This is what I got on the html: "fas text- fad fa-shield"

This "fas text-" comes from "src / components / Content / Fa.vue"

Since the mdbIcon does not receive a fas/far/fal/fad/fab or their alias, it adds trash.One way to solve it is to probably add on the return the slimFas etc, but what I would do is to change on SideNavItem, line 4:

<mdb-icon v-if="icon" :class="iconClass" />

And add there the fas/far/fal...etc

<mdb-icon v-if="icon" :icon="icon" :far="far" :fal="fal" :fad="fad" :fab="fab" ...alias too?... />

The problem on :class="iconClass" is that it will not pass to the Fa.vue the fad or fab I am using, and therefore the fa component will add to the class the "fas text-" since no props are being passed.

Magdalena Dembna staff premium answered 3 days ago

Ok, I have found the issue you're referring to. The fix will be included in the upcoming release. Best regards, Magdalena

Please insert min. 20 characters.


Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Vue
  • MDB Version: 5.8.2
  • Device: Desktop
  • Browser: Chrome
  • OS: Win.10
  • Provided sample code: No
  • Provided link: No