Use Font Awesome icon and Material UI icon in vue 3 CLI

Question

Hi guys I just want know if we can use 2 icon fonts side by side,

my may case I want to use Material Design Icon and Font Awesome Icon.

main js file,

Apparently code below doesn't work you need to either pick one cannot use both.

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App)

import '@fortawesome/fontawesome-free/css/all.css' // Ensure your project is capable of handling css files

import { fa } from 'vuetify/iconsets/fa'

// Vuetify
import 'vuetify/styles';
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
import { aliases, mdi } from 'vuetify/iconsets/mdi';
import "@mdi/font/css/materialdesignicons.css";


const vuetify = createVuetify({
  components,
  directives,
  icons:{
    defaultSet: 'mdi',
    defaultSet: 'fa',
    aliases,
    sets:{
      mdi,
      fa
    },
  },
})

app.use(vuetify)
app.mount('#app');

any idea how to make those icons work at the same time?

thanks

Answer 1

You need to configure your Vue and Vuetify setup to recognize both icon sets.

In the Vuetify configuration, you can define multiple icon sets and specify which one to use by default. However, the issue in your code is that you're trying to set the defaultSet twice, which isn't allowed. Instead, define mdi and fa under sets, and use them in your components by prefixing the icon name with the set's identifier when you want to use a specific set. This way, both icon sets can coexist and be used throughout your application.

const vuetify = createVuetify({
  components,
  directives,
  icons: {
    defaultSet: 'mdi', // Choose a default set, 'mdi' or 'fa'
    aliases,
    sets: {
      mdi,
      fa,
    },
  },
});

When you use an icon in your application, prefix it with the set identifier (mdi: or fa:) if you're using an icon from the non-default set.

Cheers!

Answer 2

So able to work around it by using html tag.

<i class="fa-solid fa-house"></i>

it worked in my setup.