mdbSideNavItem icon limitation?


Topic: mdbSideNavItem icon limitation?

digitalmanagerguru asked 5 years 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 5 years 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 commented 5 years 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 5 years ago

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


Magdalena Dembna staff premium answered 5 years ago

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


Magdalena Dembna staff premium answered 5 years ago

Unfortunately, we seem to have some kind of technical problem - I didn't delete my previous answers and I'm sorry about this situation - we are trying to troubleshoot this. Regarding fixed-width icons - we don't yet have a prop to control it - one way would be to use the class, but not all of the components bind a class list to an icon - f.e. sidenav being one of them. I'll create a feature request and we\ll discuss it with our team. Kind regards, Magdalena


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:

https://www.diffchecker.com/gOb7mdmO


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

https://www.diffchecker.com/A9wTvbnd


On src/components/Content/Fa.vue:

https://www.diffchecker.com/eojuyGD4

Best regards


Magdalena Dembna staff premium commented 5 years ago

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


digitalmanagerguru commented 5 years 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 5 years ago

Thanks for all your remarks.


digitalmanagerguru commented 5 years ago

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


Magdalena Dembna staff premium commented 5 years ago

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


digitalmanagerguru commented 5 years ago

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


Magdalena Dembna staff premium answered 5 years 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.


Another question that relates to those components.

is there any way to be able to add fa-fw: https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons ?

EDIT: Where is Magdalena comment from 4 days ago? Deleting comments seems a childish attitude. The edit feature should be used instead...


Magdalena said this:

Unfortunately, we seem to have some kind of technical problem - I didn't delete my previous answers and I'm sorry about this situation - we are trying to troubleshoot this. Regarding fixed-width icons - we don't yet have a prop to control it - one way would be to use the class, but not all of the components bind a class list to an icon - f.e. sidenav being one of them. I'll create a feature request and we\ll discuss it with our team. Kind regards, Magdalena

I see. I understand now. I've found that if we like an message here, it gets deleted.

About the fixed width issue. Thanks, appreciated.


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: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.8.2
  • Device: Desktop
  • Browser: Chrome
  • OS: Win.10
  • Provided sample code: No
  • Provided link: No