Statut
Component checklist
Usage
Si vous souhaitez un icône interactif, reportez vous à la documentation du bouton icône.
<dsa-icon id="icon" name="info" label="informations additionelles"></dsa-icon>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/icon/icon.js';
import type { DSAIcon } from '@ds-autonomie/web-components'
</script>
Code HTML à implémenter pour utiliser l'accordéon
API
Attributs et propriétés
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
label |
Texte pour l'accessibilité qui est lu par les technologies d'assistance (non visible à l'écran). Si aucun label n’est ajouté, l’icône sera considéré comme décoratif. |
string |
'' |
|
name |
Le nom de l'icône à dessiner. Les noms disponibles dépendent de la bibliothèque d'icônes utilisée. Se référer à la partie ci-dessous pour une liste. |
string |
'' |
|
src |
Une URL externe d'un fichier SVG. Assurez-vous de faire confiance au contenu que vous incluez, car il sera exécuté sous forme de code et peut entraîner des attaques XSS |
string |
'' |
Liste des icônes disponibles
Les icônes sont par défaut fournies par une bibliothèque basée sur les Material Icons de Google. Comme mentionné dans la section des fondamentaux, vous pouvez utiliser cette page pour rechercher et sélectionner une icône qui répond à vos besoins.
Cette page facilite encore davantage la recherche d'icônes, car elle indique directement la valeur à renseigner pour l'attribut name.
Dans le DSA, vous avez accès aux variantes d'icônes outlined et filled, avec outlined comme variante par défaut. Pour utiliser la variante filled d'une icône, il vous suffit d'ajouter le suffixe _outlined à son nom (par exemple : access_time_filled).