javascript - Make Arrow symbol to plus(+) and minus(-) in Kendo Tree view -

I'm new to Kendo-UI, my sample code is displayed below in the Kando Tree view. The result is OK It is happening but while expanding and collapsing the menu, it is showing an arrow symbol, instead I want to make it plus (+) and subtract (-):

  Lt; ! DOCTYPE html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Meta charset = "UTF-8" & gt; & Lt; Title & gt; Cando UI snippet & lt; / Title & gt; & Lt; Link rel = "stylesheet" href = "http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" & gt; & Lt; Link rel = "stylesheet" href = "http://cdn.kendostatic.com/2014.2.716/styles/kendo.rtl.min.css" & gt; & Lt; Link rel = "stylesheet" href = "http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" & gt; & Lt; Link rel = "stylesheet" href = "http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" & gt; & Lt; Link rel = "stylesheet" href = "http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" & gt; & Lt; Link rel = "stylesheet" href = "http://cdn.kendostatic.com/2014.2.716/styles/kendo.mobile.all.min.css" & gt; & Lt; Script src = "http://code.jquery.com/jquery-1.9.1.min.js" & gt; & Lt; / Script & gt; & Lt; Script src = "http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js" & gt; & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "treeview" & gt; & Lt; / Div & gt; & Lt; Script & gt; $ ("#viewview") CandoteView ({animation: incorrect, data source: [[text: "foo", item: [[lesson: "bar", item: [[lesson: "car"}]}]}}]}); & Lt; / Script & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

You must be able to customize the previewviews via CSS:

  .k-treeview .k-minus {background: url ('..// images / your_minus_img.png') center center; } .k-treeview .k-plus {background: url ('..// images / your_plus_img.png') center center; }  

See a live sample