Icons

Les interfaces Sirdata utilisent Material Symbols Rounded comme bibliotheque d’icones principale, avec un weight de 300. Ce choix fournit un vocabulaire visuel large, coherent entre Astro et React, tout en gardant un rendu accessible et suffisamment leger.

Les icones accompagnent une action, un statut ou une categorie. Elles ne remplacent pas un libelle critique et ne doivent pas devenir un langage parallele difficile a apprendre.

Consulter la bibliotheque Material Symbols et le guide officiel Google Fonts.

Configuration

Propriete	Valeur Sirdata	Role
Family	`Material Symbols Rounded`	Style officiel de la bibliotheque
Weight	`300`	Epaisseur de reference
Fill	`0` par defaut	Outline ; `1` uniquement pour un etat actif
Grade	`0`	Ajustement neutre de l’epaisseur
Optical size	`20` a `48`	Ajustement optique selon la taille rendue

Material Symbols expose des axes variables FILL, wght, GRAD et opsz. Sirdata fixe wght a 300 afin de conserver la meme densite visuelle dans les interfaces.

Core icons

Cette selection couvre les besoins recurrents des portails produits et de la documentation. Utiliser le nom officiel Material Symbols en snake_case.

Search search

Recherche globale ou locale.

Settings settings

Configuration et preferences.

Filter filter_alt

Filtrer une liste ou une table.

Add add

Creer ou ajouter un element.

Edit edit

Modifier une ressource existante.

Delete delete

Action destructive avec confirmation.

Sync sync

Synchronisation ou rafraichissement.

Database database

Source, stockage ou donnees.

Visibility visibility

Afficher, consulter ou previsualiser.

Lock lock

Securite, permission ou confidentialite.

Success check_circle

Etat valide ou operation terminee.

Information info

Information contextuelle.

Warning warning

Attention ou risque non bloquant.

Error error

Erreur ou action bloquante.

More more_vert

Actions secondaires dans un menu.

Expand expand_more

Ouvrir une liste ou une section.

Size scale

Les tailles proviennent des tokens semantiques Figma. Material Symbols adapte optiquement le dessin entre 20 et 48 ; les petites tailles Sirdata restent utilisables pour les interfaces denses, mais doivent etre validees visuellement icone par icone.

Token	Valeur	Usage
`--size-icon-tiny`	10px	Micro-indicateur exceptionnel
`--size-icon-xs`	12px	Tag compact, metadata
`--size-icon-sm`	14px	Tag, petite action secondaire
`--size-icon-md`	16px	Tables et interfaces denses
`--size-icon-lg`	18px	Inputs, boutons compacts
`--size-icon-xl`	22px	Navigation, boutons standard
`--size-icon-xxl`	28px	Empty state ou signal important

Les boutons uniquement iconographiques doivent conserver une cible interactive plus grande que l’icone. Une icone de 18px peut vivre dans un bouton de 40px.

Color roles

Token	Usage
`--color-icon-primary`	Icone principale ou action importante
`--color-icon-secondary`	Navigation et actions standard
`--color-icon-muted`	Information secondaire ou disabled
`--color-icon-inverse`	Icone sur surface sombre
`--color-icon-accent`	Accent Sirdata ou etat selectionne

Pour les feedbacks, utiliser les couleurs semantiques de l’etat correspondant. Ne pas utiliser une couleur produit pour transformer une icone generique en signal fonctionnel.

Filled states

Le style rounded reste outline par defaut avec FILL: 0. Utiliser FILL: 1 lorsqu’il renforce un changement d’etat clair : favori actif, navigation selectionnee, checkbox ou statut confirme.

Ne pas melanger outline et filled uniquement pour varier la decoration. Deux icones ayant le meme role doivent conserver le meme traitement.

Naming and selection

Utiliser le nom officiel Material Symbols en snake_case : filter_alt, check_circle, arrow_forward.
Choisir l’icone la plus litterale pour l’action.
Conserver une icone unique pour un meme concept dans tous les produits.
Eviter les icones culturellement ambigues ou trop abstraites.
Documenter toute exception ou icone custom avant son adoption.

Astro

<button class="icon-button" aria-label="Ouvrir les filtres">
  <span class="material-symbols-rounded" aria-hidden="true">
    filter_alt
  </span>
</button>

React

type MaterialIconProps = {
  name: string;
  label?: string;
  filled?: boolean;
};

export function MaterialIcon({ name, label, filled = false }: MaterialIconProps) {
  return (
    <span
      className="material-symbols-rounded"
      aria-hidden={label ? undefined : true}
      aria-label={label}
      style={{ "--icon-fill-local": filled ? 1 : 0 } as React.CSSProperties}
    >
      {name}
    </span>
  );
}

CSS

/* Weight 300, Rounded, sous-ensemble d'icones recommande. */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,300,0..1,0&icon_names=add,check_circle,close,delete,edit,error,filter_alt,info,search,settings,sync,warning&display=block");

.material-symbols-rounded {
  font-family: var(--icon-font-family);
  font-weight: normal;
  font-style: normal;
  font-size: var(--size-icon-xl);
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga";
  font-variation-settings:
    "FILL" var(--icon-fill-local, var(--icon-fill)),
    "wght" var(--icon-weight),
    "GRAD" var(--icon-grade),
    "opsz" var(--icon-optical-size);
}

Pour la production, charger uniquement les ligatures utilisees avec le parametre icon_names, triees alphabetiquement. Cela evite de telecharger toute la bibliotheque.

Do / Don’t

Do	Don’t
Utiliser Material Symbols Rounded weight 300.	Melanger plusieurs familles ou weights dans une meme interface.
Associer un libelle aux actions critiques.	Utiliser une icone seule si son sens n’est pas universel.
Utiliser les tokens de taille et de couleur.	Modifier la taille ou la couleur avec une valeur arbitraire.
Garder une icone stable pour un meme concept.	Utiliser `settings` puis `tune` pour la meme action.
Utiliser filled pour un etat actif explicite.	Melanger filled et outline comme simple decoration.

Accessibilite

Icone decorative : ajouter aria-hidden="true" lorsque le texte adjacent transmet deja l’information.

Bouton icon-only : placer le nom accessible sur le bouton avec aria-label, pas uniquement sur le glyph. Ajouter un tooltip visible au survol et au focus.

Information non exclusive : une icone warning ou error doit etre accompagnee d’un texte ou d’un statut accessible. L’icone seule ne suffit pas.

Cible interactive : conserver une cible d’au moins 40px dans les interfaces produit, meme si l’icone mesure 16 ou 18px.

Contraste : appliquer les tokens --color-icon-* et verifier le contraste sur la surface reelle. Une icone informative doit rester perceptible sans devenir plus forte que le texte principal.