Search code examples
javascriptviewiconsdevextremetabslideout

How to set icon in dxSlideOut,Devextreme

I've used dxslideout in some parts of the Devextreme basic project

.dxView 

<div data-bind="dxSlideOut: {
dataSource: musteriNavItems
}"> 
.
. 
</div>

javascript 

musteriNavItems = [
{ action: "Profil", icon: "profil", text: "Profil" },
{ icon: "info", text: "Çıkış" }
];

These codes work.Text appears in dxSlideOut design,but icons do not appear on this design. How do I add icons beside the text?

Solution

  • The default dxSlideOut item template does not support the 'icon' field. So, you can use the menuTemplate option to define icon for a menu item.

    <div data-options="dxTemplate:{ name:'menuItem' }">
     <span data-bind="attr: {'class': 'dx-icon-' + icon}"></span>
     <span data-bind="text: text"></span>
</div>

    I've created a small fiddle here - http://jsfiddle.net/dfc2ggck/1/

    Also, be sure your icon exists in the DevExtreme Icon Library.