mdi 图标未显示/工作 Laravel 8/Vue 2/Vuetify答案

【问题标题】：mdi-icons not showing/working Laravel 8/Vue 2/Vuetifymdi 图标未显示/工作 Laravel 8/Vue 2/Vuetify
【发布时间】：2021-10-25 11:12:56
【问题描述】：

在结合 laravel 8 使用 Vuetify 时，我似乎无法在 Vuetify 中加载材料设计图标。我已经尝试通过 NPM 添加它们，如 this post 所示，我还尝试使用 CDN 通过 CDN 加载它们sass 如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,
            },
        },
    },
})

如您所见，图标/按钮已呈现并可点击，但未显示图标：

【问题讨论】：

尝试将iconfont: 'md' 更改为iconfont: 'mdi'。您当前正在导入 Material Desing Icons (mdi) 和 Material Icons (md)，并且您的 iconfont 指的是 Material Icons。但是你在你的图标前面加上'mdi-'。
感谢您的建议！但不幸的是，它没有成功。

标签： laravel vue.js vuetify.js laravel-8

【解决方案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>

【讨论】：

谢谢。我遇到了同样的问题，您的解决方案奏效了。
@BlakeyUK 不错！