We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Can't use 3rd party icon with toast

I'm trying to incorporate a font-awesome icon with the toast message but there doesn't seem to be a way to override the default "e-toast-icon e-icons" class. I can't use a custom template because I have dynamic data needs to be incorporated and i don't want to have to dynamically compile the template.

Is there any way to override the entire css class of the icon div?

1 Reply

PO Prince Oliver Syncfusion Team April 15, 2019 07:23 AM UTC

Hello Tareq, 

Thank you for contacting us. 

Third party icons are supported in the Toast component. We have checked your shared example, to use the third-party icons, you need to refer the font-awesome library next to the EJ style reference as shown below. 

<link rel='nofollow' href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" /> 
<!--  Refer the font-awesome library --> 
<link rel="stylesheet" rel='nofollow' href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  

Now, you can refer the font-awesome icons in the toast component using icon property. 

public toasts: { [key: string]: Object }[] = [ 
    { title: 'Success!', cssClass: 'e-toast-success', icon: 'fa fa-check', timeOut: 80000 }, 

We have attached a modified example for your reference, please find it in the following location 

Let us know if you need any further assistance on this. 


Live Chat Icon For mobile
Up arrow icon