Using SVG icon in Grid custom command

[Eric]

I'm upgrading to Kendo 2024.1.130 and I've been able to get svg icons on a button or other places using this construct.

<div class="ara-footer">
    <button class="k-button k-button-icontext" onclick="cancelEdit(id)">
        <span id="ericIcon"></span>
        Back
    </button>
</div>
<script>
    kendo.ui.icon($("#ericIcon"), { icon: 'camera' });
</script>

That worked flawlessly.  Thank you for the great example.

Now I'm trying to add svg icons to a Custom command in a grid.  This is the code I have previously when using font-icons.

Html.Kendo()
.Grid<TemplateModel>()
.Name("GridApprovedTemplates")
.Columns(columns =>
{
  columns.Command(command =>
    {
      command.Edit().Text(" ").UpdateText(" ").CancelText(" ");
      command.Custom(" ").Text("<span class='k-icon k-i-info'></span> ").Click("refreshApprovedTemplateDetail");
    }).Width(150);

The code that worked for a single button doesn't work here because you can't have the same id on multiple places in the DOM.  How would I go about using an svg icon here?  (Let's use the camera one as an example).

[Ivan Danchev]

Hello Eric,

Instead of the Text option, use the IconClass option of the Grid's custom command. Additionally, use the updated font-icon class: k-i-info-circle

.Columns(columns =>
{
    columns.Command(command =>
    {
        command.Edit().Text(" ").UpdateText(" ").CancelText(" ");
        command.Custom(" ").IconClass("k-icon k-i-info-circle");
    }).Width(150);
})

 

Regards,
Ivan Danchev
Progress Telerik