KendoTreeView and AngularJS: icons are not displayed

Question

Any idea why the icons are not shown in this tree?

this is the HTML:

  <div kendo-tree-view="tree" k-data-source="treeData" k-options="treeOptions"></div>

this is the CSS:

  #tree .k-sprite {
        background-image: url("http://demos.telerik.com/kendo-ui/content/web/treeview/coloricons-sprite.png");
      }

   .rootfolder { background-position: 0 0; }
   .folder { background-position: 0 -16px; }

and this is the javascript;

  $scope.treeData = new kendo.data.HierarchicalDataSource({
            data: [
                { text: "Furniture", icon: "folder", items: [
                    { text: "Tables & Chairs", icon: "folder" },
                    { text: "Occasional Furniture", icon: "folder" }
                ] },
                { text: "Decor", icon: "folder", items: [
                    { text: "Bed Linen", icon: "folder" },
                    { text: "Carpets", icon: "folder" }
                ] }
            ]
        });


  $scope.treeOptions = {
        dataSpriteCssClassField: "icon"
  };

Answer 1

There's nothing with the ID of tree in your DOM.

Try switching #tree to .k-treeview and the icons will show:

Plunker illustrating this here