Pourquoi remplir la propriété css ne fonctionne pas pour l’icône LWC

Lightning Web Component fournit des centaines d’icônes standard pour choisissez dans cette liste. Et des composants Web Lightning comme icône de foudre ou bouton-icône peut être utilisé pour choisir ces icônes.

Si nous voulons changer la couleur d’arrière-plan de ces icônes, seules les couleurs que nous avons sont le vert, le jaune, le rouge ou le gris selon leur succès de variante, avertissement, erreur ou inverse.

Si jamais vous essayez de changer la couleur de ces icônes en utilisant la propriété fill, vous seriez déçu. Lightning Web Component a utilisé shadow DOM pour encapsuler les composants du monde extérieur, le même principe ici nous restreint à changer la couleur d’arrière-plan des icônes.

Essayez vous-même [Not Working]

C’est ce que j’ai essayé et qui n’a pas fonctionné

Fichier CSS

.redColor{
    fill : #FF0000;
}

Solution – Couleur d’arrière-plan personnalisée pour les icônes LWC

Étape 1 :

Faites un clic droit sur l’icône où vous voulez changer la couleur de fond et cliquez sur inspecter

Étape 2 :

Copiez la balise svg et collez-la dans votre éditeur et ajoutez css. N’oubliez pas d’ajouter la balise div en tant que parent pour contrôler la taille des icônes.

et fichier CSS

.redColor{
    fill : #FF0000;
}
.iconContainer{
    width : 50px;
    height:50px;
    display:inline-block;
}

Essayez vous-même – URL du terrain de jeu fonctionnel

Conclusion :

Ce n’est peut-être pas exactement ce que vous recherchez, mais vous pouvez effectuer presque toutes les opérations icône de foudre ou bouton-icône pouvez faire, ajoutez simplement le gestionnaire d’événements onclick, les propriétés css, etc. et vous êtes prêt à partir.