SvelteKitでMaterial Design Iconsを使う（svelte-material-icons）

最終更新日: 2025/09/22

阿部 隼也

AIイノベーションズ 代表取締役社長 | x.com/ai_abe_shunya

SvelteKitプロジェクトにアイコンを導入したかったので探したら良さげなライブラリがありました。

svelte-material-icons を利用して、SvelteKitプロジェクトにMaterial Design Icons（MDI）を導入することでアイコンを管理します。

インストール

まずはインストールします。

npm i svelte-material-icons

使い方

アイコンは全てsvelteコンポーネントとして読み込みます。

アイコンを指定してimportします。

たとえば、“MenuIcon”を利用したいときは以下のように書きます。

<script>
 import MenuIcon from 'svelte-material-icons/Menu.svelte';
</script>
 
<div>
 <MenuIcon />
</div>

アイコンの探し方

ちなみに、アイコンは以下の2サイトで検索して見つけるのがオススメです。

MDI Search

Material Symbols and Icons - Google Fonts

スタイルを加える

以下のようにコンポーネントに属性を加えることで、スタイルを調整できます。この例ではcolorとsizeを指定しています。

<div>
 <MenuIcon color="red" size="2em" />
</div>

全てのスタイルオプション

上記以外にもアイコンのスタイリングのためのオプションが用意されています。

<script>
  import Check from "svelte-material-icons/Check.svelte";
</script>
 
<Check {color} {size} {width} {height} {viewBox} {title} {desc} {class} {ariaHidden} {ariaLabel} />