Topic: Cconnect MDI-icons

egorovd priority asked 2 months ago


Hello.

How to correctly connect MDI-icons so that they can be conveniently used like FA-icons.

Thank you.


Bartosz Cylwik staff answered 2 months ago


The MDBIcon component is looking for an icon prop with name of the icon (FA) thats why you are getting the fa-undefined class (the fa- is beeing added by default here).

  <MDBIcon icon="camera-retro" />

If you want to get rid of that class while using MDI, I would suggest to simply use the MDI icon inside <i> tag instead of using the MDBIcon component for that.


egorovd priority answered 2 months ago


This is all clear...

Have you tried using this?

If you go ahead and add this to the index.html

<link
      href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
      rel="stylesheet"
    />

And then use it like this:

<MDBIcon iconStyle="material-icons" icon="send"></MDBIcon>

The result is this:

<i class="material-icons fa-send"></i>

Yes, you can change it a little to make it work:

<MDBIcon iconStyle="material-icons" class="send"></MDBIcon>

But it will be like this:

<i class="material-icons fa-undefined send"></i>

And it should be like this:

 <i class="material-icons send"></i>

Tell me how to do this?

In the sense of removing the generation of this:

fa-undefined

P.S.

I connected the MDI like this doc

So far everything is working.


Bartosz Cylwik staff answered 2 months ago


Hi! Our MDBIcon component support FA icons:

https://mdbootstrap.com/docs/vue/content-styles/icons/

For other icon libraries you would have to check their documentation to check how to use them in your project. Did you experience issues using mdi with MDB Vue package?


egorovd priority commented 2 months ago

Strange, of course...Why didn't you provide native support for MDI-icons?



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 5.0.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No