CODEWITHSUNDEEP
laravelvue.jsvuetify.jslaravel-8
tjallo
tjallo

Reputation: 791

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

I cannot seem to load the material design icons in Vuetify when using it in combination with laravel 8. I have already tried to add them via NPM as shown in this post and I have also tried to load them via the CDN using sass as shown in this post. I am trying to get the icons to show in a basic (non-function as of yet) navbar.

My code currently looks like the following:

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/[email protected]/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,
            },
        },
    },
})

As you can see, the icons/button is rendered and clickable, but it doesn't show the icon:rendered page as of now

Upvotes: 1

Views: 3706

Answers (1)

tjallo
tjallo

Reputation: 791

Turns out all I had to do was include the icon font via a CDN in my layout app.blade.php (base template):

<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">

This did the job:

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/[email protected]/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>

Upvotes: 3

Related Questions