Vue 3 CLI中同时使用Font Awesome与Material UI图标问题求助

你当前代码的核心问题是重复定义了defaultSet，对象中重复的键会被后面的覆盖，所以最后只有fa生效。要让两种图标共存，只需修正配置，并在使用时指定对应的图标集即可。

步骤1：修正main.js中的Vuetify配置 #

去掉重复的defaultSet，只保留一个默认图标集（比如选mdi作为默认，不影响Font Awesome的使用），确保sets中同时注册mdi和fa：

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

const app = createApp(App)

// 引入Font Awesome样式
import '@fortawesome/fontawesome-free/css/all.css'
// 引入Font Awesome图标集
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';
// 引入Material Design Icons的别名和图标集
import { aliases, mdi } from 'vuetify/iconsets/mdi';
import "@mdi/font/css/materialdesignicons.css";


const vuetify = createVuetify({
  components,
  directives,
  icons:{
    defaultSet: 'mdi', // 仅保留一个默认图标集
    aliases,
    sets:{
      mdi,
      fa // 确保注册Font Awesome图标集
    },
  },
})

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

步骤2：在组件中使用两种图标 #

配置完成后，可通过以下方式调用不同图标集的图标：

方式1：通过set属性指定图标集 #

<template>
  <!-- 使用默认的mdi图标 -->
  <v-icon>mdi-home</v-icon>
  <!-- 指定使用fa图标集 -->
  <v-icon set="fa">fa-house</v-icon>
</template>

方式2：直接在图标名前加图标集前缀 #

<template>
  <v-icon>mdi:home</v-icon>
  <v-icon>fa:house</v-icon>
</template>

方式3：自定义图标别名（可选） #

如果想统一图标名称，可在aliases中自定义别名，比如：

const vuetify = createVuetify({
  components,
  directives,
  icons:{
    defaultSet: 'mdi',
    aliases: {
      ...aliases, // 保留原有mdi的别名
      home: 'mdi-home',
      homeFa: 'fa-house'
    },
    sets:{
      mdi,
      fa
    },
  },
})

之后在组件中直接使用别名：

<v-icon>$home</v-icon>
<v-icon>$homeFa</v-icon>

这样两种图标就能同时生效了。

内容的提问来源于stack exchange，提问作者Edson