文書の過去の版を表示しています。
06.vuetifyでアイコンを利用
リンク
https://vuetifyjs.com/ja/components/icons
v-iconコンポーネント
Vuetifyのアイコンは、GoogleのMaterial Iconsライブラリを使用します。 全ての利用可能なアイコンのリストは、公式のMaterial Iconsページをご覧ください。
(1)公式のMaterial Icons
https://material.io/tools/icons/
(2)Font Awesomeアイコン
https://fontawesome.com/icons?from=io
Font Awesome のアイコンの利用をサポートしています。アイコン名にfa-プレフィックスを付与するだけで使用できます。あなたのプロジェクトにFont Awesomeを導入しておく必要があるので注意して下さい。
(3)Material Design Icons
https://www.npmjs.com/package/vue-material-design-icons
Material Design Iconsのアイコンの利用をサポートしています。アイコン名にmdi-プレフィックスを付与するだけで使用できます。あなたのプロジェクトにMaterial Design Iconsを導入しておく必要があるので注意して下さい。
Font Awesomeアイコンの導入方法
https://fontawesome.com/start
へ行き、リンクをindex.htmlのhead内に記載する。
実際にアイコンを使用するときは、
https://fontawesome.com/icons?d=gallery
からアイコン(フリーのもの)を探してから、以下を参考に記載。
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
Material Design Iconsアイコンの導入方法