title: Issues rendering Emoji characters in Android email
body: <p>I'm working on making a small survey app and I want to send out an email that has a simple thumbs up and thumbs down button. I figured I could use emoji instead of images in the email.</p>
  
  <p>The problem is when the email is sent to an Android device, it doesn't render the emoji characters. I've narrowed the problem down to sizing. If I make the emoji bigger, it disappears. Using the small emoji and it works; screenshots are attached. I've tried on a few Android devices including a Samsung S6 and Google Pixel. I've also tried using the built in Mail app as well as Outlook on Android with the same results.</p>
  
  <p>Has anyone got this working?</p>
  
  <p><strong>Missing Emoji Screenshot</strong>  </p>
  
  <ul>
  <li><a href="https://i.stack.imgur.com/kwXxU.png" rel="nofollow noreferrer">Android Large Emoji</a></li>
  </ul>
  
  <p><strong>Working Emoji Screenshot</strong>  </p>
  
  <ul>
  <li><a href="https://i.stack.imgur.com/VmZBY.jpg" rel="nofollow noreferrer">Outlook, Android, iOS</a></li>
  </ul>
  
  <p><strong>Snippet of the HTML in my email message</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
    &lt;td&gt;&amp;nbsp;&lt;/td&gt;
    &lt;td style="width:60px;background-color:#fff;"&gt;
      &lt;table border="0" cellspacing="0" cellpadding="0"&gt;
        &lt;tr&gt;
          &lt;td style="background-color:#5cb85c; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;"&gt;
            &lt;a href="http://intranet/" target="_blank" title="thumbs up" style="text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #4cae4c; display: inline-block;"&gt;&lt;strong style="color: #fff;font-size:60pt;"&gt;&lt;/strong&gt;&lt;/a&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/td&gt;
    &lt;td style="width:10px;background-color:#fff;"&gt;&lt;/td&gt;
    &lt;td style="width:60px;background-color:#fff;"&gt;
      &lt;table border="0" cellspacing="0" cellpadding="0"&gt;
        &lt;tr&gt;
          &lt;td style="background-color:#e9703e; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;"&gt;
            &lt;a href="http://intranet/" target="_blank" title="thumbs down" style="text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #e9703e; display: inline-block;"&gt;&lt;strong style="color: #fff;font-size:60pt;"&gt;&lt;/strong&gt;&lt;/a&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/td&gt;
    &lt;td&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Update 1</strong> - Fixed the Android Large Emoji image<br>
  <strong>Update 2</strong> - Add html I used in the example screenshots.</p>