Add `icon` option to ShapeBase (#3756)

* Add support for `icon` option to ShapeBase

* Add test/example for new ShapeBase `icon` option

* Update docs for new `icon` ShapeBase option

docs/network/nodes.html

@@ -653,7 +653,9 @@ network.setOptions(options);
             <td><span parent="icon" class="right-caret"></span> icon</td>
             <td>Object</td>
             <td><code>Object</code></td>
-            <td>These options are only used when the shape is set to <code>icon</code>.</td>
+            <td>These options are only used when the shape is set to <code>icon</code>, <code>diamond</code>,
+                <code>dot</code>, <code>hexagon</code>, <code>square</code>, <code>star</code>,
+                <code>triangledown</code>, or <code>triangle</code>.</td>
         </tr>
         <tr parent="icon" class="hidden">
             <td class="indent">icon.face</td>

examples/network/nodeStyles/shapes.html

@@ -13,6 +13,7 @@
 
   <script type="text/javascript" src="../../../dist/vis.js"></script>
   <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
+  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 
   <script type="text/javascript">
     var nodes = null;
@@ -46,6 +47,8 @@
         {id: 31, font:{size:30},          label: 'big text',    shape: 'text'},
         {id: 32, font:{size:30}, size:40, label: 'big star',    shape: 'star'},
         {id: 33, font:{size:30}, size:40, label: 'big hexagon', shape: 'hexagon'},
+        {id: 34, font:{size:30},          label: 'icon square', shape: 'square', icon: {code:'\uf164'} },
+        {id: 35, font:{size:30},          label: 'icon dot',    shape: 'dot',    icon: {code:'\uf165'} },        
       ];
 
       edges = [

lib/network/modules/components/nodes/util/ShapeBase.js

@@ -52,6 +52,18 @@ class ShapeBase extends NodeBase {
     this.initContextForDraw(ctx, values);
     ctx[shape](x, y, values.size);
     this.performFill(ctx, values);
+    
+    if (this.options.icon !== undefined) {
+      if (this.options.icon.code !== undefined) {
+        ctx.font = (selected ? "bold " : "")
+            + (this.height / 2) + "px "
+            + (this.options.icon.face || 'FontAwesome');
+        ctx.fillStyle = this.options.icon.color || "black";
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.fillText(this.options.icon.code, x, y);
+      }
+    }
 
     if (this.options.label !== undefined) {
       // Need to call following here in order to ensure value for `this.labelModule.size.height`