mdi-图标不是 showing/working Laravel 8/Vue 2/Vuetify

Question

与 laravel 8 结合使用时，我似乎无法在 Vuetify 中加载 material 设计图标。我已经尝试通过 NPM 添加它们，如 this post and I have also tried to load them via the CDN using sass as shown in this post 所示。我正在尝试让图标显示在基本（目前还没有功能）导航栏中。

我的代码目前如下所示：

app.scss

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Vuetify
@import "~vuetify/dist/vuetify.min.css";

// @import '~@mdi/font/css/materialdesignicons.min.css';

@import url('https://fonts.googleapis.com/css?family=Material+Icons');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');
@import url('https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css');

Navbar.vue

<template>
  <div>
    <v-app-bar color="deep-purple accent-4" dense dark>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>

      <v-toolbar-title>Page title</v-toolbar-title>

      <v-spacer></v-spacer>

      <v-btn icon>
        <v-icon>mdi-heart</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>

      <v-menu left bottom>
        <template>
          <v-btn icon>
            <v-icon>mdi-dots-vertical</v-icon>
          </v-btn>
        </template>

        <v-list>
          <v-list-item v-for="n in 5" :key="n" @click="() => {}">
            <v-list-item-title>Option {{ n }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </v-app-bar>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log("Component mounted.");
  },
};
</script>

Vuetify.js

import Vue from 'vue'

import Vuetify from 'vuetify'

import 'vuetify/dist/vuetify.min.css'

import colors from 'vuetify/lib/util/colors'

Vue.use(Vuetify)

export default new Vuetify({
    theme: {
        icons: {
            iconfont: 'md',
        },
        dark: false,
        themes: {

            light: {
                primary: colors.purple,
                secondary: colors.grey.darken1,
                accent: colors.shades.black,
                error: colors.red.accent3,
            },
            dark: {
                primary: colors.blue.lighten3,
            },
        },
    },
})

如您所见，icons/button 已呈现且可点击，但未显示图标：

Answer 1

原来我所要做的就是通过 CDN 在我的布局中包含图标字体 app.blade.php（基本模板）：

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">

这完成了工作：

app.blade.php

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vuetify + Vue + Laravel PoC</title>
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">

</head>

<body>
    <div id="app">
        <v-app app>
            <navbar-component></navbar-component>
            @yield('content')
        </v-app>
    </div>
    <script src="{{ asset('js/app.js') }}"></script>
</body>

</html>

mdi-图标不是 showing/working Laravel 8/Vue 2/Vuetify

mdi-icons not showing/working Laravel 8/Vue 2/Vuetify

laravel

vue.js

vuetify.js

laravel-8