title: React-FontAwesome unicode values in svg circle
body: <p>I am trying to embed a font awesome icon inside svg circles via unicode values from the font awesome website inside <code>&lt;text&gt;</code>, but they fail to appear:</p>
  
  <p><a href="https://i.stack.imgur.com/bnbrX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bnbrX.png" alt="enter image description here"></a></p>
  
  <p>for some reason which I don't understand, when I am using this unicode value(<code>&amp;#x2713</code>) it does appear(but it's not the icon I need):</p>
  
  <p><a href="https://i.stack.imgur.com/w21ht.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w21ht.png" alt="enter image description here"></a></p>
  
  <p>Some code:</p>
  
  <p>from the react component:</p>
  
  <pre><code>       &lt;g&gt;
              &lt;circle className="circle test-circle"
                  key={index}
                  cx={xScale(node.x)}
                  cy={yScale(node.y)}
                  r={node.r}
                  fill={node.done === true ? colour : "grey"}
              /&gt;
              {node.done === true ? 
                  &lt;text id="chk" style={{fontFamily:'Font Awesome'}} x={xScale(node.x)-10} y={yScale(node.y)+10}&gt;&amp;#xf00c;&lt;/text&gt;
                  :
                  &lt;text id="chk" style={{fontFamily:'Font Awesome'}} x={xScale(node.x)-10} y={yScale(node.y)+10}&gt;&amp;#xf00c;&lt;/text&gt;
              }
  
          &lt;/g&gt;         
  </code></pre>
  
  <p>from the scss:</p>
  
  <pre><code>text#chk {
      font-family: 'Font Awesome';
      content: "\f00c";
      font-size: 30px; 
  }
  </code></pre>
  
  <p>What can cause this?</p>