From 7c9c83ecc5f9f835411e21f32df6bdb867e31d18 Mon Sep 17 00:00:00 2001
From: cjong <chris@flash.a2000.nl>
Date: Sat, 18 Feb 2017 15:18:07 +0100
Subject: [PATCH 1/9] Added lazy loading features

---
 loading.svg          |  1 +
 paper-tree-node.html | 27 ++++++++++++++++++++++++---
 2 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 loading.svg

diff --git a/loading.svg b/loading.svg
new file mode 100644
index 0000000..460e05d
--- /dev/null
+++ b/loading.svg
@@ -0,0 +1 @@
+<svg id="loading" width='24px' height='24px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-default"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(0 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(30 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.08333333333333333s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(60 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.16666666666666666s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(90 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.25s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(120 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.3333333333333333s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(150 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.4166666666666667s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(180 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(210 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5833333333333334s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(240 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.6666666666666666s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(270 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.75s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(300 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.8333333333333334s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(330 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.9166666666666666s' repeatCount='indefinite'/></rect></svg>
\ No newline at end of file
diff --git a/paper-tree-node.html b/paper-tree-node.html
index e619117..1575c3d 100755
--- a/paper-tree-node.html
+++ b/paper-tree-node.html
@@ -66,6 +66,16 @@
             padding: 5px;
         }
 
+        .node-preicon.loading:before {
+            content: '';
+            background:url('loading.svg');
+            background-size:cover;
+            position:absolute;
+            width:24px;
+            height:24px;
+            margin-left:-24px;
+        }
+
         .node-preicon, .node-name {
             cursor: pointer;
         }
@@ -101,7 +111,7 @@
         <div class="node-container">
             <div class="node-row">
                 <span class$="{{_computeClass(data.*)}}" on-click="toggleChildren"></span>
-                <iron-icon class="node-icon" icon$="{{_computeIcon(data.icon)}}" on-click="select"></iron-icon>
+                <iron-icon class="node-icon" icon$="{{_computeIcon(data)}}" src$="[[data.src]]" on-click="select"></iron-icon>
                 <span class="node-name" on-click="select">{{data.name}}</span>
                 <template is="dom-if" if="{{actions}}">
                     <paper-menu-button id="actions">
@@ -173,6 +183,13 @@
          * @event select
          */
 
+        /**
+         * The `toggle-children` event is fired whenever a tree node is expanded or collapsed.
+         * This event can be used by the host to lazy load grandchildren.
+         *
+         * @event toggle-children
+         */
+
         /**
          * Returns the necessary classes.
          *
@@ -180,6 +197,7 @@
          * @return {string} The class name indicating whether the node is open or closed
          */
         _computeClass: function(change) {
+            if(change && change.base && change.base.loading) return 'node-preicon loading';
             var open = change && change.base && change.base.open;
             var children = change && change.base && change.base.children;
             return 'node-preicon ' + ((open && children && children.length) ? 'expanded' : children && children.length ? 'collapsed' : '');
@@ -191,8 +209,10 @@
          * @param {string=folder} an icon name.
          * @return {string} the computed icon name.
          */
-        _computeIcon: function(icon) {
-            return icon ? icon : 'folder';
+        _computeIcon: function(data) {
+            //The docs say that scr takes precedence over icon, but this is not true.
+            if(data.src) return '';
+            return data.icon ? data.icon : 'folder';
         },
 
         _actionClicked: function (event) {
@@ -218,6 +238,7 @@
          */
         toggleChildren: function() {
             this.set("data.open", !this.data.open && this.data.children && this.data.children.length);
+            this.fire("toggle-children", this);
         }
 
     });

From 5eaca0b2cde10b85530a95b21a8d49a4e0f38ed3 Mon Sep 17 00:00:00 2001
From: cjong <chris@flash.a2000.nl>
Date: Sun, 19 Feb 2017 15:13:10 +0100
Subject: [PATCH 2/9] Added lazyload-demo

---
 demo/lazyload-demo.html | 152 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 152 insertions(+)
 create mode 100644 demo/lazyload-demo.html

diff --git a/demo/lazyload-demo.html b/demo/lazyload-demo.html
new file mode 100644
index 0000000..218f3a1
--- /dev/null
+++ b/demo/lazyload-demo.html
@@ -0,0 +1,152 @@
+<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/paper-tree/paper-tree.html">
+
+<dom-module id="lazyload-demo">
+    <template>
+        <style>
+            :host {
+                display: block;
+            }
+        </style>
+        <h2>Lazy loading paper-tree demo</h2>
+        <p>Here we use the toggle-children event to lazyload grandchildren.
+            We've added some delay so you can see the effect of the loading icon.
+            These nodes can be expanded indefinitely due to circular references. </p>
+        <paper-tree
+                id="tree4"
+                on-select="nodeSelected"
+                on-toggle-children="toggleChildren"
+                on-show="show"
+                data=[[doc]]
+                actions='[{
+                    "label": "Play",
+                    "event": "show"
+                }]'>
+        </paper-tree>
+    </template>
+
+    <script>
+        Polymer({
+
+            is: 'lazyload-demo',
+
+            properties: {
+                doc:{
+                    type: Object,
+                    value: function() { return {
+                        name: 'Loading...',
+                        loading: true
+                    };}
+                },
+                rootDocId:{
+                    type: String,
+                    value: '_00'
+                },
+                data:{
+                    type: Object,
+                    value: {
+                        _00: {name: 'Cronus', icon:'folder', children:['_01', '_02', '_03', '_04', '_05', '_06']},
+                        _01: {name: 'Zeus', icon:'folder', children:['_07','_08','_09','_10','_11','_12']},
+                        _02: {name: 'Hera', icon:'folder'},
+                        _03: {name: 'Poseidon', icon:'folder', children:['_11','_12']},
+                        _04: {name: 'Hestia', icon:'folder'},
+                        _05: {name: 'Hades', icon:'folder', children:['_09','_10']},
+                        _06: {name: 'Demeter', icon:'folder'},
+                        _07: {name: 'Dionysus', icon:'folder'},
+                        _08: {name: 'Hermes', icon:'folder', children:['_01', '_02', '_03', '_04', '_05', '_06']},
+                        _09: {name: 'Apollo', icon:'folder'},
+                        _10: {name: 'Artemis', icon:'folder'},
+                        _11: {name: 'Athena', icon:'folder', children:['_00']},
+                        _12: {name: 'Ares', icon:'folder'},
+                        _13: {name: 'Hephaestus', icon:'folder', children:['_03', '_05', '_06']}
+                    }
+                }
+            },
+            nodeSelected: function (event){
+                var nodeData = Polymer.dom(event).rootTarget.data;
+                alert('Selected node: ' + nodeData.name);
+            },
+            show: function (event){
+                var nodeData = Polymer.dom(event).rootTarget.data;
+                alert('Show node: ' + nodeData.name);
+            },
+            toggleChildren: function(event){
+                var self = this;
+                var nodeData = Polymer.dom(event).rootTarget.data;
+                //We only have to get grandchildren once
+                if(nodeData.gotGrandChildren) return;
+                nodeData.gotGrandChildren = true;
+                nodeData.children.forEach(function(child){
+                    var updatePath = child.updatePath;
+                    //Get the grandchildren for this child.
+                    self.getChildren(child.children).then(function(childrenArr){
+                        self.addChildrenToTree(childrenArr, updatePath);
+                    });
+                });
+            },
+            ready: function(){
+                var self = this;
+                // Get the root doc for the tree
+                self.getDoc(this.rootDocId).then(function(rootDoc){
+                    var result = {
+                        name: rootDoc.name,
+                        open: false,
+                        updatePath: 'doc',
+                        loading: true,
+                        children: rootDoc.children
+                    };
+                    self.doc = result;
+                    //Get the children for the root.
+                    self.getChildren(rootDoc.children).then(function(childrenArr){
+                        self.addChildrenToTree(childrenArr, 'doc');
+                    });
+                });
+            },
+            addChildrenToTree: function(childrenArr, updatePath){
+                var self = this;
+                var idx = 0;
+                var results = [];
+                childrenArr.forEach(function(child){
+                    results.push({
+                        name: child.name,
+                        open: false,
+                        updatePath: updatePath+'.children.'+idx,
+                        loading: true,
+                        children: child.children
+                    });
+                    idx++;
+                });
+                self.set(updatePath+'.loading', false);
+                self.set(updatePath+'.children', results);
+            },
+            getDoc: function(docId) {
+                //Pretend we're getting data from the data store
+                var self = this;
+                return new Promise(function(resolve, reject) {
+                    window.setTimeout(function() {
+                        resolve(self.data[docId]);
+                    }, 1000);
+                });
+            },
+            getChildren: function(childrenIdArr) {
+                var self = this;
+                //Pretend we're getting data from the data store
+                if(!childrenIdArr) return Promise.resolve([]);
+                return new Promise(function(resolve, reject) {
+                    window.setTimeout(function() {
+                        var resultsArr = [];
+                        childrenIdArr.forEach(function(childId){
+                            resultsArr.push(self.data[childId]);
+                        });
+                        resolve(resultsArr);
+                    }, Math.floor(Math.random() * 2000));
+                });
+            },
+            dataChanged: function(newValue, oldValue) {
+                console.log('doc:', newValue);
+            }
+
+        });
+    </script>
+</dom-module>
+

