web-dev-qa-db-fra.com

L'icône vuetify ne s'affiche pas

J'utilise vue.js et vuetify. Je veux ajouter une icône mais ne fonctionne pas. (non rendu)

Comment puis-je réparer cela?

veuillez vous référer au code suivant

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>

Je veux qu'il ressemble à une icône, pas à du code

enter image description here

iconsvuetify.js
24
eunhee ju

Avec Vue CLI 3, nous n'avons pas index.html dans le dossier src donc vous pouvez également

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

et l'importer dans le fichier main.js

import 'material-design-icons-iconfont/dist/material-design-icons.css'
74
Hasnat Safder

Avait ce problème avec Vuetify 2.1.3 installé via le vuetify-loader 1.2.2

Il semble que les solutions précédentes ne fonctionnent pas car la bibliothèque d'icônes par défaut est devenue mdi-font.

La solution était:

yarn add @mdi/font

Et dans le fichier plugins/vueitfy.js ajoutez cette ligne sous les importations

import '@mdi/font/css/materialdesignicons.css'
16
BenB

Vous pouvez rencontrer exactement le même problème si vous utilisez Nuxt.js. Pour résoudre ce problème, vous devez déclarer les icônes Material Design dans votre CSS ... via le CDN, par exemple, comme ci-dessous:

link: [
  { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
    {
      rel: 'stylesheet',
      href:
          'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'
    }
]
5
Begueradj

Si vous utilisez Nuxt avec Vuetify et que les icônes de matériaux n'apparaissent pas dans Firefox:

npm install import @mdi/font

Puis dans votre nuxt.config.js ajoutez l'entrée suivante à votre champ css:

css: ["@mdi/font/css/materialdesignicons.css"]
0
v.s.

Lisez les derniers documents publiés et incluez le code ci-dessous dans votre index.html

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

Référence

0
S Verma