diff --git a/web/gui/src/main/webapp/_sdh/embedded-icon.html b/web/gui/src/main/webapp/_sdh/embedded-icon.html
new file mode 100644
index 0000000..b4b8f34
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/embedded-icon.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<!--
+  ~ Copyright 2015 Open Networking Laboratory
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<!--
+  ONOS -- Embedded icon test page
+
+  @author Simon Hunt
+  @author Bri Prebilic Cole
+  -->
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Embedded Icons</title>
+
+    <script src="../tp/d3.js"></script>
+
+    <link rel="stylesheet" href="../app/common.css">
+
+    <style>
+        html,
+        body {
+            background-color: #fff;
+            font-family: Arial, Helvetica, sans-serif;
+            font-size: 9pt;
+        }
+
+        svg .icon .glyph {
+            stroke: none;
+            fill: white;
+            fill-rule: evenodd;
+        }
+
+        svg .icon.deviceOnline {
+            fill: green;
+        }
+
+        svg .icon.deviceOffline {
+            fill: darkred;
+        }
+
+        svg .icon rect {
+            stroke: black;
+            stroke-width: 1px;
+        }
+
+    </style>
+</head>
+<body class="light">
+<!-- minimal framework to access glyphs library module -->
+<script>
+    var libs = {};
+    var ONOS = { ui: { addLib: function (id, things) { libs[id] = things; }}};
+
+
+</script>
+
+<!-- Test HTML -->
+
+<div>
+    <table class="summary-list">
+        <tr> <th>One</th> <th>Two</th> <th>Three</th> </tr>
+        <tr>
+            <td>
+                <div icon icon-id="deviceOnline">
+
+                    <!-- icon directive needs to inject the following structure -->
+                    <!-- ------------------------------------------------ -->
+                    <svg width="20" height="20" viewBox="0 0 50 50">
+                        <g class="icon deviceOnline">
+                            <rect width="50" height="50" rx="4"></rect>
+                            <use class="glyph" xlink:href="#ui" width="50" height="50"></use>
+                        </g>
+                    </svg>
+                    <!-- ------------------------------------------------ -->
+
+                </div>
+            </td>
+            <td>Some text</td>
+            <td>Some text</td>
+        </tr>
+        <tr>
+            <td>
+                <div icon icon-id="deviceOffline">
+
+                    <!-- icon directive needs to inject the following structure -->
+                    <!-- ------------------------------------------------ -->
+                    <svg width="20" height="20" viewBox="0 0 50 50">
+                        <g class="icon deviceOffline">
+                            <rect width="50" height="50" rx="4"></rect>
+                            <use class="glyph" xlink:href="#ui" width="50" height="50"></use>
+                        </g>
+                    </svg>
+                    <!-- ------------------------------------------------ -->
+
+
+                </div>
+            </td>
+            <td>Some text</td>
+            <td>Some Other text</td>
+        </tr>
+    </table>
+</div>
+
+<!-- common definitions for other SVG elements to use -->
+<svg width="0" height="0">
+    <defs>
+        <symbol id="ui" viewBox="0 0 10 10">
+            <path d="M2,2.5a.5,.5,0,0,1,.5-.5h5
+                    a.5,.5,0,0,1,.5,.5v3a.5,.5,0,0,1-.5,.5h-5a.5,
+                    .5,0,0,1-.5-.5zM2.5,2.8a.3,.3,0,0,1,.3-.3
+                    h4.4a.3,.3,0,0,1,.3,.3v2.4a.3,.3,0,0,1-.3,
+                    .3h-4.4a.3,.3,0,0,1-.3-.3zM2,6.55h6l1,1.45h-8z">
+            </path>
+        </symbol>
+    </defs>
+</svg>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/app/common.css b/web/gui/src/main/webapp/app/common.css
index 7759f4d..4253efa 100644
--- a/web/gui/src/main/webapp/app/common.css
+++ b/web/gui/src/main/webapp/app/common.css
@@ -22,8 +22,7 @@
  */
 
 table.summary-list {
-    /*border: 1px solid red;*/
-    margin: 4px 50px;
+    margin: 4px 4px;
     font-size: 10pt;
 }
 
