Vuetify 图标不显示。它交替显示一个空框答案

【问题标题】：Vuetify icon doesn't show. It displayed a empty box alternativelyVuetify 图标不显示。它交替显示一个空框
【发布时间】：2020-06-14 23:08:32
【问题描述】：

我一直在 laravel 框架上开发一个 SNS 应用程序，例如 Twitter 或 Instagram。我将 Vue.js 和 Vuetify 添加到我的项目中。当我使用 v-icon 时它没有显示，而是显示如下的空框。

在铬：

在 Firefox 中：

这是什么？这是我的代码。

app.js

require(“./bootstrap”);

window.Vue = require(“vue”);

import Vuetify from “vuetify”;
import “vuetify/dist/vuetify.min.css”;
Vue.use(Vuetify);

import “@mdi/font/css/materialdesignicons.css”;

const app = new Vue({
    el: “#app”,
    vuetify: new Vuetify(),
    icons: {
        iconfont: “mdi”
    }
});

home.blade.php

<!doctype html>
<html lang="{{ app()->getLocale() }}">

<head>
    <meta charset="utf-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Home</title>
    <link rel="stylesheet" href="{{ mix('/css/app.css') }}">
</head>

<body>
    <div id="app">
        <v-app>
            <v-content>
                <home-view></home-view>
            </v-content>
        </v-app>
    </div>
    <script src=" {{ mix('js/app.js') }} ">
    </script>
</body>
</html>

home-view.vue

<template>
// some parts are omitted.
~~~~~~
    <span>
        icon:
        <v-btn icon color=“pink”>
        <v-icon>mdi-heart</v-icon>
        </v-btn>
    </span>
~~~~~~
</template>

<script>
~~~~~~~
</script>>

他们有什么问题？老实说，我已经面对这个问题差不多一个星期了。
我尝试了一些东西，但有时它甚至没有显示任何东西，或者有时出现了另一个问题。我只想知道如何正确显示材料设计图标。有谁知道这个问题的原因或解决方案？谢谢。

【问题讨论】：

当我将这些部分添加到 home.blade.php 时，似乎还不错。` fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> cdn.jsdelivr.net/npm/@mdi/font@4.x/css/… " rel="stylesheet">` 但是在没有cdn资源的情况下如何使用图标仍然不确定。

标签： laravel vue.js vuetify.js material-design-icons

【解决方案1】：

现在字体太大了，我们不建议将它用于前端项目。它会给数据计划有限的移动用户带来问题，并大大减慢首次绘画的时间。

我们建议您改用 @mdi/js 包并渲染 SVG 图标。

告诉 vuetify 你想使用@mdi/js：

export default new Vuetify({
  icons: {
    iconfont: 'mdiSvg',
  },
})

然后只导入你需要的图标：

<template>
  <v-icon>{{ svgPath }}</v-icon>
</template>

<script>
  import { mdiAccount } from '@mdi/js'

  export default {
    data: () => ({
      svgPath: mdiAccount
    }),
  }
</script>

通过Vuetify documentation获取更多信息

【讨论】：

很抱歉我没有立即注意到，但我感谢您的具体建议。我正在进行一个新项目，所以我不能很快尝试，但如果它有效，我想稍后报告结果。谢谢。