I wonder which way of rendering user added css-classes that would be the prefered one. Currently, I am doing this:
which is working well (Icon is a string, which should be a class from a icon-font-family) on the live site, but in the cms "preview", the class name gets rendered instead of added as a class attribute. It looks like the string is escaped and outputed as text instead of rendered as a class. How should this be solved?
Something like this should work:
<i class="icon @Model.Icon" @Html.EditAttributes(m => m.Icon)></i>
This will render the icon directly without any extras in the class attribute and the edit attributes makes it still work with on page editing in edit mode.
Just a reminder... the editing won't work though with this solution, since the CMS will inject the output of the property Icon inside the <i> element when the property is changed by an editor. I would remove the editing attributes completly or create a display template instead which will handle the rendering correctly.