From a42368c170d1304a03de6ca77432aec53c660de8 Mon Sep 17 00:00:00 2001
From: Paul Dugas <paul@dugasenterprises.com>
Date: Fri, 5 Jan 2018 05:34:53 -0500
Subject: [PATCH] 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                              |  4 +++-
 examples/network/nodeStyles/shapes.html              |  3 +++
 .../modules/components/nodes/util/ShapeBase.js       | 12 ++++++++++++
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/docs/network/nodes.html b/docs/network/nodes.html
index c0c0fff2..c9d65f1f 100644
--- a/docs/network/nodes.html
+++ b/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>
diff --git a/examples/network/nodeStyles/shapes.html b/examples/network/nodeStyles/shapes.html
index bf1a5c85..bd1870cb 100644
--- a/examples/network/nodeStyles/shapes.html
+++ b/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 = [
diff --git a/lib/network/modules/components/nodes/util/ShapeBase.js b/lib/network/modules/components/nodes/util/ShapeBase.js
index d1d79e9c..b72dadb2 100644
--- a/lib/network/modules/components/nodes/util/ShapeBase.js
+++ b/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`