From 9eac2318a3aef56a25df9680280efb93ae088e63 Mon Sep 17 00:00:00 2001
From: cjong <chris@flash.a2000.nl>
Date: Sun, 19 Feb 2017 17:00:30 +0100
Subject: [PATCH 3/9] Added white-space: nowrap; to node-container

---
 paper-tree-node.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/paper-tree-node.html b/paper-tree-node.html
index 1575c3d..cc5e842 100755
--- a/paper-tree-node.html
+++ b/paper-tree-node.html
@@ -47,6 +47,10 @@
             padding-right: 4px;
         }
 
+        .node-container{
+            white-space: nowrap;
+        }
+
         .node-preicon {
             padding-left: 23px;
         }

From 6e12b8211e763c7e9402212d7b63db23f50fab03 Mon Sep 17 00:00:00 2001
From: cjong <chris@flash.a2000.nl>
Date: Tue, 21 Feb 2017 13:33:47 +0100
Subject: [PATCH 4/9] toggle-children -> toggle, simplified lazyload-demo

---
 demo/lazyload-demo.html | 146 ++++++++++------------------------------
 paper-tree-node.html    |   6 +-
 2 files changed, 37 insertions(+), 115 deletions(-)

diff --git a/demo/lazyload-demo.html b/demo/lazyload-demo.html
index 218f3a1..eaeaff3 100644
--- a/demo/lazyload-demo.html
+++ b/demo/lazyload-demo.html
@@ -9,20 +9,9 @@
             }
         </style>
         <h2>Lazy loading paper-tree demo</h2>
-        <p>Here we use the toggle-children event to lazyload grandchildren.
-            We've added some delay so you can see the effect of the loading icon.
-            These nodes can be expanded indefinitely due to circular references. </p>
-        <paper-tree
-                id="tree4"
-                on-select="nodeSelected"
-                on-toggle-children="toggleChildren"
-                on-show="show"
-                data=[[doc]]
-                actions='[{
-                    "label": "Play",
-                    "event": "show"
-                }]'>
-        </paper-tree>
+        <p>Here we use the 'toggle' event to lazy load grandchildren.<br>
+            We've added some delay so you can see the effect of the loading icon.</p>
+        <paper-tree on-toggle="onToggle" data=[[doc]]></paper-tree>
     </template>
 
     <script>
