みんな大好き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.
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.
選択すると右側にコードが出ますので。
コピーします。
ページやコンポーネントにペースト
試しにheader.vueへ入れてみました。


header.vue
表示結果
※左端のシェアアイコンです