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. 

[Index.html] 
<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. 

[App.component.ts] 
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. 

Regards, 
Prince 


Loader.
Up arrow icon