How to change icon filling color in toastr

Question

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

Below is for the error message,

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;
}

Walrus

Please share your code... – Bobbi

Answer 1

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.

Nomology

Answer 2

Try to use this sample code to have crimson heart

style.css

#toast-container > .toast-success:before {
    content: "\f004";
    color: crimson;
}

Petta

Answer 3

CSS

        #toast-container > .toast {
            background-image: none !important;
        }

        #toast-container > .toast:before {
            position: relative;
            font-size: 24px;
            line-height: 18px;
            float: left;
            margin-left: -1em;
            color: #FFF;
            padding-right: 0.5em;
            margin-right: 0.5em;

        }
        #toast-container .toast{
            background-color: #1b75bc !important;
        }
        #toast-container> .fa-check , .toast {
            background-color: #328b17 !important;
        }
        #toast-container> .fa-trash , .toast  {
            background-color: #590619 !important;
        }


        .toast-message{
            font-family: Calibri;
        }

JS

          toastr.options = {
            "closeButton": false,
            "debug": false,
            "newestOnTop": false,
            "progressBar": true,
            "positionClass": "toast-top-right",
            "preventDuplicates": false,
            "onclick": null,
            "showDuration": "3000",
            "hideDuration": "1000",
            "timeOut": "5000",
            "extendedTimeOut": "300",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut",
            iconClasses: {
                error: 'fas fa-trash',
                info: 'fa fa-info',
                success: 'fas fa-check',
                warning: 'something',
            },
        };

Sevier

Answer 4

I know this is an old question, but I found a better solution (without re-writing the existing toastr templates icons). If you don't want to change the current icon of 'toastr-success' but want to create new "templates" with different icons - you can use this pass a specific icon class in the JS:

toastr.info("Click To Open", "more text",{iconClass:"toast-custom"});

And then just set the CSS of "toast-custom":

 /* this will set the toastr icon */
 #toast-container > .toast-custom {
    content: "\f00C";
}

/* this will set the toastr style */
.toast-custom {
    background-color: purple;
}

I hope this will help!

Guardianship

Answer 5

Use background-image from my project folder

    #toast-container > .toast-success {
      background-image: url("../src/icon-success.png");
      background-color: #ffffff;
      color: rgb(22, 192, 62);
    }

Pipes