如何查找Vuestic Admin侧边栏图标及掌握其使用方法？

一、图标来源查找方法 #

Vuestic Admin默认使用Material Design Icons（MDI），还有小部分是官方封装的自有图标组件。你全局搜索找不到，是因为图标都是通过标识/类名引用，而非直接的图片文件。

具体操作：

• 先找菜单配置文件：一般在src/router/index.js或单独的src/config/menu.js里，菜单数据中的icon字段就是图标的对应标识（比如mdi-home）。
• 若标识以mdi-开头，直接去Material Design Icons图标库搜索关键词就能获取全量图标列表；如果是va-icon-开头，可查看项目内src/components/va-icon目录下的文件，或参考Vuestic官方文档的图标章节。

二、侧边栏图标使用步骤 #

1. 配置菜单时直接指定图标 #

在路由/菜单配置里，给菜单项的meta字段添加icon属性即可：

{
  path: '/dashboard',
  name: 'Dashboard',
  component: () => import('@/views/Dashboard.vue'),
  meta: {
    icon: 'mdi-home' // 填入你找到的图标标识
  }
}

2. 自定义侧边栏时使用图标组件 #

如果是自行编写侧边栏模板，直接调用Vuestic的<va-icon>组件：

<va-icon name="mdi-settings" />

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