Vue3+Vuetify3中如何同时使用Material Icons填充与轮廓样式

下面提供三种可行的方案，根据你的使用场景选择：

方案1：自定义全局图标集（推荐，适合大量使用） #

通过扩展Vuetify的默认md图标集，约定后缀来区分填充/轮廓样式：

1. 确保已引入Google Material Icons CDN
   在index.html中添加（如果还没加）：

   <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
   

2. 修改main.ts的Vuetify配置
   自定义图标渲染逻辑，识别_outline后缀并切换样式类：

   import { createVuetify, h } from 'vuetify'
   import { md } from 'vuetify/iconsets/md'
   
   const customMd = {
     ...md,
     component: (props: { icon: string }) => {
       let iconName = props.icon
       let iconClass = 'material-icons'
   
       // 用_outline后缀标记轮廓图标
       if (iconName.endsWith('_outline')) {
         iconName = iconName.slice(0, -8)
         iconClass = 'material-icons-outlined'
       }
   
       return h('i', { class: iconClass }, iconName)
     }
   }
   
   const vuetify = createVuetify({
     icons: {
       defaultSet: 'customMd',
       sets: {
         customMd
       }
     }
   })
   

3. 使用方式

   <!-- 填充样式 -->
   <v-btn icon="picture_as_pdf"></v-btn>
   
   <!-- 轮廓样式 -->
   <v-btn icon="picture_as_pdf_outline"></v-btn>
   

方案2：使用slot自定义图标（灵活，适合零散使用） #

直接通过v-btn的图标插槽手动渲染带样式的图标标签，无需全局配置：

<v-btn variant="flat">
  <template v-slot:prepend-icon>
    <i class="material-icons">picture_as_pdf</i>
  </template>
  填充图标按钮
</v-btn>

<v-btn variant="flat">
  <template v-slot:prepend-icon>
    <i class="material-icons-outlined">picture_as_pdf</i>
  </template>
  轮廓图标按钮
</v-btn>

方案3：注册双图标集（清晰区分样式） #

分别注册填充和轮廓两个独立图标集，使用时指定icon-set属性：

1. 修改main.ts配置

   import { createVuetify, h } from 'vuetify'
   import { md as mdFilled } from 'vuetify/iconsets/md'
   
   // 定义轮廓图标集
   const mdOutlined = {
     ...mdFilled,
     component: (props: { icon: string }) => {
       return h('i', { class: 'material-icons-outlined' }, props.icon)
     }
   }
   
   const vuetify = createVuetify({
     icons: {
       defaultSet: 'mdFilled',
       sets: {
         mdFilled,
         mdOutlined
       }
     }
   })
   

2. 使用方式

   <!-- 默认填充样式 -->
   <v-btn icon="picture_as_pdf"></v-btn>
   
   <!-- 指定轮廓图标集 -->
   <v-btn icon="picture_as_pdf" icon-set="mdOutlined"></v-btn>
   

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