Can't use 3rd party icon with toast

Thread ID:	Created:	Updated:	Platform:	Replies:
143995	Apr 13,2019 01:38 AM UTC	Apr 15,2019 07:23 AM UTC	Angular - EJ 2	1

Subscribe to this post

Tags: Toast

Tareq Perez

Asked On April 13, 2019 01:38 AM UTC

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

Reply | Reply with quote

Prince Oliver [Syncfusion]

Replied On 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]

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

Reply | Reply with quote

CONTACT US

Can't use 3rd party icon with toast

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US