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

Advertisements
nuxtjsnuxt.js

みんな大好きGoogle fontsではアイコンも利用できますね。私は少し前までfontawesomeを使用していたのですが、最近はちょっと非推奨の環境が増えてきたので、Google fontsのアイコンに鞍替えしました。

以下はnuxt.js2.9以下で実装するための手順です。それ以降はこちらの記事にまとめました。

[Nuxt.js]2.9以上 Google material icon(マテリアルアイコン)を使う
久しぶりにみんな大好きGoogle fonts.のmaterial icon(マテリアルアイコン) をNuxt(@nuxt/cli v2.15.8)で使おうと思ったら、変なところでハマりました。やり方は全部こちらに書いてありますが、インス...

参考

Material Icons Guide  |  Google Fonts  |  Google for Developers
Material Symbols and Icons - Google Fonts
Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.
Advertisements

nuxt.config.jsにリンクを追加

nuxt.config.jsにGoogle Material Iconsのリンクを追加します。


    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/icon?family=Material+Icons',
      },
    ],

Google fontsサイトから使いたいアイコンを取得

下記サイトでアイコンを検索し、任意のアイコンを選択します。

Material Symbols and Icons - Google Fonts
Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.

選択すると右側にコードが出ますので。

material icon

コピーします。

ページやコンポーネントにペースト

試しにheader.vueへ入れてみました。

header.vue

header.vue

表示結果

※左端のシェアアイコンです

タイトルとURLをコピーしました