vuetify icon not showing

vue.js icons vuetify.js
eunhee ju picture eunhee ju · Jul 16, 2019 · Viewed 42.2k times · Source

I am using vue.js and vuetify. I want to add an icon but not working. (not rendered)

How can I fix this?

please refer to the following code

main.js

import Vue from 'vue'
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";

Vue.use(Vuetify);

index.html

<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">

calendar.vue

<i class="material-icons">
keyboard_arrow_down
</i>

I want it to look like an icon, not code

enter image description here

Answer

Hasnat Safder picture Hasnat Safder · Aug 17, 2019

With Vue CLI 3 we have no index.html in the src folder so alternatively you can

npm install --save material-design-icons-iconfont

and import it in the main.js file

import 'material-design-icons-iconfont/dist/material-design-icons.css'

Related questions

How to disable input conditionally in vue.js

I have an input: <input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled"> and in my Vue.js component, I have: .. .. ready() { this.form.name = this.store.name; this.form.validated = …

Read More
forEach is not a function error with JavaScript array

I'm trying to make a simple loop: const parent = this.el.parentElement console.log(parent.children) parent.children.forEach(child => { console.log(child) }) But I get the following error: VM384:53 Uncaught TypeError: parent.children.forEach is not a function …

Read More
Can you force Vue.js to reload/re-render?

Just a quick question. Can you force Vue.js to reload/recalculate everything? If so, how?

Read More