Unable to display SVG inside Grid Column Template

[Antony]

In CSHTML page, I am able to display the icon image that is in SVG.

<svg class="em-c-btn__icon " data-em-icon-path="dist/unity-1.1.0/images/em-icons.svg">
         <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="dist/unity-1.1.0/images/em-icons.svg#icon-link"></use>
</svg>

However, it is not being displayed when it is bounded to Template column in Grid. 

Code for CSHTML

@(Html.Kendo().Grid<UserModel>()
        .Name("Grid")
        .Columns(columns =>
        { columns.Template("#=actionTemplate(data)#").Title("Actions").Media("(min-width: 450px"); })))

<script id="action-template" type="text/x-kendo-template">
    <svg class="em-c-btn__icon " data-em-icon-path="dist/unity-1.1.0/images/em-icons.svg">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="dist/unity-1.1.0/images/em-icons.svg#icon-link"></use>
        </svg>
</script>

<script>
    var actionTemplate = kendo.template($("#action-template").html());
</script>

Please advise

[Petar]

Hi Antony,

Try escaping the "#" sign in the template as follows:

<script id="action-template" type="text/x-kendo-template">
    <svg class="em-c-btn__icon " data-em-icon-path="dist/unity-1.1.0/images/em-icons.svg">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="dist/unity-1.1.0/images/em-icons.svg\\#icon-link"></use>
        </svg>
</script>

The escaping is achieved by adding two backslashes before the "#" sign. 

Let me know if this resolves the issue. 

Regards,
Petar
Progress Telerik