diff --git a/web/gui/src/main/webapp/app/directives.js b/web/gui/src/main/webapp/app/directives.js
index 2cb6dc1..7d574d5 100644
--- a/web/gui/src/main/webapp/app/directives.js
+++ b/web/gui/src/main/webapp/app/directives.js
@@ -56,4 +56,23 @@
             };
         }])
 
+
+        // create icon directive, so that we can inject icons into
+        // HTML tables etc.
+        .directive('icon', ['GlyphService', function (gs) {
+            return {
+                templateUrl: 'toBeDecided-iconContext.html',
+                restrict: 'A',
+                link: function (scope, element, attrs) {
+                    // TODO: implement this
+                    // needs to pull out the parameters for the icon
+                    // from the attributes of the element, and use those
+                    // as arguments to the IconService.addIcon(...) call.
+
+
+                }
+            };
+
+
+        }]);
 }());
diff --git a/web/gui/src/main/webapp/app/fw/svg/glyph.js b/web/gui/src/main/webapp/app/fw/svg/glyph.js
index 844d0f3..ef017e0 100644
--- a/web/gui/src/main/webapp/app/fw/svg/glyph.js
+++ b/web/gui/src/main/webapp/app/fw/svg/glyph.js
@@ -23,6 +23,7 @@
     'use strict';
 
     var $log,
+        fs,
         glyphs = d3.map(),
         msgGS = 'GlyphService.';
 
@@ -121,8 +122,9 @@
     // ----------------------------------------------------------------------
 
     angular.module('onosSvg')
