Toolbar Template and New SVG Icons

[Elisa]

With the new SVG icons, how can I migrate the following so the toolbar is rendered correctly when the grid is initialized? Even the demo for the toolbar template is broken with the 2023 SVG icon changes: https://demos.telerik.com/kendo-ui/grid/toolbar-template

<script id="toolbartemplate" type="text/html">
    <div class="flex toolbar">
        <div class="left flex">
            <span class="k-input k-input-sm k-rounded-lg k-input-solid k-grid-search">
                <span class="k-input-icon k-icon k-i-search"></span>
                <input autocomplete="off" placeholder="Search..." title="Search..." class="k-input-inner">
            </span>
            <a role="button" class="k-link k-button k-button-solid-base k-button-solid k-button-sm k-rounded-lg k-flat addrecord" title="Add User"><span id="add-icon" class="k-icon k-i-plus"></span></a>
        </div>
        <div class="right">
            <a role="button" class="k-link k-button k-button-solid-base k-button-solid k-button-sm k-rounded-lg k-flat fa-button resetgrid" href="\#" title="Reset Grid"><span class="k-button-icon k-icon fas fa-redo icon"></span></a>
        </div>
    </div>
</script>

[Nikolay]

Hello Elisa,

I have answered this question in the support thread you have submitted but I will post the reply here so others can benefit from it as well.

This template, indeed, is relevant only when the font icons are used. For the new SVG icons you need to modify the template as follows:

      <script type="text/x-kendo-template" id="template">
      <div class="refreshBtnContainer">
				<button role="button" class="k-pager-refresh k-link k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-flat k-icon-button" title="Refresh" aria-label="Refresh">
					<span class="k-icon k-svg-icon k-svg-i-arrow-rotate-cw" aria-hidden="true">
  					<svg viewBox="0 0 512 512" focusable="false" xmlns="http://www.w3.org/2000/svg">
    					<path d="M480 288c0 123.7-100.3 224-224 224S32 411.7 32 288 132.3 64 256 64V0l160 96-160 96v-64c-88.2 0-160 71.8-160 160s71.8 160 160 160 160-71.8 160-160c0-29.1-7.8-56.4-21.5-80l55.5-32c19.1 32.9 30 71.2 30 112z">
        			</path>
        		</svg>
        	</span>
        </button>
       </div>

        <div class="toolbar">
            <label class="category-label" for="category">Show products by category:</label>
            <input type="search" id="category" style="width: 150px"/>
        </div>
      </script>

Dojo demo: https://dojo.telerik.com/oJuxEfux

Regards,
Nikolay
Progress Telerik