Toast Icon non shown

[Michele Semprini]

Hi,

I'm trying to use Toast control.

My current problem is that I set Icon = "e-success toast-icons" but only a little square is shown with the Toast in place of the icon

What could be my error?

thanks a lot, michele

[Vinitha Jeyakumar]

Hi Michele, 

 

 

Greetings from Syncfusion support, 

 

 

Please ensure whether you have added the CSS content style for the Icon class and also check the themes configuration for Syncfusion controls in Blazor projects. We have also prepared a sample for your reference, 

 

Code snippet: 

<div class="col-lg-12 control-section toast-default-section"> 

    <SfToast ID="toast_default" @ref="ToastObj" Title = "Success!" Content="Your message has been sent successfully." CssClass="e-toast-success" Icon="e-success toast-icons" Timeout="5000" > 

        <ToastPosition X="@ToastPosition"></ToastPosition> 

    </SfToast> 

    <div class="col-lg-12 col-sm-12 col-md-12 center"> 

        <div id="toastBtnDefault" style="margin: auto;text-align: center"> 

            <button class="e-btn" @onclick="@ShowOnClick">Show Toasts</button> 

            <button class="e-btn" @onclick="@HideOnClick">Hide All</button> 

        </div> 

    </div> 

</div> 

<style> 

    .toast-icons.e-success::before { 

        content: "\e701"; 

    } 

</style> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/171083/ze/Toast_icon-1621727964 

 

Getting-Started Documentation: https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio 

 

Regards, 

Vinitha 

[Michele Semprini]

Thank's a lot for the sample code,

I'm trying to realize a generic component and I had effectively a problem (nowith css

m.

[Vinitha Jeyakumar]

Hi Michele, 

 

 

On further validating the reported query, we found that the issue occurred due to the wrong CSS content added to the CSS Class for "e-success toast-icons". We need to add these icons based on the Themes we have used. Here we have created an example using material theme. 

 

Code snippet: 

<SfToast @ref="ToastObj" CssClass="e-toast-success" Icon="e-success toast-icons" Timeout="0"> 

            <ToastTemplates> 

                <Title> Conference Room 01 / Building 135 10:00 AM-10:30 AM </Title> 

                <Content> Adaptive Tiles Meeting </Content> 

            </ToastTemplates> 

            <ToastPosition X="Right"></ToastPosition> 

 </SfToast> 

<style> 

.toast-icons.e-success::before { 

    content: "\e90b"; 

} 

</style> 

 

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

 

Please refer the below link for icons library, here you can find the icons based on your required themes. 

https://blazor.syncfusion.com/documentation/appearance/icons 

 

Regards, 

Vinitha