Load the path async instead of the whole svg

This means less dom change on load

packages/common/vpu-icon.js

@@ -30,18 +30,12 @@ class Icon extends LitElement {
     } 
 
     render() {
-        let svg = fetch('local/vpu-common/icons/' + this.name + '.json').then(response => {
-            if (!response.ok)
-                throw Error(response.statusText);
-            return response.json().then(data => {
-                return html`
-                    <svg aria-labelledby="title" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="pointer-events: none; display: block; width: 100%; height: 100%;">
-                        <title id="title">${this.name}</title>
-                        <path d=${data} />
-                    </svg>
-                `;
+        let path = fetch('local/vpu-common/icons/' + this.name + '.json')
+            .then(response => {
+                if (!response.ok)
+                    throw Error(response.statusText);
+                return response.json();
             });
-        });
 
         return html`
             <style>
@@ -50,7 +44,10 @@ class Icon extends LitElement {
                 }
             </style>
 
-            ${until(svg)}
+            <svg aria-labelledby="title" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="pointer-events: none; display: block; width: 100%; height: 100%;">
+                <title id="title">${this.name}</title>
+                <path d=${until(path)} />
+            </svg>
         `;
     }
 }