mdbSideNavItem icon limitation?

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

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

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.