@@ -33,119 +22,52 @@ <h2>Lazy loading paper-tree demo</h2>
             properties: {
                 doc:{
                     type: Object,
-                    value: function() { return {
+                    value: {
                         name: 'Loading...',
                         loading: true
-                    };}
-                },
-                rootDocId:{
-                    type: String,
-                    value: '_00'
-                },
-                data:{
-                    type: Object,
-                    value: {
-                        _00: {name: 'Cronus', icon:'folder', children:['_01', '_02', '_03', '_04', '_05', '_06']},
-                        _01: {name: 'Zeus', icon:'folder', children:['_07','_08','_09','_10','_11','_12']},
-                        _02: {name: 'Hera', icon:'folder'},
-                        _03: {name: 'Poseidon', icon:'folder', children:['_11','_12']},
-                        _04: {name: 'Hestia', icon:'folder'},
-                        _05: {name: 'Hades', icon:'folder', children:['_09','_10']},
-                        _06: {name: 'Demeter', icon:'folder'},
-                        _07: {name: 'Dionysus', icon:'folder'},
-                        _08: {name: 'Hermes', icon:'folder', children:['_01', '_02', '_03', '_04', '_05', '_06']},
-                        _09: {name: 'Apollo', icon:'folder'},
-                        _10: {name: 'Artemis', icon:'folder'},
-                        _11: {name: 'Athena', icon:'folder', children:['_00']},
-                        _12: {name: 'Ares', icon:'folder'},
-                        _13: {name: 'Hephaestus', icon:'folder', children:['_03', '_05', '_06']}
                     }
                 }
             },
-            nodeSelected: function (event){
-                var nodeData = Polymer.dom(event).rootTarget.data;
-                alert('Selected node: ' + nodeData.name);
-            },
-            show: function (event){
-                var nodeData = Polymer.dom(event).rootTarget.data;
-                alert('Show node: ' + nodeData.name);
+
+            ready: function(){
+                var self = this;
+                // Update the root doc for the tree after 1 second delay
+                window.setTimeout(function() {
+                    var rootDoc = {name:'Cronos', loading:true, updatePath:'doc'};
+                    self.doc = rootDoc;
+                    // Add the children to the root.
+                    self.addChildrenToNode(rootDoc);
+                }, 1000);
             },
-            toggleChildren: function(event){
+
+            onToggle: function(event){
                 var self = this;
                 var nodeData = Polymer.dom(event).rootTarget.data;
-                //We only have to get grandchildren once
+                //We only have to get the grandchildren once
                 if(nodeData.gotGrandChildren) return;
                 nodeData.gotGrandChildren = true;
                 nodeData.children.forEach(function(child){
-                    var updatePath = child.updatePath;
-                    //Get the grandchildren for this child.
-                    self.getChildren(child.children).then(function(childrenArr){
-                        self.addChildrenToTree(childrenArr, updatePath);
-                    });
-                });
-            },
-            ready: function(){
-                var self = this;
-                // Get the root doc for the tree
-                self.getDoc(this.rootDocId).then(function(rootDoc){
-                    var result = {
-                        name: rootDoc.name,
-                        open: false,
-                        updatePath: 'doc',
-                        loading: true,
-                        children: rootDoc.children
-                    };
-                    self.doc = result;
-                    //Get the children for the root.
-                    self.getChildren(rootDoc.children).then(function(childrenArr){
-                        self.addChildrenToTree(childrenArr, 'doc');
-                    });
-                });
-            },
-            addChildrenToTree: function(childrenArr, updatePath){
-                var self = this;
-                var idx = 0;
-                var results = [];
-                childrenArr.forEach(function(child){
-                    results.push({
-                        name: child.name,
-                        open: false,
-                        updatePath: updatePath+'.children.'+idx,
-                        loading: true,
-                        children: child.children
-                    });
-                    idx++;
-                });
-                self.set(updatePath+'.loading', false);
-                self.set(updatePath+'.children', results);
-            },
-            getDoc: function(docId) {
-                //Pretend we're getting data from the data store
-                var self = this;
-                return new Promise(function(resolve, reject) {
-                    window.setTimeout(function() {
-                        resolve(self.data[docId]);
-                    }, 1000);
+                    //Add grandchildren to the child.
+                    self.addChildrenToNode(child);
                 });
             },
-            getChildren: function(childrenIdArr) {
+
+            addChildrenToNode: function(treeNode){
                 var self = this;
-                //Pretend we're getting data from the data store
-                if(!childrenIdArr) return Promise.resolve([]);
-                return new Promise(function(resolve, reject) {
-                    window.setTimeout(function() {
-                        var resultsArr = [];
-                        childrenIdArr.forEach(function(childId){
-                            resultsArr.push(self.data[childId]);
-                        });
-                        resolve(resultsArr);
-                    }, Math.floor(Math.random() * 2000));
-                });
-            },
-            dataChanged: function(newValue, oldValue) {
-                console.log('doc:', newValue);
+                // Wait a couple of seconds to simulate async data retrieval
+                window.setTimeout(function() {
+                    var updatePath = treeNode.updatePath;
+                    var children = [
+                        {name:'Zeus', loading:true, updatePath:updatePath+'.children.0'},
+                        {name:'Apollo', loading:true, updatePath:updatePath+'.children.1'},
+                        {name:'Athena', loading:true, updatePath:updatePath+'.children.2'},
+                        {name:'Poseidon', loading:true, updatePath:updatePath+'.children.3'}
+                    ];
+                    // We use set(updatePath... to trigger the correct valueChange events in the tree
+                    self.set(updatePath+'.loading', false);
+                    self.set(updatePath+'.children', children);
+                }, Math.floor(Math.random() * 2000));
             }
-
         });
     </script>
 </dom-module>
diff --git a/paper-tree-node.html b/paper-tree-node.html
index cc5e842..3e4f0be 100755
--- a/paper-tree-node.html
+++ b/paper-tree-node.html
@@ -188,10 +188,10 @@
          */
 
         /**
-         * The `toggle-children` event is fired whenever a tree node is expanded or collapsed.
+         * The `toggle` event is fired whenever a tree node is expanded or collapsed.
          * This event can be used by the host to lazy load grandchildren.
          *
-         * @event toggle-children
+         * @event toggle
          */
 
         /**
@@ -242,7 +242,7 @@
          */
         toggleChildren: function() {
             this.set("data.open", !this.data.open && this.data.children && this.data.children.length);
-            this.fire("toggle-children", this);
+            this.fire("toggle", this);
         }
 
     });

From e9ad01ba68e4d59d6f9abe269b1e4867f0fe2415 Mon Sep 17 00:00:00 2001
From: cjong <chris@flash.a2000.nl>
Date: Tue, 21 Feb 2017 17:39:58 +0100
Subject: [PATCH 5/9] Added --loading-icon-theme to paper-tree-node

