如何在Vuetify折叠面板中设置Google字体图标

方法一：使用内置的expand-icon和collapse-icon插槽（推荐） #

Vuetify的v-expansion-panel-title提供了专门的插槽用于自定义展开/折叠图标，完美适配Google Material Symbols的格式：

<v-expansion-panel-title>
  <!-- 自定义展开状态图标 -->
  <template v-slot:expand-icon>
    <span class="material-symbols-outlined">arrow_drop_down</span>
  </template>
  <!-- 自定义折叠状态图标 -->
  <template v-slot:collapse-icon>
    <span class="material-symbols-outlined">arrow_drop_up</span>
  </template>
  
  面板标题内容
</v-expansion-panel-title>

这个方案无需手动处理状态切换，Vuetify会自动根据面板的展开/折叠状态渲染对应插槽的内容。

方法二：通过actions插槽结合状态控制 #

如果一定要用actions插槽，需要绑定面板的展开状态，通过条件渲染切换图标：

<v-expansion-panel v-model="isPanelExpanded">
  <v-expansion-panel-title>
    面板标题内容
    
    <template v-slot:actions>
      <!-- 根据展开状态显示对应图标 -->
      <span v-if="isPanelExpanded" class="material-symbols-outlined">arrow_drop_up</span>
      <span v-else class="material-symbols-outlined">arrow_drop_down</span>
    </template>
  </v-expansion-panel-title>
  
  <v-expansion-panel-content>
    面板内容区域
  </v-expansion-panel-content>
</v-expansion-panel>

在组件的脚本部分定义状态变量：

export default {
  data() {
    return {
      isPanelExpanded: false
    }
  }
}

你之前的写法问题说明 #

你之前的代码会同时显示两个图标，是因为没有添加状态判断逻辑，两个<span>元素会一直处于渲染状态。通过v-if/v-else可以确保只显示当前状态对应的图标。

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