Zcela nové mdui 2 založené na Material Design 3 a Web Components bylo vydáno, přejděte na dokumentaci mdui 2.

Ikony

mdui obsahuje 932 ikon z Material Icons a kromě těchto ikon můžete používat i ikony třetích stran.

Související čtení

Designové zásady Material Design: Styl - Ikona

Příklad použití

Uvedli jsme všechny ikony Material Icons, můžete přímo kliknout na ikonu a zkopírovat si kód ikony.

Příklad

<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>

Pokud se ikona používá v plochém nebo plovoucím tlačítku, musíte navíc přidat třídu mdui-icon-left nebo mdui-icon-right, aby se ikona umístila vlevo nebo vpravo od tlačítka.

Příklad

<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
>

Knihovna ikon třetích stran

Chcete-li používat knihovnu ikon třetích stran, musíte nejprve importovat soubor CSS knihovny ikon třetích stran.

Poté přidejte třídu mdui-icon a příslušnou třídu knihovny ikon do prvku <i>.

Příklad níže používá ikony z ionicons.

Příklad

<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
>

Seznam CSS tříd

Název třídy	Popis
`.mdui-icon`	Definuje prvek ikony.
`.material-icons`	Definuje prvek ikony Material Icons.
`.mdui-icon-left`	Umístí ikonu vlevo od tlačítka.
`.mdui-icon-right`	Umístí ikonu vpravo od tlačítka.

Typografie

Média