---
 demo/lazyload-demo.html         | 38 ++++++++++++++++++++++++---------
 loading.svg => demo/loading.svg |  0
 paper-tree-node.html            | 18 ++++++----------
 3 files changed, 34 insertions(+), 22 deletions(-)
 rename loading.svg => demo/loading.svg (100%)

diff --git a/demo/lazyload-demo.html b/demo/lazyload-demo.html
index eaeaff3..50d2a67 100644
--- a/demo/lazyload-demo.html
+++ b/demo/lazyload-demo.html
@@ -6,6 +6,16 @@
         <style>
             :host {
                 display: block;
+
+                --loading-icon-theme: {
+                    content: '';
+                    background:url('loading.svg');
+                    background-size:cover;
+                    position:absolute;
+                    width:24px;
+                    height:24px;
+                    margin-left:-24px;
+                };
             }
         </style>
         <h2>Lazy loading paper-tree demo</h2>
@@ -23,8 +33,7 @@ <h2>Lazy loading paper-tree demo</h2>
                 doc:{
                     type: Object,
                     value: {
-                        name: 'Loading...',
-                        loading: true
+                        name: 'Loading...'
                     }
                 }
             },
@@ -33,8 +42,13 @@ <h2>Lazy loading paper-tree demo</h2>
                 var self = this;
                 // Update the root doc for the tree after 1 second delay
                 window.setTimeout(function() {
-                    var rootDoc = {name:'Cronos', loading:true, updatePath:'doc'};
+                    var rootDoc = {name:'Cronos', updatePath:'doc'};
                     self.doc = rootDoc;
+
+                    //var rootNode = self.root;
+                    //TODO find the span that will have the loading class
+                    //self.toggleClass('loading', true, [rootNode]);
+
                     // Add the children to the root.
                     self.addChildrenToNode(rootDoc);
                 }, 1000);
@@ -46,6 +60,7 @@ <h2>Lazy loading paper-tree demo</h2>
                 //We only have to get the grandchildren once
                 if(nodeData.gotGrandChildren) return;
                 nodeData.gotGrandChildren = true;
+
                 nodeData.children.forEach(function(child){
                     //Add grandchildren to the child.
                     self.addChildrenToNode(child);
@@ -56,16 +71,19 @@ <h2>Lazy loading paper-tree demo</h2>
                 var self = this;
                 // Wait a couple of seconds to simulate async data retrieval
                 window.setTimeout(function() {
-                    var updatePath = treeNode.updatePath;
+
+                    var updatePath = treeNode.updatePath+'.children';
                     var children = [
-                        {name:'Zeus', loading:true, updatePath:updatePath+'.children.0'},
-                        {name:'Apollo', loading:true, updatePath:updatePath+'.children.1'},
-                        {name:'Athena', loading:true, updatePath:updatePath+'.children.2'},
-                        {name:'Poseidon', loading:true, updatePath:updatePath+'.children.3'}
+                        {name:'Zeus', updatePath:updatePath+'.0'},
+                        {name:'Apollo', updatePath:updatePath+'.1'},
+                        {name:'Athena', updatePath:updatePath+'.2'},
+                        {name:'Poseidon', updatePath:updatePath+'.3'}
                     ];
+
                     // We use set(updatePath... to trigger the correct valueChange events in the tree
-                    self.set(updatePath+'.loading', false);
-                    self.set(updatePath+'.children', children);
+                    // Simply setting children on the treeNode won't have any effect.
+                    self.set(updatePath, children);
+
                 }, Math.floor(Math.random() * 2000));
             }
         });
diff --git a/loading.svg b/demo/loading.svg
similarity index 100%
rename from loading.svg
rename to demo/loading.svg
diff --git a/paper-tree-node.html b/paper-tree-node.html
index 3e4f0be..e288e0c 100755
--- a/paper-tree-node.html
+++ b/paper-tree-node.html
@@ -22,7 +22,8 @@
 Custom property | Description | Default
 ----------------|-------------|----------
 `--paper-tree-selected-background-color`      | Highlight color for selected node         | `rgba(200, 200, 200, 0.5)`
-`--paper-tree-selected-color`                | Text and icon color for selected node     | `inherit`
+`--paper-tree-selected-color`                 | Text and icon color for selected node     | `inherit`
+`--loading-icon-theme`                        | Theme for loading icon                    | `no default`
 
 @demo
 -->
@@ -42,6 +43,10 @@
             display: inline-block;
         }
 
+        .node-preicon.collapsed.loading:before {
+            @apply(--loading-icon-theme);
+        }
+
         .node-row {
             padding-left: 4px;
             padding-right: 4px;
@@ -70,16 +75,6 @@
             padding: 5px;
         }
 
-        .node-preicon.loading:before {
-            content: '';
-            background:url('loading.svg');
-            background-size:cover;
-            position:absolute;
-            width:24px;
-            height:24px;
-            margin-left:-24px;
-        }
-
         .node-preicon, .node-name {
             cursor: pointer;
         }
@@ -201,7 +196,6 @@
          * @return {string} The class name indicating whether the node is open or closed
          */
         _computeClass: function(change) {
-            if(change && change.base && change.base.loading) return 'node-preicon loading';
             var open = change && change.base && change.base.open;
             var children = change && change.base && change.base.children;
             return 'node-preicon ' + ((open && children && children.length) ? 'expanded' : children && children.length ? 'collapsed' : '');

From 2a10ed1272a360563573311183fe6fb35929e60b Mon Sep 17 00:00:00 2001
From: cjong <chris@flash.a2000.nl>
Date: Tue, 21 Feb 2017 17:55:06 +0100
Subject: [PATCH 6/9] Added --loading-icon-theme to paper-tree-node

---
 paper-tree-node.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/paper-tree-node.html b/paper-tree-node.html
index e288e0c..dbe7a98 100755
--- a/paper-tree-node.html
+++ b/paper-tree-node.html
@@ -43,7 +43,7 @@
             display: inline-block;
         }
 
