Icônes

Le DSML propose une riche bibliothèque de plus de 1 000 icônes issues de Remix Icon, intégrées de manière native via des masques CSS.

Principe de fonctionnement

Les icônes sont intégrées via des masques CSS. Cela permet un contrôle total de la couleur via la propriété CSS color ou le texte environnant (currentColor).

Tailles

Vous pouvez contrôler les dimensions avec les classes modificatrices suivantes :

XS (12px)
.ml-icon--xs

SM (16px)
.ml-icon--sm

MD (24px - défaut)
.ml-icon--md

LG (32px)
.ml-icon--lg

    
HTML

<!-- Standard icon (24px) -->
<span class="ml-icon ml-icon-home-fill" aria-hidden="true"></span>

<!-- Small icon (16px) -->
<span class="ml-icon ml-icon-home-fill ml-icon--sm" aria-hidden="true"></span>

Couleurs & Personnalisation

Elles héritent automatiquement de la couleur du texte courant (currentColor). Vous pouvez modifier leur couleur en appliquant simplement la propriété CSS color :

Mali Vert
color: var(--ml-color-green-500)

Alerte Rouge
color: var(--ml-color-red-500)

Sahel Or
color: var(--ml-color-gold-500)

Catalogue des icônes

Saisissez un mot-clé pour filtrer la bibliothèque d'icônes en temps réel. Cliquez sur le nom d'une icône pour copier son code HTML.