基於 Material Design 3 與 Web Components 的全新 mdui 2 現已發佈，前往查看 mdui 2 開發文件。

圖示

mdui 內建了 Material Icons 的 932 個圖示，除了這些圖示，你還可以使用第三方圖示。

使用範例

我們列出了所有 Material Icons 的圖示，你可以直接點擊圖示複製圖示程式碼。

範例

<i class="mdui-icon material-icons">check_box</i>
<i class="mdui-icon material-icons mdui-text-color-red">check_box</i>
<i class="mdui-icon material-icons mdui-text-color-theme">check_box</i>

如果圖示用於扁平按鈕或浮動按鈕，還需要添加 mdui-icon-left 或 mdui-icon-right 類別，以使圖示位於按鈕左側或右側。

範例

<button class="mdui-btn mdui-color-theme-accent mdui-ripple">
  <i class="mdui-icon mdui-icon-left material-icons">share</i> Share
</button>
<button class="mdui-btn mdui-color-theme-accent mdui-ripple">
  <i class="mdui-icon mdui-icon-right material-icons">share</i> Share
</button>
<button class="mdui-btn mdui-color-yellow mdui-ripple">
  <i class="mdui-icon mdui-icon-right material-icons">share</i> Share
</button>
<button class="mdui-btn mdui-color-yellow" disabled>
  <i class="mdui-icon mdui-icon-right material-icons">share</i>
  Share</button
>

第三方圖示庫

要使用第三方圖示庫，需要先引入第三方圖示庫的 CSS 檔案。

然後在 <i> 元素上添加 mdui-icon 類別以及相應圖示庫的類別名稱。

下面的範例使用的是 ionicons 的圖示。

範例

<link rel="stylesheet" href="ionicons.css" />

<i class="mdui-icon ion-plus-circled"></i>
<i class="mdui-icon ion-plus-circled mdui-text-color-red"></i>
<i class="mdui-icon ion-plus-circled mdui-text-color-theme"></i>
<button class="mdui-btn mdui-ripple mdui-btn-icon">
  <i class="mdui-icon ion-plus-round"></i>
</button>
<button class="mdui-btn mdui-color-theme-accent mdui-ripple">
  <i class="mdui-icon mdui-icon-left ion-share"></i> Share
</button>
<button class="mdui-btn mdui-ripple mdui-fab mdui-color-theme-accent">
  <i class="mdui-icon ion-plus-round"></i></button
>

CSS 類別清單

類別名稱	說明
`.mdui-icon`	定義圖示元素
`.material-icons`	定義 Material Icons 圖示元素
`.mdui-icon-left`	使圖示位於按鈕左側
`.mdui-icon-right`	使圖示位於按鈕右側

排版

媒體

圖示

相關閱讀

使用範例

第三方圖示庫

CSS 類別清單