How to render emoji using Unicode in ReactJS?
<p>In ReactJS, there is unicode table for the emojis <a href="http://apps.timwhitlock.info/emoji/tables/unicode" rel="nofollow noreferrer">http://apps.timwhitlock.info/emoji/tables/unicode</a> and tried following this <a href="https://css-tricks.com/emoji-toggles/" rel="nofollow noreferrer">https://css-tricks.com/emoji-toggles/</a> so made the attempt to render the rocket emoji (which has unicode: U+1F680 but converted to css content: \01F680) with:</p>

<pre><code>&lt;div style={{content: '\01F680'}}&gt;&lt;/div&gt;
</code></pre>

<p>But I got an error. Is this the right way to do it?</p>

<p><strong>EDIT</strong></p>

<p>I want to create a round/circle button with the emoji centered to the middle of it. </p>

<p>CSS for the button:</p>

<pre><code>#emoji-button {
  border-radius: 19px;
  width: 38px;
  height: 38px;
}
</code></pre>

<p>And round/circle button: </p>

<pre><code>&lt;button
  type="submit"
  id="emoji-button"
/&gt;
</code></pre>

<p>And is there a way to create just the emoji image itself clickable? </p>

<p><strong>EDIT</strong></p>

<p><a href="https://i.stack.imgur.com/JpO1t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JpO1t.png" alt="enter image description here"></a></p>

<p>With CSS as you suggested: </p>

<pre><code>#emoji-button {
  font-size: 15px;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  text-align: center;
  background-color: white;
  border:0;
  position: absolute;
  right: -60px;
}

#emoji-button:before {
  content: "\01F426";
}
</code></pre>