みんな大好き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）で使おうと思ったら、変なところでハマりました。やり方は全部こちらに書いてありますが、インス...
nolyc.net
2022.12.24
参考
Material Icons Guide | Google Fonts | Google for Developers
developers.google.com
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.
fonts.google.com
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.
fonts.google.com
選択すると右側にコードが出ますので。
コピーします。
ページやコンポーネントにペースト
試しにheader.vueへ入れてみました。
header.vue
表示結果
※左端のシェアアイコンです
