我目前正在用默认的"material 设计图标"构建一个vuetifyjs应用程序.在生产版本中，我只使用这种字体的两个图标(vuetify组件芯片使用).
按照建议，我将完整的iconfont包括在内
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
但是，这一产品版本迫使用户仅下载2个图标的近0.5MB数据.
我们建议尽可能使用@mdi/js.这提供了一个ES模块，可以导出图标集中每个图标的SVG路径，并支持树形显示.只需将图标字符串传递给SVG路径元素，或者在本例中，如果在Vuetify config:iconfont: 'mdiSvg'中指定图标字体，则可以将其直接传递给v-icon.
Installation
npm install @mdi/js
Usage
<template>
<v-icon>{{ mdiCheck }}</v-icon>
</template>
<script>
import { mdiCheck } from '@mdi/js'
export default {
data: () => ({
mdiCheck,
}),
}
</script>
您可以在此处阅读有关与Vuetify集成的更多信息:https://vuetifyjs.com/en/customization/icons#install-material-design-icons-js-svg