IconIcono

El componente Icono se usa para representar acciones comunes y admite iconos de Material Icons y SVG.

Uso

Importa el componente cuando lo necesites:

import 'mdui/components/icon.js';

Importa el tipo TypeScript cuando lo necesites:

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

Uso:

Usar iconos de Material Icons

Si necesitas usar iconos de Material Icons mediante este componente, debes importar por separado el archivo CSS de Material Icons. Material Icons tiene 5 variantes: Filled, Outlined, Rounded, Sharp, Two Tone. Importa el archivo CSS correspondiente según la variante del icono que vayas a usar:

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

Cuando uses el componente, pasa el nombre del icono en el atributo name y añade el sufijo de la variante (la variante Filled no necesita sufijo). A continuación se muestra el uso de las 5 variantes del icono delete:

Puedes buscar iconos directamente en la herramienta de búsqueda de iconos de Material Icons situada al final de la página y hacer clic en el que necesites para copiar automáticamente su código al portapapeles.

Además, mdui también ofrece un paquete independiente @mdui/icons, donde cada componente de icono es un archivo independiente, lo que te permite importar solo los componentes de icono que necesitas, sin tener que importar toda la librería de iconos.

Usar iconos SVG

Este componente también admite el uso de iconos SVG como contenido del icono. Puedes pasar el enlace del icono SVG mediante el atributo src del componente. Por ejemplo:

También puedes pasar el contenido SVG en el slot por defecto del componente. Por ejemplo:

Ejemplos

Establecer color

Modifica el color del icono estableciendo el estilo CSS color en el elemento <mdui-icon> o en su elemento padre.

Establecer tamaño

Modifica el tamaño del icono estableciendo el estilo CSS font-size en el elemento <mdui-icon> o en su elemento padre.