GUI - Converted Hosts to use Glyph icons instead of png's.

Change-Id: I5adce1b263985ec853a62db28d59e6d3e252f158

@@ -119,16 +119,6 @@ svg .node.host circle {
     fill: #ddd;
     fill: #ddd;
 }
 }
 
 
-#topo svg .node.host.bgpSpeaker circle {
-    stroke: #000;
-    fill: #ddd;
-}
-
-#topo svg .node.host.router circle {
-    stroke: #000;
-    fill: #ddd;
-}
-
 /* LINKS */
 /* LINKS */
 
 
 #topo svg .link {
 #topo svg .link {

@@ -1244,7 +1244,7 @@
         // Augment as needed...
         // Augment as needed...
         node.class = 'host';
         node.class = 'host';
         if (!node.type) {
         if (!node.type) {
-            node.type = 'endstation';
+            node.type = 'host';
         }
         }
         node.svgClass = 'node host ' + node.type;
         node.svgClass = 'node host ' + node.type;
         positionNode(node);
         positionNode(node);
@@ -1451,15 +1451,17 @@
         }
         }
     }
     }
 
 
-    function addHostIcon(node, radius, iconId) {
+    function addHostIcon(node, radius, iid) {
         var dim = radius * 1.5,
         var dim = radius * 1.5,
             xlate = -dim / 2;
             xlate = -dim / 2;
 
 
-        node.append('svg:image')
-            .attr('transform', translate(xlate,xlate))
-            .attr('xlink:href', 'img/' + iconId + '.png')
-            .attr('width', dim)
-            .attr('height', dim);
+        node.append('use').attr({
+            class: 'glyphIcon hostIcon',
+            transform: translate(xlate,xlate),
+            'xlink:href': iid,
+            width: dim,
+            height: dim
+        });
     }
     }
 
 
     function updateNodes() {
     function updateNodes() {
@@ -1521,7 +1523,7 @@
                 router: 14,
                 router: 14,
                 host: 14
                 host: 14
             },
             },
-            hostIcon = {
+            hostGlyphId = {
                 bgpSpeaker: 'bgpSpeaker',
                 bgpSpeaker: 'bgpSpeaker',
                 router: 'router',
                 router: 'router',
                 host: 'host'
                 host: 'host'
@@ -1533,7 +1535,7 @@
             var node = d3.select(this),
             var node = d3.select(this),
                 r = hostRadius[d.type] || defaultHostRadius,
                 r = hostRadius[d.type] || defaultHostRadius,
                 textDy = r + 10,
                 textDy = r + 10,
-                icon = hostIcon[d.type];
+                iid = iconGlyphUrl(d);
 
 
             // provide ref to element from backing data....
             // provide ref to element from backing data....
             d.el = node;
             d.el = node;
@@ -1541,8 +1543,8 @@
             node.append('circle')
             node.append('circle')
                 .attr('r', r);
                 .attr('r', r);
 
 
-            if (icon) {
-                addHostIcon(node, r, icon);
+            if (iid) {
+                addHostIcon(node, r, iid);
             }
             }
 
 
 
 
@@ -1617,7 +1619,8 @@
             dy = box.y + config.icons.yoff;
             dy = box.y + config.icons.yoff;
         }
         }
 
 
-        g = node.append('g').attr('class', 'glyphIcon deviceIcon')
+        g = node.append('g')
+                .attr('class', 'glyphIcon deviceIcon')
                 .attr('transform', translate(dx, dy));
                 .attr('transform', translate(dx, dy));
 
 
         g.append('rect').attr({
         g.append('rect').attr({