[SOLVED] How to edit the ion-icon color inside Ion-toast?

Ionic Framework Ionic React
1

Screenshot 2024-05-30 at 11.22.22
Screenshot 2024-05-30 at 11.22.22872×1504 29.7 KB

I would like to be able to change the color of the icon in Ion-toast.

I tried to add cssClass property to the <IonToast Element, then edit the variables.css like so

        <IonToast
            mode="ios"
            swipeGesture="vertical"
            message={'message'}
            duration={1000}
            color={"light"}
            cssClass='toastWithColor'
            icon={checkmark}
            buttons={[
                {
                    text: translatedTexts.dismiss,
                    role: 'cancel',
                },
            ]}
        />

.toastWithColor ion-icon {
color: red !important;
}

I didnt succeed to select the icon only. I could change the color of all the elements (icon, text, button) if I just change the color of .toastWithColor without selecting ion-icon.

Please help !

EDIT :slightly_smiling_face:
I found the solution :

ion-toast.toastWithColor::part(icon) {
color:var(--ion-color-primary);
font-size: 1.5rem;
}