vuetify 图标未显示 [英] vuetify icon not showing

问题描述

我正在使用 vue.js 和 vuetify.我想添加一个图标，但它没有按预期工作(未呈现).

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

我该如何解决这个问题?

How can I fix this?

请参考以下代码:

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

日历.vue

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

我希望它看起来像一个图标，而不是代码.

I want it to look like an icon, not code.

推荐答案

在 Vue CLI 3 中，src 文件夹中没有 index.html，因此您也可以

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

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

并将其导入ma​​in.js 文件

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

这篇关于vuetify 图标未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！