logo标签列表

为什么Vuetify图标不显示？

vue.jsmaterial-designvue-componentvuetify.jsvue-cli
3

我使用的是最新版本的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>

结果如下：

结果如下：

图片

我的 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>

看起来设计素材已经被加载了，但是为什么图标没有出现呢？

3个回答
8
你可能在引用mdi（Material Design Icons 字体），根据文档, 而你的 v-text-field 使用不同的字体（在版本^1.5中默认为md），因此缺少图标。
要解决此问题，您需要添加所需的图标字体，或者如果您选择使用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文件中删除它。
1

要解决您的问题，您应该将mdi作为默认图标集导入。 否则，vuetify将不知道从哪里加载此图标。 要做到这一点，请按照以下步骤操作： 在本文中有更详细的描述：https://www.the-koi.com/projects/how-to-set-up-a-project-with-nuxt3-and-vuetify3-with-a-quick-overview/

  1. 安装

    npm install @mdi/font

  2. 导入

    import* '@mdi/font/css/materialdesignicons.css'

  3. 添加

 const vuetify = createVuetify({ // Replaces new Vuetify(...) in vue3
    theme: {
        defaultTheme: 'dark'
    },
    icons: {
        defaultSet: 'mdi',
        aliases,
        sets: {
            mdi
        }
    }
0

如果构建中缺少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
            }
        }
    }
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接