web-dev-qa-db-ja.com

vuetifyアイコンが表示されない

使っています vue.jsおよびvuetify。アイコンを追加したいのですが、機能しません。 （レンダリングされません）

どうすれば修正できますか？

次のコードを参照してください

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>

コードではなくアイコンのように見せたい

enter image description here

iconsvuetify.js
24
eunhee ju

Vue CLI 3では、srcフォルダにindex.htmlがないので、代わりに

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

main.jsファイルにインポートします

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

Vuetify-loader 1.2.2を介してインストールされたVuetify 2.1.3でこの問題が発生しました

デフォルトのアイコンライブラリがmdi-fontに変更されているため、以前のソリューションは機能しないようです。

解決策は：

yarn add @mdi/font

そして、ファイルplugins/vueitfy.jsで、インポートの下にこの行を追加します

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

Nuxt.jsを使用すると、まったく同じ問題に直面する可能性があります。この問題を解決するには、CSSでマテリアルデザインアイコンを宣言する必要があります。たとえば、次のようにCDNを使用します。

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

VuetifyでNuxtを使用していて、マテリアルアイコンがFirefoxに表示されない場合：

npm install import @mdi/font

次に、nuxt.config.js次のエントリをcssフィールドに追加します。

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

最新のリリース済みドキュメントを読み、index.htmlに以下のコードを含めます

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

参考

0
S Verma