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.

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.

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?