-        .factory('GlyphService', ['$log', function (_$log_) {
+        .factory('GlyphService', ['$log', 'FnService', function (_$log_, _fs_) {
             $log = _$log_;
+            fs = _fs_;
 
             function clear() {
                 // start with a fresh map
@@ -166,15 +168,20 @@
             }
 
             // Note: defs should be a D3 selection of a single <defs> element
-            function loadDefs(defs) {
+            function loadDefs(defs, glyphIds) {
+                var list = fs.isA(glyphIds) || ids();
+
                 // remove all existing content
                 defs.html(null);
 
-                // load up the currently registered glyphs
-                glyphs.values().forEach(function (g) {
-                    defs.append('symbol')
-                        .attr({ id: g.id, viewBox: g.vb })
-                        .append('path').attr('d', g.d);
+                // load up the requested glyphs
+                list.forEach(function (id) {
+                    var g = glyph(id);
+                    if (g) {
+                        defs.append('symbol')
+                            .attr({ id: g.id, viewBox: g.vb })
+                            .append('path').attr('d', g.d);
+                    }
                 });
             }
 
diff --git a/web/gui/src/main/webapp/tests/app/fw/svg/glyph-spec.js b/web/gui/src/main/webapp/tests/app/fw/svg/glyph-spec.js
index 8ae2937..64e8a02 100644
--- a/web/gui/src/main/webapp/tests/app/fw/svg/glyph-spec.js
+++ b/web/gui/src/main/webapp/tests/app/fw/svg/glyph-spec.js
@@ -25,7 +25,24 @@
     var numBaseGlyphs = 11,
         vbBird = '352 224 113 112',
         vbGlyph = '0 0 110 110',
-        vbBadge = '0 0 10 10';
+        vbBadge = '0 0 10 10',
+        prefixLookup = {
+            bird: 'M427.7,300.4',
+            unknown: 'M35,40a5',
+            node: 'M15,100a5',
+            switch: 'M10,20a10',
+            roadm: 'M10,35l25-',
+            endstation: 'M10,15a5,5',
+            router: 'M10,55A45,45',
+            bgpSpeaker: 'M10,40a45,35',
+            chain: 'M60.4,77.6c-',
+            crown: 'M99.5,21.6c0,',
+            uiAttached: 'M2,2.5a.5,.5',
+
+            // our test ones..
+            triangle: 'M.5,.2',
+            diamond: 'M.2,.5'
+        };
 
     beforeEach(module('onosUtil', 'onosSvg'));
 
@@ -47,7 +64,7 @@
 
     it('should define api functions', function () {
         expect(fs.areFunctions(gs, [
-            'init', 'register', 'ids', 'glyph', 'loadDefs'
+            'clear', 'init', 'register', 'ids', 'glyph', 'loadDefs'
         ])).toBeTruthy();
     });
 
@@ -55,20 +72,22 @@
         expect(gs.ids()).toEqual([]);
     });
 
-    it('should load the base set of glyphs', function () {
+    it('should load the base set of glyphs into the cache', function () {
         gs.init();
         expect(gs.ids().length).toEqual(numBaseGlyphs);
     });
 
-    it('should remove glyphs on clear', function () {
+    it('should remove glyphs from the cache on clear', function () {
         gs.init();
         expect(gs.ids().length).toEqual(numBaseGlyphs);
         gs.clear();
         expect(gs.ids().length).toEqual(0);
     });
 
-    function verifyGlyphLoaded(id, vbox, prefix) {
-        var glyph = gs.glyph(id),
+    function verifyGlyphLoadedInCache(id, vbox, expPfxId) {
+        var pfxId = expPfxId || id,
+            glyph = gs.glyph(id),
+            prefix = prefixLookup[pfxId],
             plen = prefix.length;
         expect(fs.contains(gs.ids(), id)).toBeTruthy();
         expect(glyph).toBeDefined();
@@ -79,47 +98,47 @@
 
     it('should load the bird glyph', function() {
         gs.init();
-        verifyGlyphLoaded('bird', vbBird, 'M427.7,300.4');
+        verifyGlyphLoadedInCache('bird', vbBird);
     });
     it('should load the unknown glyph', function() {
         gs.init();
-        verifyGlyphLoaded('unknown', vbGlyph, 'M35,40a5');
+        verifyGlyphLoadedInCache('unknown', vbGlyph);
     });
     it('should load the node glyph', function() {
         gs.init();
-        verifyGlyphLoaded('node', vbGlyph, 'M15,100a5');
+        verifyGlyphLoadedInCache('node', vbGlyph);
     });
     it('should load the switch glyph', function() {
         gs.init();
-        verifyGlyphLoaded('switch', vbGlyph, 'M10,20a10');
+        verifyGlyphLoadedInCache('switch', vbGlyph);
     });
     it('should load the roadm glyph', function() {
         gs.init();
-        verifyGlyphLoaded('roadm', vbGlyph, 'M10,35l25-');
+        verifyGlyphLoadedInCache('roadm', vbGlyph);
     });
     it('should load the endstation glyph', function() {
         gs.init();
-        verifyGlyphLoaded('endstation', vbGlyph, 'M10,15a5,5');
+        verifyGlyphLoadedInCache('endstation', vbGlyph);
     });
     it('should load the router glyph', function() {
         gs.init();
-        verifyGlyphLoaded('router', vbGlyph, 'M10,55A45,45');
+        verifyGlyphLoadedInCache('router', vbGlyph);
     });
     it('should load the bgpSpeaker glyph', function() {
         gs.init();
-        verifyGlyphLoaded('bgpSpeaker', vbGlyph, 'M10,40a45,35');
+        verifyGlyphLoadedInCache('bgpSpeaker', vbGlyph);
     });
     it('should load the chain glyph', function() {
         gs.init();
-        verifyGlyphLoaded('chain', vbGlyph, 'M60.4,77.6c-');
+        verifyGlyphLoadedInCache('chain', vbGlyph);
     });
     it('should load the crown glyph', function() {
         gs.init();
-        verifyGlyphLoaded('crown', vbGlyph, 'M99.5,21.6c0');
+        verifyGlyphLoadedInCache('crown', vbGlyph);
     });
     it('should load the uiAttached glyph', function() {
         gs.init();
-        verifyGlyphLoaded('uiAttached', vbBadge, 'M2,2.5a.5,.5');
+        verifyGlyphLoadedInCache('uiAttached', vbBadge);
     });
 
     // define some glyphs that we want to install
@@ -147,8 +166,8 @@
         expect($log.warn).not.toHaveBeenCalled();
 
         expect(gs.ids().length).toEqual(numBaseGlyphs + 2);
-        verifyGlyphLoaded('triangle', testVbox, 'M.5,.2');
-        verifyGlyphLoaded('diamond', testVbox, 'M.2,.5');
+        verifyGlyphLoadedInCache('triangle', testVbox);
+        verifyGlyphLoadedInCache('diamond', testVbox);
     });
 
     it('should not overwrite glyphs with dup IDs', function () {
@@ -163,8 +182,8 @@
 
         expect(gs.ids().length).toEqual(numBaseGlyphs);
         // verify original glyphs still exist...
-        verifyGlyphLoaded('router', vbGlyph, 'M10,55A45,45');
-        verifyGlyphLoaded('switch', vbGlyph, 'M10,20a10');
+        verifyGlyphLoadedInCache('router', vbGlyph);
+        verifyGlyphLoadedInCache('switch', vbGlyph);
     });
 
     it('should replace glyphs if asked nicely', function () {
@@ -178,8 +197,8 @@
 
         expect(gs.ids().length).toEqual(numBaseGlyphs);
         // verify glyphs have been overwritten...
-        verifyGlyphLoaded('router', testVbox, 'M.5,.2');
-        verifyGlyphLoaded('switch', testVbox, 'M.2,.5');
+        verifyGlyphLoadedInCache('router', testVbox, 'triangle');
+        verifyGlyphLoadedInCache('switch', testVbox, 'diamond');
     });
 
     function verifyPathPrefix(elem, prefix) {
@@ -188,16 +207,19 @@
         expect(d.slice(0, plen)).toEqual(prefix);
     }
 
+    function verifyLoadedInDom(id, vb, expPfxId) {
+        var pfxId = expPfxId || id,
+            symbol = d3Elem.select('#' + id);
+        expect(symbol.size()).toEqual(1);
+        expect(symbol.attr('viewBox')).toEqual(vb);
+        verifyPathPrefix(symbol, prefixLookup[pfxId]);
+    }
+
     it('should load base glyphs into the DOM', function () {
         gs.init();
         gs.loadDefs(d3Elem);
         expect(d3Elem.selectAll('symbol').size()).toEqual(numBaseGlyphs);
-
-        // verify bgpSpeaker
-        var bs = d3Elem.select('#bgpSpeaker');
-        expect(bs.size()).toEqual(1);
-        expect(bs.attr('viewBox')).toEqual(vbGlyph);
-        verifyPathPrefix(bs, 'M10,40a45,35');
+        verifyLoadedInDom('bgpSpeaker', vbGlyph);
     });
 
     it('should load custom glyphs into the DOM', function () {
@@ -205,11 +227,15 @@
         gs.register(testVbox, newGlyphs);
         gs.loadDefs(d3Elem);
         expect(d3Elem.selectAll('symbol').size()).toEqual(numBaseGlyphs + 2);
+        verifyLoadedInDom('diamond', testVbox);
+    });
 
-        // verify diamond
-        var dia = d3Elem.select('#diamond');
-        expect(dia.size()).toEqual(1);
-        expect(dia.attr('viewBox')).toEqual(testVbox);
-        verifyPathPrefix(dia, 'M.2,.5l.3,-.3');
+    it('should load only specified glyphs into the DOM', function () {
+        gs.init();
+        gs.loadDefs(d3Elem, ['crown', 'chain', 'node']);
+        expect(d3Elem.selectAll('symbol').size()).toEqual(3);
+        verifyLoadedInDom('crown', vbGlyph);
+        verifyLoadedInDom('chain', vbGlyph);
+        verifyLoadedInDom('node', vbGlyph);
     });
 });