-        .node-preicon.collapsed.loading:before {
+        .node-preicon.loading:before {
             @apply(--loading-icon-theme);
         }
 

From df0f6fff576df045dc8c0167b1e885210466595c Mon Sep 17 00:00:00 2001
From: Florian Maffini <florian.maffini@3ds.com>
Date: Fri, 24 Feb 2017 16:38:59 +0100
Subject: [PATCH 7/9] refactoring lazy loading appraoch for more genericity

---
 demo/index.html         | 84 ++++++++++++++++++++++++++++++++++++
 demo/lazyload-demo.html | 92 ---------------------------------------
 demo/lazyloading.html   | 96 +++++++++++++++++++++++++++++++++++++++++
 paper-tree-node.html    | 29 ++++++++-----
 4 files changed, 198 insertions(+), 103 deletions(-)
 delete mode 100644 demo/lazyload-demo.html
 create mode 100644 demo/lazyloading.html

diff --git a/demo/index.html b/demo/index.html
index f9bc524..76110ac 100755
--- a/demo/index.html
+++ b/demo/index.html
@@ -18,6 +18,7 @@
 <div class="vertical-section-container centered">
 
     <h3>Basic demo with only one node</h3>
+
     <demo-snippet>
         <template>
             <paper-tree id="tree1"></paper-tree>
@@ -169,6 +170,89 @@ <h3>Complex tree demo</h3>
         </template>
     </demo-snippet>
 
+    <h3>Lazy loading demo</h3>
+    <demo-snippet>
+        <template>
+            <template id="t" is="dom-bind">
+                <style is="custom-style">
+                    #tree {
+                        --paper-tree-preicon-theme: {
+                            content: '';
+                            background:url('loading.svg');
+                            background-size:cover;
+                            position:absolute;
+                            width:24px;
+                            height:24px;
+                            margin-left:-24px;
+                        };
+                    }
+                </style>
+                <paper-tree id="tree" on-toggle="onToggle" data='{"name": "Loading..."}'></paper-tree>
+            </template>
+            <script>
+
+                var template = document.querySelector('#t'),
+                    tree = template.$.tree;
+
+                // Update the root data after 1 second delay
+                window.setTimeout(function() {
+                    tree.data = { name:'Cronos' };
+                    // Fetching root children ...
+                    template.fetchNodeChildren(tree.$.root);
+                }, 1000);
+
+
+                template.onToggle = function(event) {
+                    var target = event.detail;
+
+                    !target.loaded && target.getChildren().forEach(function(child){
+                        // Fetching children ...
+                        this.fetchNodeChildren(child);
+                    }, this);
+                },
+
+                template.setLoadingState = function(node, enabled) {
+
+                    if (enabled) {
+                        node.customStyle['--paper-tree-preicon-theme'] = '\
+                            content: \'\';\
+                            background:url(\'loading.svg\');\
+                            background-size:cover;\
+                            position:absolute;\
+                            width:24px;\
+                            height:24px;\
+                            margin-left:-24px;\
+                        ';
+                    } else {
+                        node.customStyle['--paper-tree-preicon-theme'] = ';';
+                    }
+
+                    node.updateStyles();
+                },
+
+                template.fetchNodeChildren = function(node) {
+
+                    // Set loading styles
+                    this.setLoadingState(node, true);
+
+                    window.setTimeout(function() {
+
+                        node.set('data.children', [
+                            {name: 'Zeus'},
+                            {name: 'Apollo'},
+                            {name: 'Athena'},
+                            {name: 'Poseidon'}
+                        ]);
+
+                        // Reset loading styles
+                        this.setLoadingState(node, false);
+
+                    }.bind(this), Math.floor(Math.random() * 2000));
+                }
+            </script>
+        </template>
+    </demo-snippet>
+
 </div>
 </body>
 </html>
