title: How to render emoji using Unicode in ReactJS?
body: <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>