near_me
Inizia
keyboard_arrow_downlayers
Stile
keyboard_arrow_downwidgets
Componenti
keyboard_arrow_downlocal_mall
Risorse
keyboard_arrow_downÈ disponibile il nuovo mdui 2 basato su Material Design 3 e Web Components, vai alla documentazione di mdui 2.
Icone
mdui integra 932 Icone di Material Icons; oltre a queste, puoi utilizzare anche icone di terze parti.
Letture correlate
Esempio di utilizzo
Abbiamo elencato tutte le Icone di Material Icons, puoi cliccare direttamente sull'icona per copiare il relativo codice.
Esempio
<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>Se l'icona viene utilizzata per un Button piatto o un Floating Action Button, è necessario aggiungere la classe mdui-icon-left o mdui-icon-right affinché l'icona si trovi a sinistra o a destra del Button.
Esempio
<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
>Libreria di icone di terze parti
Per utilizzare librerie di icone di terze parti, è necessario prima includere il file CSS della libreria di terze parti.
Quindi all'elemento <i> aggiungi la classe mdui-icon e il nome della classe della relativa libreria di icone.
L'esempio seguente utilizza le icone di ionicons.
Esempio
<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
>