[Nuxt.js]2.9以上 Google material icon(マテリアルアイコン)を使う

nuxtjs

久しぶりにみんな大好きGoogle fonts.のmaterial icon(マテリアルアイコン) をNuxt(@nuxt/cli v2.15.8)で使おうと思ったら、変なところでハマりました。
やり方は全部こちらに書いてありますが、インストールするパッケージを間違えたので備忘録としてまとめておきます。

https://google-fonts.nuxtjs.org/setup

2.9以下はこちらを参照ください。

パッケージをインストール

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

yarn add nuxt-material-design-icons-iconfont
// Or npm:
npm install nuxt-material-design-icons-iconfont

nuxt.config.jsに追記

modules: [
  'nuxt-material-design-icons-iconfont',
],

head内linkへの設定は適用されませんでした。何でだろう。

    {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/icon?family=Material+Icons',
    },

vueファイルに書く

 <span class="material-icons">chevron_right</span>

参考
How to use material design icons in nuxt | stack overflow

スタイルの変更などはこちらで詳しく解説されています。
Material Icons(Google Font Icons)の使い方を解説!表示されない時に確認すべきポイントも

Author: Noreen

どうも、こんにちは。 国外をフラフラフラフラしながら仕事をしていましたが、コロナもあり自粛中です。現在は米カリフォルニアベイエリアでカロリー摂取の日々。 ブログではどこかの誰かの役に立つかもしれない情報を気ままに更新しています。