title: How to export font awesome icons in svg to png?
body: <p>I am trying to export <a href="https://mermaidjs.github.io/" rel="nofollow noreferrer">mermaid</a> to png. I have been successful to an extent, however, I am stuck exporting the font awesome icons in the svg. They are called simply via <code>fa</code> class, and usual canvas export is not considering them in the export. In below MWE, you could see car icon is missing in PNG output. Kindly help.  </p>
  
  <p>My understanding is, everything has to be inline in svg for canvas export to work, but I could not find a way how to do that, because in mermaid, one could insert any font awesome icon as he needs for the graphs.  </p>
  
  <p><strong>MWE</strong>  </p>
  
  <pre><code>function drawInlineSVG(svgElement, ctx, callback)
  {
      var svgURL = new XMLSerializer().serializeToString(svgElement);
      console.log(svgElement);
      // console.log(svgURL);
      var img = new Image();
      img.onload = function ()
      {
          ctx.drawImage(this,0,0);
          callback(this);
      }
      // img.src = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgURL);
      img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( svgURL ) );
  }
  </code></pre>
  
  <p><strong>Output:</strong><br>
  <a href="https://i.stack.imgur.com/GI86y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GI86y.png" alt="enter image description here"></a>  </p>
  
  <p>I have only included the export function from svg to png above, for brevity. The complete code is available in Jsfiddle : <a href="https://jsfiddle.net/parthi2929/r6wb9ka5/6/" rel="nofollow noreferrer">https://jsfiddle.net/parthi2929/r6wb9ka5/6/</a> </p>
  
  <ul>
  <li>Note car is missing above output (png part). Also note change of font. I want to export png exactly as seen in svg.  </li>
  <li>One could also note in jsfiddle, i have tried few more methods including using <a href="https://github.com/canvg/canvg" rel="nofollow noreferrer">canvg</a>, <a href="https://github.com/cburgmer/rasterizeHTML.js" rel="nofollow noreferrer">rasterizeHTML</a> but former, not even renders any font, while latter gives same result with car missing.  </li>
  </ul>
  
  <p>I could not reproduce in SO's own snippet area as it was throwing error, so kindly excuse on that. </p>