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 共有 5 種變體，分別為：Filled、Outlined、Rounded、Sharp、Two Tone，請依照你要使用的圖示變體，引入對應的 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 圖示的連結。例如：

也可以在元件的 default slot 中傳入 SVG 的內容。例如：

範例

設定顏色

設定 <mdui-icon> 元素或父元素的 color CSS 樣式即可修改圖示顏色。

設定大小

設定 <mdui-icon> 元素或父元素的 font-size CSS 樣式即可修改圖示大小。