near_me
Erste Schritte
keyboard_arrow_downlayers
Stil
keyboard_arrow_downwidgets
Komponenten
keyboard_arrow_downlocal_mall
Ressourcen
keyboard_arrow_downDas neue mdui 2 auf Basis von Material Design 3 und Web Components ist da. Zur mdui 2 Dokumentation wechseln.
Icons
mdui verfügt über 932 integrierte Material Icons. Zusätzlich zu diesen Icons können Sie auch Icons von Drittanbietern verwenden.
Verwandte Themen
Anwendungsbeispiele
Wir haben alle Material Icons aufgelistet. Sie können direkt auf ein Icon klicken, um dessen Code zu kopieren.
Beispiel
<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>Wenn das Icon in einem Flat Button oder einem Floating Action Button verwendet wird, müssen Sie zusätzlich die Klasse mdui-icon-left oder mdui-icon-right hinzufügen, damit das Icon links oder rechts im Button platziert wird.
Beispiel
<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
>Icon-Bibliotheken von Drittanbietern
Um eine Icon-Bibliothek eines Drittanbieters zu verwenden, müssen Sie zuerst die entsprechende CSS-Datei einbinden.
Fügen Sie dann dem <i>-Element die Klasse mdui-icon sowie den Klassennamen der entsprechenden Icon-Bibliothek hinzu.
Das folgende Beispiel verwendet Icons von ionicons.
Beispiel
<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
>