diff --git a/demo/lazyload-demo.html b/demo/lazyload-demo.html
deleted file mode 100644
index 50d2a67..0000000
--- a/demo/lazyload-demo.html
+++ /dev/null
@@ -1,92 +0,0 @@
-<link rel="import" href="../bower_components/polymer/polymer.html">
-<link rel="import" href="../bower_components/paper-tree/paper-tree.html">
-
-<dom-module id="lazyload-demo">
-    <template>
-        <style>
-            :host {
-                display: block;
-
-                --loading-icon-theme: {
-                    content: '';
-                    background:url('loading.svg');
-                    background-size:cover;
-                    position:absolute;
-                    width:24px;
-                    height:24px;
-                    margin-left:-24px;
-                };
-            }
-        </style>
-        <h2>Lazy loading paper-tree demo</h2>
-        <p>Here we use the 'toggle' event to lazy load grandchildren.<br>
-            We've added some delay so you can see the effect of the loading icon.</p>
-        <paper-tree on-toggle="onToggle" data=[[doc]]></paper-tree>
-    </template>
-
-    <script>
-        Polymer({
-
-            is: 'lazyload-demo',
-
-            properties: {
-                doc:{
-                    type: Object,
-                    value: {
-                        name: 'Loading...'
-                    }
-                }
-            },
-
-            ready: function(){
-                var self = this;
-                // Update the root doc for the tree after 1 second delay
-                window.setTimeout(function() {
-                    var rootDoc = {name:'Cronos', updatePath:'doc'};
-                    self.doc = rootDoc;
-
-                    //var rootNode = self.root;
-                    //TODO find the span that will have the loading class
-                    //self.toggleClass('loading', true, [rootNode]);
-
-                    // Add the children to the root.
-                    self.addChildrenToNode(rootDoc);
-                }, 1000);
-            },
-
-            onToggle: function(event){
-                var self = this;
-                var nodeData = Polymer.dom(event).rootTarget.data;
-                //We only have to get the grandchildren once
-                if(nodeData.gotGrandChildren) return;
-                nodeData.gotGrandChildren = true;
-
-                nodeData.children.forEach(function(child){
-                    //Add grandchildren to the child.
-                    self.addChildrenToNode(child);
-                });
-            },
-
-            addChildrenToNode: function(treeNode){
-                var self = this;
-                // Wait a couple of seconds to simulate async data retrieval
-                window.setTimeout(function() {
-
-                    var updatePath = treeNode.updatePath+'.children';
-                    var children = [
-                        {name:'Zeus', updatePath:updatePath+'.0'},
-                        {name:'Apollo', updatePath:updatePath+'.1'},
-                        {name:'Athena', updatePath:updatePath+'.2'},
-                        {name:'Poseidon', updatePath:updatePath+'.3'}
-                    ];
-
-                    // We use set(updatePath... to trigger the correct valueChange events in the tree
-                    // Simply setting children on the treeNode won't have any effect.
-                    self.set(updatePath, children);
-
-                }, Math.floor(Math.random() * 2000));
-            }
-        });
-    </script>
-</dom-module>
-
diff --git a/demo/lazyloading.html b/demo/lazyloading.html
new file mode 100644
index 0000000..607bb37
--- /dev/null
+++ b/demo/lazyloading.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="../paper-tree.html" />
+</head>
+<body>
+
+<template id="t" is="dom-bind">
+    <style is="custom-style">
+        #tree {
+            --paper-tree-preicon-theme: {
+                content: '';
+                background:url('loading.svg');
+                background-size:cover;
+                position:absolute;
+                width:24px;
+                height:24px;
+                margin-left:-24px;
+            };
+        }
+    </style>
+    <h2>Lazy loading paper-tree demo</h2>
+    <p>
+        Here we use the 'toggle' event to lazy load grandchildren.<br>
+        We've added some delay so you can see the effect of the loading icon.
+    </p>
+    <paper-tree id="tree" on-toggle="onToggle" data='{"name": "Loading..."}'></paper-tree>
+    <script>
+
+    var template = document.querySelector('#t'),
+        tree = template.$.tree;
+
+    // Update the root data after 1 second delay
+    window.setTimeout(function() {
+        tree.data = { name:'Cronos' };
+        // Fetching root children ...
+        template.fetchNodeChildren(tree.$.root);
+    }, 1000);
+
+
+    template.onToggle = function(event) {
+        var target = event.detail;
+
+        !target.loaded && target.getChildren().forEach(function(child){
+            // Fetching children ...
+            this.fetchNodeChildren(child);
+        }, this);
+    },
+
+    template.setLoadingState = function(node, enabled) {
+
+        if (enabled) {
+            node.customStyle['--paper-tree-preicon-theme'] = '\
+                content: \'\';\
+                background:url(\'loading.svg\');\
+                background-size:cover;\
+                position:absolute;\
+                width:24px;\
+                height:24px;\
+                margin-left:-24px;\
+            ';
+        } else {
+            node.customStyle['--paper-tree-preicon-theme'] = ';';
+        }
+
+        node.updateStyles();
+    },
+
+    template.fetchNodeChildren = function(node) {
+
+        // Set loading styles
+        this.setLoadingState(node, true);
+
+        // Update the children after a random delay
+        window.setTimeout(function() {
+
+            node.set('data.children', [
+                {name: 'Zeus'},
+                {name: 'Apollo'},
+                {name: 'Athena'},
+                {name: 'Poseidon'}
+            ]);
+
+            // Reset loading styles
+            this.setLoadingState(node, false);
+
+        }.bind(this), Math.floor(Math.random() * 2000));
+    }
+</script>
+</template>
+
+
+</body>
+</html>
diff --git a/paper-tree-node.html b/paper-tree-node.html
index dbe7a98..20c1df6 100755
--- a/paper-tree-node.html
+++ b/paper-tree-node.html
@@ -21,9 +21,10 @@
 
 Custom property | Description | Default
 ----------------|-------------|----------
-`--paper-tree-selected-background-color`      | Highlight color for selected node         | `rgba(200, 200, 200, 0.5)`
-`--paper-tree-selected-color`                 | Text and icon color for selected node     | `inherit`
-`--loading-icon-theme`                        | Theme for loading icon                    | `no default`
+`--paper-tree-selected-background-color`      | Highlight color for selected node           | `rgba(200, 200, 200, 0.5)`
+`--paper-tree-selected-color`                 | Text and icon color for selected node       | `inherit`
+`--paper-tree-preicon-theme`                  | Change theme for node pre-icon (+/- toggle) |
+`--paper-tree-icon-theme`                     | Change theme for node icon                  |
 
 @demo
 -->
@@ -43,8 +44,8 @@
             display: inline-block;
         }
 
