How can I use fontawesome with material bootstrap5 in vue js

Question

I installed material bootstrap5 to my Vue project and its working fine. I can use components and icons directly from material bootstrap page like :

<a class="btn btn-primary btn-lg btn-floating insta" style="background-color: #ac2bac;" href="#!" role="button">
  <i class="fab fa-instagram"></i>
</a>
<a class="btn btn-primary btn-lg btn-floating facebook" style="background-color: #ac2bac;" href="#!" role="button">
  <i class="fab fa-facebook"></i>
</a>

and i get nice icons; but i want to use fontawseome icons and when i paste the icon code from fontawesome site for vuejs like

<font-awesome-icon icon="fa-solid fa-paper-plane" />

It doesn't work and it shows nothing. I installed font awesome with mdb5. How can I use it ?

the whole code is:

 <div class="SocialMediaBar">
<div class="socialMediaIcons" >
<a class="btn btn-primary btn-lg btn-floating insta" style="background-color: #ac2bac;" href="#!" role="button">
  <i class="fab fa-instagram"></i>
</a>
<a class="btn btn-primary btn-lg btn-floating facebook" style="background-color: #ac2bac;" href="#!" role="button">
  <i class="fab fa-facebook"></i>
</a>
</div>

It show 2 icons from mdb5 site and nothing more.