title: Set custom SVG icon on Ag-Grid sidebar
body: <p>I need to specify custom icons on my Ag-Grid (React) sidebar for custom panels. My toolpanels looks like this:</p>
  
  <pre><code>toolPanels: [
      {
          id: "actions",
          labelDefault: "Actions",
          labelKey: "actions",
          iconKey: "entityActions",                  
          toolPanel: "blotterActionsPanel",
          toolPanelParams: {glEventHub: this.props.glEventHub}
      },
      {
          id: "columns",
          labelDefault: "Columns",
          labelKey: "columns",
          iconKey: "columns",
          toolPanel: "agColumnsToolPanel"
      },
      {
          id: "filters",
          labelDefault: "Filters",
          labelKey: "filters",
          iconKey: "filter",
          toolPanel: "agFiltersToolPanel"
      }
  ]
  </code></pre>
  
  <p>for the 'actions' toolpanel I have iconKey 'entityActions', so my icons looks like this:</p>
  
  <pre><code>icons: {
      entityActions: '&lt;i class="fa fa-running" style="font-size: 12pt; color: darkgrey"/&gt;',
  }
  </code></pre>
  
  <p>That works for a font-awesome icon... but I don't want to use an FA icon. I need to use icons from BlueprintJS, which are SVG icons. BlueprintJS provides an  tag which would be the easiest to use...  but I've tried various things like this:</p>
  
  <pre><code>icons: {
      entityActions: "&lt;Icon icon='add'/&gt;"
  }
  </code></pre>
  
  <p>Which doesn't work... I can also get the raw SVG paths from BlueprintJS so I've tried:</p>
  
  <pre><code>entityActions: '&lt;span&gt;&lt;svg fill="black" height="16" width="16"  viewBox={"0 0 16 16"}&gt;&lt;path d=' + IconSvgPaths16.add[0] + '/&gt;&lt;/svg&gt;&lt;/span&gt;',
  </code></pre>
  
  <p>and also I tried hard-coding the path... In all of these cases I just get a blank hole where I expect the icon to be.
  The Ag-Grid documentation (<a href="https://www.ag-grid.com/javascript-grid-icons/" rel="nofollow noreferrer">https://www.ag-grid.com/javascript-grid-icons/</a>):</p>
  
  <p>The icon can be any of the following:
     String: The string will be treated as html. Use to return just text, or HTML tags.
     Function: A function that returns either a String or a DOM node or element.</p>
  
  <p>so, I tried a function... I cannot find an example of how to do this, but after a few hours of searching I came across examples that show it creating an element using document.createElement.. So I tried this:</p>
  
  <pre><code>entityActions: params =&gt; {
      let icon = document.createElement('svg');
      let path = document.createElement('path');
      icon.setAttribute('fill', "black");
      icon.setAttribute("height", "16");
      icon.setAttribute("width", "16");
      icon.setAttribute("viewBox", "0 0 16 16");
      path.setAttribute("d", IconSvgPaths16.add[0]);                    
      icon.appendChild(path);
      return icon;
  }
  </code></pre>
  
  <p>Still with no luck... How can I use a BlueprintJS Icon with Ag-Grid? This icon is actually customizable by the user so it would be good if I could use a function and pass in the icon name to use and have it return the appropriate one...</p>
  
  <p>Thankyou,
  Troy.</p>