El nuevo mdui 2 basado en Material Design 3 y Web Components ya está disponible. Consulta la documentación de mdui 2 ahora.

Iconos

mdui incluye 932 iconos de Material Icons de forma integrada; además de estos, también puedes utilizar iconos de terceros.

Lectura relacionada

Pautas de diseño de Material Design: Estilo - Iconos

Ejemplos de uso

Hemos recopilado todos los iconos de Material Icons; puedes hacer clic en un icono para copiar su código.

Ejemplo

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

Si el icono se utiliza en un botón plano o en un botón flotante, también es necesario añadir las clases mdui-icon-left o mdui-icon-right para situar el icono a la izquierda o a la derecha del botón.

Ejemplo

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

Bibliotecas de iconos de terceros

Para utilizar una biblioteca de iconos de terceros, primero debes importar el archivo CSS de esa biblioteca.

Luego, añade las clases mdui-icon y el nombre de la clase correspondiente de la biblioteca de iconos al elemento <i>.

El siguiente ejemplo utiliza iconos de ionicons.

Ejemplo

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

Lista de clases CSS

Nombre de clase	Descripción
`.mdui-icon`	Definir un elemento de icono
`.material-icons`	Definir un elemento de icono de Material Icons
`.mdui-icon-left`	Hacer que el icono aparezca a la izquierda del botón
`.mdui-icon-right`	Hacer que el icono aparezca a la derecha del botón

Tipografía

Media