アイコン

mdui には 932 個の Material Icons が組み込まれています。これらのアイコン以外にも、サードパーティのアイコンを使用できます。

使用例

すべての 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 クラス一覧