Icon

Les icônes servent à représenter des actions courantes. Ce composant prend en charge les icônes Material Icons ainsi que les icônes SVG.

Utilisation

Importez le composant :

import 'mdui/components/icon.js';

Importez le type TypeScript correspondant :

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

Exemple d'utilisation :

Utiliser les icônes Material Icons

Pour utiliser les icônes Material Icons avec ce composant, vous devez importer le fichier CSS de Material Icons. Il existe 5 variantes : Filled, Outlined, Rounded, Sharp, Two Tone. Importez le fichier CSS correspondant à la variante que vous souhaitez utiliser :

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

Lors de l'utilisation du composant, passez le nom de l'icône dans l'attribut name en ajoutant un suffixe correspondant à sa variante (pas de suffixe pour la variante Filled). Voici les 5 variantes de l'icône delete :

Vous pouvez utiliser l'outil de recherche d'icônes Material Icons en bas de page. Cliquez sur l'icône souhaitée pour copier automatiquement son code dans le presse-papiers.

De plus, mdui fournit un paquet indépendant @mdui/icons. Chaque icône de ce paquet est un fichier séparé, ce qui permet une importation à la demande sans avoir à importer toute la bibliothèque.

Utiliser des icônes SVG

Ce composant prend également en charge les icônes SVG. Vous pouvez passer le lien de l'icône SVG via l'attribut src. Par exemple :

Vous pouvez également passer le contenu SVG directement dans le slot par défaut. Par exemple :

Exemples

Définir la couleur

Modifiez la propriété CSS color de l'élément <mdui-icon> ou de son parent pour changer la couleur de l'icône.

Définir la taille

Modifiez la propriété CSS font-size de l'élément <mdui-icon> ou de son parent pour changer la taille de l'icône.