Can't use 3rd party icon with toast

[Tareq Perez]

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?

stackblitz example: https://stackblitz.com/edit/angular-u12ht9

[Prince Oliver]

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 

Sample: https://stackblitz.com/edit/angular-u12ht9-enjpfw  

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

Regards, 

Prince