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.

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

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...

Ok, I have found the issue you're referring to. The fix will be included in the upcoming release. Best 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.

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

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