在哪里可以找到用于vuetify的图标列表？

Question

您可以像这样添加图标<v-icon>backup</v-icon>，但我找不到可以用在v-icon标签内的支持词语列表。有关Material Design图标和Font Awesome图标的列表，但默认的图标呢？

- Jonathan Morales Vélez

---

https://pictogrammers.github.io/@mdi/font/3.6.95/ - Vitaly

Answer 1

好的。我在Vuetify图标文档中发现，来自Google的Material图标将被默认使用。

请记住，Material Icons与Material Design Icons是不同的!!!

一开始我没有注意到这一点。这就是我的困惑所在。

https://materialdesignicons.com/

- Jonathan Morales Vélez

---

Vuetify使用许多Material Icons，但并非全部。例如，在Vuetify中，table_chart无法正常工作。 - Jeff

Vuetify 默认使用Material Design Icons而不是 Material Icons。 - Sandy

谢谢您的评论，非常有帮助。在阅读了您的评论之前，我不知道 Material Icons 和 Material Design Icons 之间有区别，我以为它们是同一件事，只是名称不同。 - Magno Alberto

这是默认导入的CSS，您可以查看所有图标列表：https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.css正如其他人所指出的那样，它包括一些Material Icons，但并非全部。 - Chris Bauer

Answer 2

我认为关于Vuetify列表图标的答案在下面这个网站： https://materialdesignicons.com/ 注意：第一个图标是“ab-testing”，因此使用以下方式： {mdi-ab-testing} 以此类推。

引用： < p>mdi（材料设计图标）+图标名称

祝你好运...

- amir mohseni

Answer 3

尝试这样做：<v-icon>mdi-home</v-icon>

- arielkollross

Answer 4

更改内部名称即可获得不同的图标：

<v-icon>home</v-icon>
<v-icon>close</v-icon>

从以下链接中找到适合您应用的名称： https://material.io/tools/icons/?style=baseline

- ahgood

Answer 5

// Use this code.
    <v-btn color="error" fab small dark
      @click="yoursFunc()">
      <v-icon>list</v-icon>
    </v-btn>

从这个官方文档中可以看到，vuetifyjs使用Material Icons。

v-icon组件提供了大量的图标，为您的应用程序的各个方面提供上下文。Vuetify图标使用Google的Material Icons字体库。有关所有可用图标的列表，请访问官方Material Icons页面。

- Max Sherbakov