-        .node-preicon.loading:before {
-            @apply(--loading-icon-theme);
+        .node-preicon:before {
+            @apply(--paper-tree-preicon-theme);
         }
 
         .node-row {
@@ -83,6 +84,7 @@
             cursor: pointer;
             width: 24px;
             height: 24px;
+            @apply(--paper-tree-icon-theme);
         }
 
         #actions {
@@ -110,7 +112,7 @@
         <div class="node-container">
             <div class="node-row">
                 <span class$="{{_computeClass(data.*)}}" on-click="toggleChildren"></span>
-                <iron-icon class="node-icon" icon$="{{_computeIcon(data)}}" src$="[[data.src]]" on-click="select"></iron-icon>
+                <iron-icon class="node-icon" icon$="{{_computeIcon(data)}}" on-click="select"></iron-icon>
                 <span class="node-name" on-click="select">{{data.name}}</span>
                 <template is="dom-if" if="{{actions}}">
                     <paper-menu-button id="actions">
@@ -208,9 +210,7 @@
          * @return {string} the computed icon name.
          */
         _computeIcon: function(data) {
-            //The docs say that scr takes precedence over icon, but this is not true.
-            if(data.src) return '';
-            return data.icon ? data.icon : 'folder';
+            return data && data.icon ? data.icon : 'folder';
         },
 
         _actionClicked: function (event) {
@@ -225,10 +225,17 @@
         },
 
         /**
-         * Returns the parent node. Returns `null` if root.
+         * Returns the parent tree node. Returns `null` if root.
          */
         getParent: function () {
-            return this.domHost.tagName === 'WOOD-TREE-NODE' ? this.domHost : null;
+            return this.domHost.tagName === 'PAPER-TREE-NODE' ? this.domHost : null;
+        },
+
+        /**
+         * Returns the children tree nodes.
+         */
+        getChildren: function () {
+            return Polymer.dom(this.root).querySelectorAll('paper-tree-node');
         },
 
         /**

From 8c91ec600e702c64ab88c6a71692c53ab2701c16 Mon Sep 17 00:00:00 2001
From: cjong <chris@flash.a2000.nl>
Date: Mon, 27 Feb 2017 03:53:19 +0100
Subject: [PATCH 8/9] Added target.loaded = true;

---
 demo/index.html       | 1 +
 demo/lazyloading.html | 1 +
 2 files changed, 2 insertions(+)

diff --git a/demo/index.html b/demo/index.html
index 76110ac..a6eae5a 100755
--- a/demo/index.html
+++ b/demo/index.html
@@ -206,6 +206,7 @@ <h3>Lazy loading demo</h3>
                     var target = event.detail;
 
                     !target.loaded && target.getChildren().forEach(function(child){
+                        target.loaded = true;
                         // Fetching children ...
                         this.fetchNodeChildren(child);
                     }, this);
diff --git a/demo/lazyloading.html b/demo/lazyloading.html
index 607bb37..5830ab0 100644
--- a/demo/lazyloading.html
+++ b/demo/lazyloading.html
@@ -44,6 +44,7 @@ <h2>Lazy loading paper-tree demo</h2>
         var target = event.detail;
 
         !target.loaded && target.getChildren().forEach(function(child){
+            target.loaded = true;
             // Fetching children ...
             this.fetchNodeChildren(child);
         }, this);

From 0238ea98dcd3c3120fc75e6e37b8fcbb271c118b Mon Sep 17 00:00:00 2001
From: Florian Maffini <florian.maffini@free.fr>
Date: Wed, 1 Mar 2017 12:29:26 +0100
Subject: [PATCH 9/9] fine tuning preicon for easy CSS override

---
 demo/index.html       | 121 ++++++++++++++++++++----------------------
 demo/lazyloading.html |  34 +++++-------
 demo/loading.svg      |   1 -
 demo/playground.html  |  12 +----
 paper-tree-node.html  |  27 +++++-----
 5 files changed, 85 insertions(+), 110 deletions(-)
 delete mode 100644 demo/loading.svg

diff --git a/demo/index.html b/demo/index.html
index a6eae5a..7209ad5 100755
--- a/demo/index.html
+++ b/demo/index.html
@@ -175,82 +175,77 @@ <h3>Lazy loading demo</h3>
         <template>
             <template id="t" is="dom-bind">
                 <style is="custom-style">
+                    @keyframes blinker {
+                      50% { opacity: 0; }
+                    }
+
                     #tree {
-                        --paper-tree-preicon-theme: {
-                            content: '';
-                            background:url('loading.svg');
-                            background-size:cover;
-                            position:absolute;
-                            width:24px;
-                            height:24px;
-                            margin-left:-24px;
+                        --paper-tree-toggle-theme: {
+                            animation: blinker 1s linear infinite;
+                            content: '⧖';
+                            margin-left: -21px;
                         };
                     }
                 </style>
+
                 <paper-tree id="tree" on-toggle="onToggle" data='{"name": "Loading..."}'></paper-tree>
-            </template>
-            <script>
 
-                var template = document.querySelector('#t'),
-                    tree = template.$.tree;
-
-                // Update the root data after 1 second delay
-                window.setTimeout(function() {
-                    tree.data = { name:'Cronos' };
-                    // Fetching root children ...
-                    template.fetchNodeChildren(tree.$.root);
-                }, 1000);
-
-
-                template.onToggle = function(event) {
-                    var target = event.detail;
-
-                    !target.loaded && target.getChildren().forEach(function(child){
-                        target.loaded = true;
-                        // Fetching children ...
-                        this.fetchNodeChildren(child);
-                    }, this);
-                },
-
-                template.setLoadingState = function(node, enabled) {
-
-                    if (enabled) {
-                        node.customStyle['--paper-tree-preicon-theme'] = '\
-                            content: \'\';\
-                            background:url(\'loading.svg\');\
-                            background-size:cover;\
-                            position:absolute;\
-                            width:24px;\
-                            height:24px;\
-                            margin-left:-24px;\
-                        ';
-                    } else {
-                        node.customStyle['--paper-tree-preicon-theme'] = ';';
-                    }
+                <script>
 
-                    node.updateStyles();
-                },
+                    var template = document.querySelector('#t'),
+                        tree = template.$.tree;
 
-                template.fetchNodeChildren = function(node) {
+                    // Update the root data after 1 second delay
+                    window.setTimeout(function() {
+                        tree.data = { name:'Cronos' };
+                        // Fetching root children ...
+                        template.fetchChildren(tree.$.root);
+                    }, 1000);
 
-                    // Set loading styles
-                    this.setLoadingState(node, true);
 
-                    window.setTimeout(function() {
+                    template.onToggle = function(event) {
+                        var target = event.detail;
 
-                        node.set('data.children', [
-                            {name: 'Zeus'},
-                            {name: 'Apollo'},
-                            {name: 'Athena'},
-                            {name: 'Poseidon'}
-                        ]);
+                        !target.loaded && target.getChildren().forEach(function(child){
+                            target.loaded = true;
+                            // Fetching children ...
+                            this.fetchChildren(child);
+                        }, this);
+                    },
 
-                        // Reset loading styles
-                        this.setLoadingState(node, false);
+                    template.setLoadingState = function(node, enabled) {
 
-                    }.bind(this), Math.floor(Math.random() * 2000));
-                }
-            </script>
+                        if (enabled) {
+                            node.customStyle['--paper-tree-toggle-theme'] = 'animation: blinker 1s linear infinite; content: \'⧖\'; margin-left: -21px;';
+                        } else {
+                            node.customStyle['--paper-tree-toggle-theme'] = ';';
+                        }
+
+                        node.updateStyles();
+                    },
+
+                    template.fetchChildren = function(node) {
+
+                        // Set loading styles
+                        this.setLoadingState(node, true);
+
+                        window.setTimeout(function() {
+
+                            // Add children to the node
+                            node.set('data.children', [
+                                {name: 'Zeus'},
+                                {name: 'Apollo'},
+                                {name: 'Athena'},
+                                {name: 'Poseidon'}
+                            ]);
+
+                            // Reset loading styles
+                            this.setLoadingState(node, false);
+
+                        }.bind(this), Math.floor(Math.random() * 2000));
+                    }
+                </script>
+            </template>
         </template>
     </demo-snippet>
 
diff --git a/demo/lazyloading.html b/demo/lazyloading.html
index 5830ab0..32fdbef 100644
--- a/demo/lazyloading.html
+++ b/demo/lazyloading.html
@@ -9,15 +9,15 @@
 
 <template id="t" is="dom-bind">
     <style is="custom-style">
+        @keyframes blinker {
+          50% { opacity: 0; }
+        }
+
         #tree {
-            --paper-tree-preicon-theme: {
-                content: '';
-                background:url('loading.svg');
-                background-size:cover;
-                position:absolute;
-                width:24px;
-                height:24px;
-                margin-left:-24px;
+            --paper-tree-toggle-theme: {
+                animation: blinker 1s linear infinite;
+                content: '⧖';
+                margin-left: -21px;
             };
         }
     </style>
@@ -36,7 +36,7 @@ <h2>Lazy loading paper-tree demo</h2>
     window.setTimeout(function() {
         tree.data = { name:'Cronos' };
         // Fetching root children ...
-        template.fetchNodeChildren(tree.$.root);
+        template.fetchChildren(tree.$.root);
     }, 1000);
 
 
@@ -46,30 +46,22 @@ <h2>Lazy loading paper-tree demo</h2>
         !target.loaded && target.getChildren().forEach(function(child){
             target.loaded = true;
             // Fetching children ...
-            this.fetchNodeChildren(child);
+            this.fetchChildren(child);
         }, this);
     },
 
     template.setLoadingState = function(node, enabled) {
 
         if (enabled) {
-            node.customStyle['--paper-tree-preicon-theme'] = '\
-                content: \'\';\
-                background:url(\'loading.svg\');\
-                background-size:cover;\
-                position:absolute;\
-                width:24px;\
-                height:24px;\
-                margin-left:-24px;\
-            ';
+            node.customStyle['--paper-tree-toggle-theme'] = 'animation: blinker 1s linear infinite; content: \'⧖\'; margin-left: -21px;';
         } else {
-            node.customStyle['--paper-tree-preicon-theme'] = ';';
+            node.customStyle['--paper-tree-toggle-theme'] = ';';
         }
 
         node.updateStyles();
     },
 
-    template.fetchNodeChildren = function(node) {
+    template.fetchChildren = function(node) {
 
         // Set loading styles
         this.setLoadingState(node, true);
diff --git a/demo/loading.svg b/demo/loading.svg
deleted file mode 100644
index 460e05d..0000000
--- a/demo/loading.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="loading" width='24px' height='24px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-default"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(0 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(30 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.08333333333333333s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(60 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.16666666666666666s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(90 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.25s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(120 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.3333333333333333s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(150 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.4166666666666667s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(180 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(210 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5833333333333334s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(240 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.6666666666666666s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(270 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.75s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(300 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.8333333333333334s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(330 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.9166666666666666s' repeatCount='indefinite'/></rect></svg>
\ No newline at end of file
diff --git a/demo/playground.html b/demo/playground.html
index 085d0a6..0a00b16 100644
--- a/demo/playground.html
+++ b/demo/playground.html
@@ -41,17 +41,7 @@ <h3>Media Tree</h3>
     "icon": "weekend",
     "open": true,
     "children": [{
-        "name": "Movies",
-        "children": [{
-            "name": "Interstellar",
-            "icon": "theaters"
-        }, {
-            "name": "The Godfather",
-            "icon": "theaters"
-        }, {
-            "name": "Pulp Fiction",
-            "icon": "theaters"
-        }]
+        "name": "Movies"
     }, {
         "name": "TV Shows",
         "children": [{
diff --git a/paper-tree-node.html b/paper-tree-node.html
index 20c1df6..1c20434 100755
--- a/paper-tree-node.html
+++ b/paper-tree-node.html
@@ -23,7 +23,7 @@
 ----------------|-------------|----------
 `--paper-tree-selected-background-color`      | Highlight color for selected node           | `rgba(200, 200, 200, 0.5)`
 `--paper-tree-selected-color`                 | Text and icon color for selected node       | `inherit`
-`--paper-tree-preicon-theme`                  | Change theme for node pre-icon (+/- toggle) |
+`--paper-tree-toggle-theme`                   | Change theme for node +/- toggle            |
 `--paper-tree-icon-theme`                     | Change theme for node icon                  |
 
 @demo
@@ -44,8 +44,8 @@
             display: inline-block;
         }
 
-        .node-preicon:before {
-            @apply(--paper-tree-preicon-theme);
+        .node-container {
+            white-space: nowrap;
         }
 
         .node-row {
@@ -53,27 +53,26 @@
             padding-right: 4px;
         }
 
-        .node-container{
-            white-space: nowrap;
+        .node-preicon.collapsed,
+        .node-preicon.expanded {
+            padding-left: 0px;
         }
 
         .node-preicon {
-            padding-left: 23px;
+            padding-left: 18px;
         }
 
-        .node-preicon.collapsed,
-        .node-preicon.expanded {
-            padding-left: 0px;
+        .node-preicon:before {
+            margin-right: 5px;
+            @apply(--paper-tree-toggle-theme);
         }
 
         .node-preicon.collapsed:before {
             content: '\002B';
-            padding: 5px;
         }
 
         .node-preicon.expanded:before {
             content: '\2212';
-            padding: 5px;
         }
 
         .node-preicon, .node-name {
@@ -112,7 +111,7 @@
         <div class="node-container">
             <div class="node-row">
                 <span class$="{{_computeClass(data.*)}}" on-click="toggleChildren"></span>
-                <iron-icon class="node-icon" icon$="{{_computeIcon(data)}}" on-click="select"></iron-icon>
+                <iron-icon class="node-icon" icon$="{{_computeIcon(data.icon)}}" on-click="select"></iron-icon>
                 <span class="node-name" on-click="select">{{data.name}}</span>
                 <template is="dom-if" if="{{actions}}">
                     <paper-menu-button id="actions">
@@ -209,8 +208,8 @@
          * @param {string=folder} an icon name.
          * @return {string} the computed icon name.
          */
-        _computeIcon: function(data) {
-            return data && data.icon ? data.icon : 'folder';
+        _computeIcon: function(icon) {
+            return icon ? icon : 'folder';
         },
 
         _actionClicked: function (event) {