Icon

Il componente Icona rappresenta azioni comuni e supporta sia le Icone Material che le icone SVG.

Utilizzo

Importa il componente:

import 'mdui/components/icon.js';

Importa il tipo TypeScript:

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

Esempio:

Utilizzo delle Icone Material

Per utilizzare le Icone Material, importa il file CSS per la variante desiderata: Filled, Outlined, Rounded, Sharp o Two-Tone.

<!-- 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"
/>

Usa l'attributo name per specificare l'icona, aggiungendo il nome della variante come suffisso (non è necessario alcun suffisso per Filled). Ecco come utilizzare l'icona delete in tutte e 5 le varianti:

Cerca le icone direttamente utilizzando lo strumento Ricerca Icone Material in fondo alla pagina. Fai clic su un'icona per copiarne il codice negli appunti.

mdui fornisce anche un pacchetto autonomo @mdui/icons, con ogni componente icona come file separato. Questo ti permette di importare solo i componenti icona di cui hai bisogno, senza includere l'intera libreria di icone.

Utilizzo di Icona SVG

Il componente supporta le icone SVG. Passa il link dell'icona SVG all'Attributo src:

Oppure, passa il contenuto SVG direttamente nello slot predefinito del componente:

Esempi

Imposta Colore

Cambia il colore dell'icona impostando lo stile CSS color dell'elemento <mdui-icon> o del suo genitore.

Imposta Dimensione

Cambia la dimensione dell'icona impostando lo stile CSS font-size dell'elemento <mdui-icon> o del suo genitore.