1

I’ve been developing a SNS application like Twitter or Instagram on laravel framework. I added Vue.js and Vuetify to my project. When I use v-icon it’s not showing, but alternatively, it shows empty box as follows.

In chrome:

enter image description here

And in Firefox:

enter image description here

What is this? Here are my codes.

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

What’s wrong with them? To be honest, I’ve been facing with this matter almost for a week.
I tried something, but sometimes it doesn’t even displayed anything, or sometimes another problem appeared. I only want to know how I can display material design icon correctly. Does anyone know the reason of this issue, or solutions? Thanks.

Shintaro Nomiya
  • 85
  • 1
  • 11
  • When I added these parts to home.blade.php, it seems to be well.` ` but it's still uncertain how to use icons without cdn resources. – Shintaro Nomiya Mar 02 '20 at 19:35

1 Answers1

3

The font is so large now that we don't recommend using it for frontend projects. It causes issues for mobile users with limited data plans and slows down the time to first paint considerably.

We recommend you use the @mdi/js package and render SVG icons instead.

Tell vuetify you want to use @mdi/js:

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

And then import only the icons you need:

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

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

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

Get more info on the Vuetify documentation

James Coyle
  • 9,922
  • 1
  • 40
  • 48
  • I'm sorry I didn't notice immediately, but I appreciate your concrete adviece. I'm on a new project so I can't try it soon, but I'd like to report a result later if It worked. Thanks. – Shintaro Nomiya Mar 07 '20 at 09:05