サルでもわかるWEBプログラミング

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。

===== 181218 VueでVuetify導入するも、mdiアイコンが表示されない =====


たとえば、

https://qiita.com/reflet/items/88dc298c8887ad517845
{{:z_blog:2018:pasted:20181218-223145.png}}

Codepenのアイコン <v-icon large>mdi-codepen</v-icon> が表示されていない。

https://github.com/vuetifyjs/vuetify/issues/2599　によると、
{{:z_blog:2018:pasted:20181218-223400.png}}

Material Iconsと、Material Design Icons(MDI)は異なるものらしい。

https://material.io/tools/icons/
{{:z_blog:2018:pasted:20181218-224002.png}}

https://materialdesignicons.com/
{{:z_blog:2018:pasted:20181218-223655.png}}

アイコンめんどくさい、、、

Material Iconsは、index.htmlの</head>の直前に、以下のコードを読み込んでいた。

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

Material Design Icons(MDI)は、以下をnpm installするのかな？CDNはないのかな？

https://www.npmjs.com/package/vue-material-design-icons


===== MDIをVue.jsで使うためには？ =====
https://www.npmjs.com/package/vue-material-design-icons

に従うらしいが、すごく面倒そう。試していない。。。