Material Symbols アイコンをダウンロードして配置
Google Material Symbols Outlined (weight 400) のSVGアイコンを公式リポジトリからダウンロードし、プロジェクトに追加する。
Material Symbols で検索し、アイコン名を確認する（例: info, settings, close）。
curl -sL "https://raw.githubusercontent.com/google/material-design-icons/master/symbols/web/{name}/materialsymbolsoutlined/{name}_24px.svg" -o "src/assets/icons/{name}.svg"
{name} をアイコン名に置換する。
fill="currentColor" を追加ダウンロードしたSVGの <svg タグに fill="currentColor" を追加する。
変更前:
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
変更後:
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="currentColor">
<script setup lang="ts">
import InfoIcon from "@/assets/icons/info.svg?component";
</script>
<template>
<InfoIcon />
</template>
SVGコンポーネントはVueコンポーネントとして振る舞うため、v-html は不要。CSSの color プロパティでアイコン色を制御できる。
| ファイル名 | Material Symbol名 | 用途 |
|---|---|---|
info.svg | info | 情報ボタン |
settings.svg | settings | 設定ボタン |
close.svg | close | ダイアログ閉じる |
content_copy.svg | content_copy | コピー |
check.svg | check | チェックマーク |
visibility.svg | visibility | 表示切替 |