Icon on dialog action buttons not showing after upgrading to 2025.1.227

[Rey]

I had the code below in my dialog to show icons in the action buttons.  It worked on version 2023 R3.  After upgrading to 2025.1.227, all it shows is the code (<span>) text.

Code:

@(Html.Kendo().Dialog()
    .Name("LetterPreviewDialog")
    .Title("Letter Preview")
    .Closable(true)
    .Modal(true)
    .ButtonLayout("normal")
    .Visible(false)
    .Events(e=>e.Close("OnLetterPreviewClose"))
    .Actions(a =>
    {
        a.Add().Text("<span class='k-icon k-font-icon k-i-envelop'></span> Send Letter").Primary(true).Action("SendEmail");
        a.Add().Text("<span class='k-icon k-font-icon k-i-cancel'></span> Cancel").Action("CancelEmail");
    }))

Before:

After:

[Ivaylo]

Hi Rey,

Thank you for the details provided.

"As of the 2023 R3 release, the font icons are detached from the Kendo UI Themes CDN. If you use the Kendo UI CDN service to include the Kendo UI theme, to continue using the font icons, add a reference to the following stylesheet into your application: <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css" />"

There are two approaches to add icons to the action buttons of the Telerik Dialog Component.

SVG Icons

This technique uses SVG icons. Follow the Telerik REPL for ASP.NET Example #1 to review the setup. 

To replicate this solution in your app, you might consider to add JavaScript that will define the icons. You could experiment with different names from the icons list to check the result in the example. 

<script>
    $(document).ready(function () {
        var envelopeIcon = kendo.ui.icon({ icon: 'envelop', type: 'svg' }); 
        $('.dialog-envelop-icon').prepend(envelopeIcon); 

        var cancelIcon = kendo.ui.icon({ icon: 'cancel', type: 'svg' });
        $('.dialog-cancel-icon').prepend(cancelIcon);  
    });
</script>

To add corresponding classes to the buttons, use the Actions.Add.CssClass() API:

.Actions(a =>
    {
        a.Add().Text("Send Letter").CssClass("dialog-envelop-icon").Primary(true);
        a.Add().Text("Cancel").CssClass("dialog-cancel-icon");
    })

Font Icons

This technique uses Font icons. The Telerik REPL for ASP.NET Example #2 follows an identical approach as the previously mentioned one.

JavaScript

<script>
    $(document).ready(function () {
        var envelopeIcon = kendo.ui.icon({ icon: 'envelop', type: 'font' }); 
        $('.dialog-envelop-icon').prepend(envelopeIcon); 

        var cancelIcon = kendo.ui.icon({ icon: 'cancel', type: 'font' });
        $('.dialog-cancel-icon').prepend(cancelIcon);  
    });
</script>

View

@{
   var url = "https://unpkg.com/@progress/kendo-font-icons/dist/index.css";
}
<link rel="stylesheet" href="@url" />
// Removed for clarity
.Actions(a =>
    {
        a.Add().Text("Send Letter").CssClass("dialog-envelop-icon").Primary(true);
        a.Add().Text("Cancel").CssClass("dialog-cancel-icon");
    })

In conclusion, there are two approaches to achieving the desired result, based on the Icon API method. You may use whichever suits you more. The emphasis is more on SVG usage because it is the default icon type of the latest versions of the UI themes.

Additionally, there is an existing feature request to expose a property for customizing the icon:

• https://feedback.telerik.com/kendo-jquery-ui/1655922-add-icon-property-to-dialog-action-buttons 

I hope this information was helpful and I look forward to your reply.

Regards,
Ivaylo
Progress Telerik