title: How can I add an SVG sprite to a TinyMCE button?
body: <p>I've added some custom toolbar options to TinyMCE, and I want to use an SVG sprite for it's icons. By default, TinyMCE only allows either "text", "icon" or "image" for setting the icons. Ideally, there would be a "html" option, in which I could put my SVG code, but there doesnt'seemt to be one.</p>
  
  <p>How can I add an SVG sprite to a TinyMCE button?</p>
  
  <hr>
  
  <p><strong>svg-sprites.svg</strong></p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" style="display: none;"&gt;
      &lt;symbol id="ic_spoiler" viewBox="0 0 24 24"&gt;
          &lt;path d="M12,2A9,9 0 0,0 3,11V22L6,19L9,22L12,19L15,22L18,19L21,22V11A9,9 0 0,0 12,2M9,8A2,2 0 0,1 11,10A2,2 0 0,1 9,12A2,2 0 0,1 7,10A2,2 0 0,1 9,8M15,8A2,2 0 0,1 17,10A2,2 0 0,1 15,12A2,2 0 0,1 13,10A2,2 0 0,1 15,8Z" /&gt;
      &lt;/symbol&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><strong>editor-plugin.js</strong></p>
  
  <pre><code>// Function to create SVG html
  var iconSVG = function(name, size) {        
      return '&lt;svg xmlns="http://www.w3.org/2000/svg" height="' + size + '" width="' + size + '" class="' + name + '"&gt;&lt;use xlink:href="' + siteURL + '/images/svg-sprite.svg#' + name + '" /&gt;&lt;/svg&gt;';     
  }
  
  // Spoiler Button
  tinymce.create('tinymce.plugins.spoiler', {
  
      init : function(ed, url) {
          ed.addButton('spoiler', {
              /*
              What I want:
              html: iconSVG('ic_spoiler', 20),
  
              Doesnt work:
              text: iconSVG('ic_spoiler', 20),
              image: iconSVG('ic_spoiler', 20),
              icon: iconSVG('ic_spoiler', 20),
              */
              title : 'Add a Spoiler'
              onclick : function() {
                   ed.selection.setContent('[spoiler]' + ed.selection.getContent() + '[/spoiler]'); 
              }
          });
      },
      createControl : function(n, cm) {
          return null;
      },
  });
  
  tinymce.PluginManager.add('spoiler', tinymce.plugins.spoiler);
  </code></pre>