O novo mdui 2, baseado em Material Design 3 e Web Components, já foi lançado, veja a documentação do mdui 2.

Ícone

O mdui possui 932 ícones integrados do Material Icons. Além desses, você também pode usar ícones de terceiros.

Leitura relacionada

Diretrizes de design do Material Design: Estilo - Ícones

Exemplos de uso

Listamos todos os ícones do Material Icons, onde você pode clicar diretamente em um ícone para copiar seu código.

Exemplo

<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 o ícone for usado em botões planos ou botões flutuantes, também é necessário adicionar a classe mdui-icon-left ou mdui-icon-right para posicionar o ícone à esquerda ou à direita do botão.

Exemplo

<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 ícones de terceiros

Para usar bibliotecas de ícones de terceiros, você primeiro precisa importar o arquivo CSS da biblioteca correspondente.

Em seguida, adicione a classe mdui-icon e o nome da classe da biblioteca de ícones no elemento <i>.

O exemplo abaixo utiliza ícones do ionicons.

Exemplo

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

Nome da classe	Descrição
`.mdui-icon`	Define o elemento de ícone
`.material-icons`	Define o elemento de ícone do Material Icons
`.mdui-icon-left`	Posiciona o ícone à esquerda do botão
`.mdui-icon-right`	Posiciona o ícone à direita do botão

Tipografia

Mídia