icône vuetify ne s'affiche pas

Question

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

calendrier.vue

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

Je veux que ça ressemble à une icône, pas à du code

Answer 1

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

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

et importez-le dans le fichier main.js

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

Answer 2

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 a été remplacée par mdi-font.

La solution était :

 yarn add @mdi/font

Et dans le fichier main.js (ou plugins/vueitfy.js s'il existe) ajoutez cette ligne en dessous des imports

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

Answer 3

A fonctionné pour moi :

 npm install @mdi/font

puis mettre ceci dans plugins/vuetify.js :

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

Utilisation de "vuetify": "^2.3.19", "vue": "^2.6.12",

Answer 4

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'
    }
]

Answer 5

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

 npm install import @mdi/font

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

 css: ["@mdi/font/css/materialdesignicons.css"]