为什么 vuetify 图标不显示？答案

【问题标题】：Why vuetify icon not showing?为什么 vuetify 图标不显示？
【发布时间】：2023-03-21 17:23:01
【问题描述】：

我使用 vuetify 最新版本。我按照本教程https://vuetifyjs.com/en/getting-started/quick-start

在 vue 组件中我尝试这样：

  <v-text-field
    append-icon="mic"
    class="mx-4"
    flat
    hide-details
    label="Search"
    prepend-inner-icon="search"
    solo-inverted
  ></v-text-field>

结果如下：

image

在我的 public/index.html 中是这样的：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>msm-website-appointment</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but msm-website-appointment doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

看起来设计材料已加载。但是为什么图标没有出现？

【问题讨论】：

标签： vue.js material-design vue-component vuetify.js vue-cli

【解决方案1】：

您可能引用了mdi（Material Design Icons 字体）?according to the documentation，而您的v-text-field 使用的是不同的字体（defaults to md in version ^1.5），因此缺少图标。

要解决此问题，您需要添加required icon font，或者如果您选择mdi，请进行以下调整（注意图标属性绑定部分以mdi- 为前缀）：

<v-text-field
  append-icon="mdi-microphone"
  class="mx-4"
  flat
  hide-details
  label="Search"
  prepend-inner-icon="mdi-magnify"
  solo-inverted>
</v-text-field>

附带说明，由于您已使用 Vue CLI 初始化应用程序，因此您不再需要从 CDN 导入图标，因为它们将由构建过程处理，因此请随时将其从您的public/index.html 文件。

【讨论】：

【解决方案2】：

您也可以直接在组件中加载它，以防构建中缺少mdi 包。

  <v-text-field
    :append-icon="icons.mdiMicrophone"
    class="mx-4"
    flat
    hide-details
    label="Search"
    :prepend-inner-icon="icons.mdiMagnify"
    solo-inverted
  />

<script>
import { mdiMicrophone, mdiMagnify } from '@mdi/js'

export default {
    data() {
        return {
            icons: {
                mdiMicrophone
            }
        }
    }
}

【讨论】：