sweetalert2 changing popup icon colour

Question

I'm trying to change the SweetAlert2 popup icon colour for swal2-error.

I've changed the variable colour in the node package for it, & put the variable in both my components scss & my global scss file, & it won't change worst part is if I go into the inspect element & change the colour there on the

.swal2-icon.swal2-error {
    border-color: #f27474;
}

It will change but again mimick that css in all the relevant files & nothing changes, any help on this would be greatly appreciated.

Mullion

Answer 1

Try adding !important to override any other color definitions you might have.

.swal2-icon.swal2-error {
  border-color: #f27474 !important;
}

Beseem

You my friend are a legend, I'll be honest I've never encountered the !important keyword before I shall look into this now. – Mullion

Answer 2

since the latest versions of SweetAlert2, the option to control the color of the icon is available by using the value iconColor :

swal.fire({
    title: 'your title',
    icon: 'success',
    iconColor: '#30a702',
    showCloseButton: true
});

Rica