Shamila Sallay Shamila Sallay - 4 months ago 100
AngularJS Question

How to change icon filling color in toastr

I have toastr success and error messages shown in my application. I changes the colors of the background and the font color. I want to change the icon colors shown in the messages. I have searched everywhere for this but I can't find a way to change the fill color of the icon or at least changing the icon. Below is a screenshot of success message
enter image description here

Below is for the error message,

enter image description here

I want to change the icons shown in these messages of change the filling color of the icons. The code in js file,

.success(function(data) {
toastr.success('Successfully Build ', 'Congratulations!', {
closeButton: true
});
}).error(function(err) {
toastr.error('Cant Build', 'Error', {
closeButton: true
});


In css,

#toast-container > .toast-success {
background-image: none;
background-color: #e9e9e9;
color: black;
}
#toast-container > .toast-error {
background-image: none;
background-color: #e9e9e9;
color: red;
}

Answer

Toaster uses background PNG images (24x24 pixels) for the icon so your best option is simply to replace them with a colored version you prepared beforehand.

Let's say you prepare a 'black checkmark' PNG of the same size, then the CSS will be:

#toast-container>.toast-success {
background-image: url(<insert here the url pointing to your new PNG>)!important;
}

Now as to creating the icon in the color you want, check flaticon.com (or other similar sites). You should be able to find royalty-free icons and download them of the size and color you want.

Comments