icons also working.

dist/vis.js

@@ -25676,10 +25676,10 @@ return /******/ (function(modules) { // webpackBootstrap
         physics: true,
         hidden: false,
         icon: {
-          iconFontFace: undefined, //'FontAwesome',
+          fontFace: undefined, //'FontAwesome',
           code: undefined, //'\uf007',
-          iconSize: undefined, //50,
-          iconColor: undefined //'#aa00ff'
+          size: undefined, //50,
+          color: undefined //'#aa00ff'
         }
       };
 
@@ -27355,8 +27355,8 @@ return /******/ (function(modules) { // webpackBootstrap
           if (this.width === undefined) {
             var margin = 5;
             var iconSize = {
-              width: Number(this.options.icon.iconSize),
-              height: Number(this.options.icon.iconSize)
+              width: Number(this.options.icon.size),
+              height: Number(this.options.icon.size)
             };
             this.width = iconSize.width + 2 * margin;
             this.height = iconSize.height + 2 * margin;
@@ -27368,17 +27368,17 @@ return /******/ (function(modules) { // webpackBootstrap
       draw: {
         value: function draw(ctx, x, y, selected, hover) {
           this.resize(ctx);
-          this.options.icon.iconSize = this.options.icon.iconSize || 50;
+          this.options.icon.size = this.options.icon.size || 50;
 
           this.left = x - this.width * 0.5;
           this.top = y - this.height * 0.5;
           this._icon(ctx, x, y, selected);
 
 
-          this.boundingBox.top = y - this.options.icon.iconSize * 0.5;
-          this.boundingBox.left = x - this.options.icon.iconSize * 0.5;
-          this.boundingBox.right = x + this.options.icon.iconSize * 0.5;
-          this.boundingBox.bottom = y + this.options.icon.iconSize * 0.5;
+          this.boundingBox.top = y - this.options.icon.size * 0.5;
+          this.boundingBox.left = x - this.options.icon.size * 0.5;
+          this.boundingBox.right = x + this.options.icon.size * 0.5;
+          this.boundingBox.bottom = y + this.options.icon.size * 0.5;
 
           if (this.options.label !== undefined) {
             var iconTextSpacing = 5;
@@ -27393,14 +27393,14 @@ return /******/ (function(modules) { // webpackBootstrap
       },
       _icon: {
         value: function _icon(ctx, x, y, selected) {
-          var iconSize = Number(this.options.icon.iconSize);
+          var iconSize = Number(this.options.icon.size);
           var relativeIconSize = iconSize * this.body.view.scale;
 
           if (this.options.icon.code && relativeIconSize > this.options.scaling.label.drawThreshold - 1) {
-            ctx.font = (selected ? "bold " : "") + iconSize + "px " + this.options.icon.iconFontFace;
+            ctx.font = (selected ? "bold " : "") + iconSize + "px " + this.options.icon.fontFace;
 
             // draw icon
-            ctx.fillStyle = this.options.icon.iconColor || "black";
+            ctx.fillStyle = this.options.icon.color || "black";
             ctx.textAlign = "center";
             ctx.textBaseline = "middle";
             ctx.fillText(this.options.icon.code, x, y);

examples/network/38_node_as_icon.html

@@ -21,17 +21,21 @@
                 groups: {
                     usergroups: {
                         shape: 'icon',
-                        iconFontFace: 'FontAwesome',
-                        icon: '\uf0c0',
-                        iconSize: 50,
-                        iconColor: '#57169a'
+                        icon: {
+                            fontFace: 'FontAwesome',
+                            code: '\uf0c0',
+                            size: 50,
+                            color: '#57169a'
+                        }
                     },
                     users: {
                         shape: 'icon',
-                        iconFontFace: 'FontAwesome',
-                        icon: '\uf007',
-                        iconSize: 50,
-                        iconColor: '#aa00ff'
+                        icon: {
+                            fontFace: 'FontAwesome',
+                            code: '\uf007',
+                            size: 50,
+                            color: '#aa00ff'
+                        }
                     }
                 }
             };
@@ -57,10 +61,12 @@
                 id: 5,
                 label: 'Organisation 1',
                 shape: 'icon',
-                iconFontFace: 'FontAwesome',
-                icon: '\uf1ad',
-                iconSize: 50,
-                iconColor: '#f0a30a'
+                icon: {
+                    fontFace: 'FontAwesome',
+                    code: '\uf1ad',
+                    size: 50,
+                    color: '#f0a30a'
+                }
             }];
 
             // create an array with edges
@@ -98,17 +104,21 @@
                 groups: {
                     usergroups: {
                         shape: 'icon',
-                        iconFontFace: 'Ionicons',
-                        icon: '\uf47c',
-                        iconSize: 50,
-                        iconColor: '#57169a'
+                        icon: {
+                            fontFace: 'Ionicons',
+                            code: '\uf47c',
+                            size: 50,
+                            color: '#57169a'
+                        }
                     },
                     users: {
                         shape: 'icon',
-                        iconFontFace: 'Ionicons',
-                        icon: '\uf47e',
-                        iconSize: 50,
-                        iconColor: '#aa00ff'
+                        icon: {
+                            fontFace: 'Ionicons',
+                            code: '\uf47e',
+                            size: 50,
+                            color: '#aa00ff'
+                        }
                     }
                 }
             };
@@ -134,10 +144,12 @@
                 id: 5,
                 label: 'Organisation 1',
                 shape: 'icon',
-                iconFontFace: 'Ionicons',
-                icon: '\uf276',
-                iconSize: 50,
-                iconColor: '#f0a30a'
+                icon: {
+                    fontFace: 'Ionicons',
+                    code: '\uf276',
+                    size: 50,
+                    color: '#f0a30a'
+                }
             }];
 
 

lib/network/modules/NodesHandler.js

@@ -80,10 +80,10 @@ class NodesHandler {
       physics: true,
       hidden: false,
       icon: {
-        iconFontFace: undefined,  //'FontAwesome',
+        fontFace: undefined,  //'FontAwesome',
         code:  undefined,         //'\uf007',
-        iconSize:  undefined,     //50,
-        iconColor:  undefined     //'#aa00ff'
+        size:  undefined,     //50,
+        color:  undefined     //'#aa00ff'
       }
     };
 

lib/network/modules/components/nodes/icon.js

@@ -18,8 +18,8 @@ class Icon extends NodeUtil {
     if (this.width === undefined) {
       var margin = 5;
       var iconSize = {
-        width: Number(this.options.icon.iconSize),
-        height: Number(this.options.icon.iconSize)
+        width: Number(this.options.icon.size),
+        height: Number(this.options.icon.size)
       };
       this.width = iconSize.width + 2 * margin;
       this.height = iconSize.height + 2 * margin;
@@ -28,17 +28,17 @@ class Icon extends NodeUtil {
 
   draw(ctx, x, y, selected, hover) {
     this.resize(ctx);
-    this.options.icon.iconSize = this.options.icon.iconSize || 50;
+    this.options.icon.size = this.options.icon.size || 50;
 
     this.left = x - this.width  * 0.5;
     this.top  = y - this.height * 0.5;
     this._icon(ctx, x, y, selected);
 
 
-    this.boundingBox.top    = y - this.options.icon.iconSize * 0.5;
-    this.boundingBox.left   = x - this.options.icon.iconSize * 0.5;
-    this.boundingBox.right  = x + this.options.icon.iconSize * 0.5;
-    this.boundingBox.bottom = y + this.options.icon.iconSize * 0.5;
+    this.boundingBox.top    = y - this.options.icon.size * 0.5;
+    this.boundingBox.left   = x - this.options.icon.size * 0.5;
+    this.boundingBox.right  = x + this.options.icon.size * 0.5;
+    this.boundingBox.bottom = y + this.options.icon.size * 0.5;
 
     if (this.options.label !== undefined) {
       var iconTextSpacing = 5;
@@ -50,14 +50,14 @@ class Icon extends NodeUtil {
   }
 
   _icon(ctx, x, y, selected) {
-    let iconSize = Number(this.options.icon.iconSize);
+    let iconSize = Number(this.options.icon.size);
     let relativeIconSize = iconSize * this.body.view.scale;
 
     if (this.options.icon.code && relativeIconSize > this.options.scaling.label.drawThreshold - 1) {
-      ctx.font = (selected ? "bold " : "") + iconSize + "px " + this.options.icon.iconFontFace;
+      ctx.font = (selected ? "bold " : "") + iconSize + "px " + this.options.icon.fontFace;
 
       // draw icon
-      ctx.fillStyle = this.options.icon.iconColor || "black";
+      ctx.fillStyle = this.options.icon.color || "black";
       ctx.textAlign = "center";
       ctx.textBaseline = "middle";
       ctx.fillText(this.options.icon.code, x, y);