IconÍcone

O ícone representa ações comuns. Ele suporta ícones do Material Icons e também ícones SVG.

Como usar

Importe o componente quando necessário:

import 'mdui/components/icon.js';

Importe o tipo TypeScript do componente quando necessário:

import type { Icon } from 'mdui/components/icon.js';

Exemplo de uso:

Usar ícones do Material Icons

Para usar ícones do Material Icons por este componente, você precisa importar o arquivo CSS do Material Icons separadamente. O Material Icons possui 5 variantes: Filled, Outlined, Rounded, Sharp, Two Tone. Importe o arquivo CSS correspondente à variante desejada:

<!-- Filled -->
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

<!-- Outlined -->
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"
  rel="stylesheet"
/>

<!-- Rounded -->
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons+Round"
  rel="stylesheet"
/>

<!-- Sharp -->
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp"
  rel="stylesheet"
/>

<!-- Two Tone -->
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone"
  rel="stylesheet"
/>

Ao usar o componente, passe o nome do ícone no atributo name e adicione o sufixo do nome da variante (a variante Filled não precisa de sufixo). Exemplo de uso das 5 variantes do ícone delete:

Você pode pesquisar ícones na ferramenta Pesquisa de ícones do Material Icons na parte inferior da página. Clique no ícone que deseja usar para copiar o código do ícone para a área de transferência.

Além disso, O mdui oferece um pacote independente @mdui/icons, onde cada componente de ícone é um arquivo independente, permitindo que você importe apenas os componentes de ícone necessários, sem precisar importar toda a biblioteca de ícones.

Usar ícones SVG

Este componente também suporta ícones SVG como conteúdo. Você pode passar o link do ícone SVG pelo atributo src. Exemplos:

Você também pode passar o conteúdo SVG no slot padrão do componente. Exemplos:

Exemplos

Definir cor

Modifique a cor do ícone pelo estilo CSS color no elemento <mdui-icon> ou em seu elemento pai.

Definir tamanho

Modifique o tamanho do ícone pelo estilo CSS font-size no elemento <mdui-icon> ou em seu elemento pai.