Close icon is not shown after the last update because of changed SCSS probably

[Stanislav Gordenko]

I use scss to customize my web-project. After the last Syncfusion blazor controls update the close sign of toast was lost. It is probably because the Syncfusion scss files which I use for customization are out of date. I had the same question few months ago.

Please, publish your new scss and send me the link.

[Indrajith Srinivasan]

Hi Stanislav,

Greetings from Syncfusion support,

We have validated your reported query, Are you using the styles from the below theme studio link ?

https://blazor.syncfusion.com/themestudio/?theme=bootstrap5

Regards,

Indrajith

[Stanislav Gordenko]

I use styles from Bootstrap 4, but I can move to Bootstrap 5 freely.

[Indrajith Srinivasan]

We suspect the reported issue occurs due to missing ej2-icons import. While importing SCSS styles in SCSS file, you also need to add “ej2-icons/styles/{{theme-name}}.scss” after the component styles are imported. Then only icons are able to load in our application. We have prepared also sample for your reference with SfToast component.

wwwroot/styles/custom.scss

 

@import 'ej2-base/styles/bootstrap4.scss'; 

@import 'ej2-buttons/styles/bootstrap4.scss'; 

@import 'ej2-popups/styles/bootstrap4.scss'; 

@import 'ej2-notifications/styles/bootstrap4.scss'; 

@import 'ej2-icons/styles/bootstrap4.scss'; 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfToast_closeIcon951450247