Iconアイコン

アイコンは一般的な操作を表現するために使用されます。Material Icons アイコンと SVG アイコンの使用をサポートしています。

使用方法

コンポーネントを必要に応じてインポートします：

import 'mdui/components/icon.js';

コンポーネントの TypeScript 型を必要に応じてインポートします：

import type { Icon } from 'mdui/components/icon.js';

使用例：

Material Icons アイコンの使用

このコンポーネントで Material Icons アイコンを使用するには、Material Icons の CSS ファイルを別途インポートする必要があります。Material Icons には Filled、Outlined、Rounded、Sharp、Two Tone の5つのバリエーションがあります。使用するアイコンのバリエーションに応じて、対応する CSS ファイルをインポートしてください：

<!-- Filled -->
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

<!-- Outlined -->
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"
  rel="stylesheet"
/>

<!-- Rounded -->
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons+Round"
  rel="stylesheet"
/>

<!-- Sharp -->
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp"
  rel="stylesheet"
/>

<!-- Two Tone -->
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone"
  rel="stylesheet"
/>

コンポーネントを使用する際は、name 属性にアイコン名を指定し、アイコンのバリエーション名を接尾辞として付けます（Filled バリエーションは接尾辞不要）。以下は delete アイコンの5つのバリエーションの使用例です：

ページ下部の Material Icons アイコン検索 ツールでアイコンを直接検索し、使用したいアイコンをクリックすると、アイコンコードが自動的にクリップボードにコピーされます。

また、mdui は独立したパッケージ @mdui/icons も提供しています。このパッケージ内の各アイコンコンポーネントは独立したファイルであり、アイコンライブラリ全体をインポートせずに必要なアイコンコンポーネントを必要に応じてインポートできます。

SVG アイコンの使用

このコンポーネントは SVG アイコンをアイコンコンテンツとして使用することもサポートしています。コンポーネントの src 属性で SVG アイコンのリンクを指定できます。例：

コンポーネントのデフォルトスロットに SVG の内容を入れることもできます。例：

例

色の設定

<mdui-icon> 要素または親要素の color CSS スタイルを設定して、アイコンの色を変更します。

サイズの設定

<mdui-icon> 要素または親要素の font-size CSS スタイルを設定して、アイコンのサイズを変更します。