How to extract legend symbols for use in other widgets

[FranklinAlexander]

I have an application that uses the 'Near Me' widget to query a database and return a list of seabird rehabbers based on the distance from an address, or from any location set from a mouse click on map. The query result (rehabbers list) then appears in a panel in the widget beneath the search box and zoom slider. It shows the name of the rehabber and distance from the address/point.  I also have a legend that symbolizes the rehabbers by permit type (there are two symbols). 

I don't like having to toggle between the legend and 'Near Me' widget, so I as able to place the legend inside the 'Near Me' widget just above the list of rehabbers. I think this is a step in the right direction, but I would also like to place a symbol beside each list item so people using the app can easily see what permit type the rehabber has. I can list the permit type in the table as well, but then you have to go into the details panel of the rehabber to view the permit type which can be a little inconvenient. I have looked, but haven't been able to find a method to extract the correct symbol from the legend in order to show it in a div beside the rehabber name. The feature layer with the symbology is published on REST services, so it can't be that hard to access the symbol, just haven't been able to figure it out yet. If anyone knows of a method that does this, or maybe can point me in the right direction on how to approach the scripting that would be great. I know where the script goes and generally how to set it up so that the symbol will appear next to the rehabber name in the feature list, it's just the specific code/method to access the correct legend symbol that is escaping me 🙂 

There are actually several places in the 'Near Me' widget item-list.js file where I need to add code, but I am pretty sure the specific code I need for extracting the legend symbol should go here (where I have the question mark):

_setItemLegend: function (templateDiv, value) {
    var divItemLegend = query(".esriCTItemLegend", templateDiv)[0];
    if (divItemLegend) {
         var value = code/method to get legend image?
         domAttr.set(divItemLegend, "innerHTML", value);
         domAttr.set(divItemLegend, "Legend", value);
     }
},

Thanks for any ideas!! 

[RobertScheitlin__GISP · Accepted solution]

Franklin,

  Here is the code I use to extract a symbol to a div element in my code.

define([
....
    'dojox/gfx',
    'esri/symbols/jsonUtils'
...
//iconDiv is the div where I want the graphics symbol placed
//item.sym is the graphics symbol
          var mySurface = gfx.createSurface(iconDiv, 40, 40);
          var descriptors = jsonUtils.getShapeDescriptors(item.sym);
          if(descriptors.defaultShape){
            var shape = mySurface.createShape(descriptors.defaultShape).setFill(descriptors.fill).setStroke(descriptors.stroke);
            shape.applyTransform({ dx: 20, dy: 20 });
          }‍‍‍‍‍‍‍‍‍‍‍‍‍

[FranklinAlexander]

Thanks Robert, that worked like a charm!