title: Unicode icons: sometimes looks like a wrong encoding
body: <p>In my CSS I have this (unrelated code is omitted):</p>
  
  <pre><code>.selector:after {
      content: '▾';
  }
  </code></pre>
  
  <p>Normally it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/zuUmG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zuUmG.png" alt="unicode icon ▾"></a></p>
  
  <p>But <em>sometimes</em> I open <a href="https://chrome.google.com/webstore/detail/text-to-speech-that-bring/eidcpcpmmfiolomceegcagooodnaplmp" rel="nofollow noreferrer">my browser extension</a> and see this <code>â–¾</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/XmJz2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XmJz2.png" alt="unicode icon broken encoding ▾"></a></p>
  
  <p>In devtools I see the same:</p>
  
  <p><a href="https://i.stack.imgur.com/MPTok.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MPTok.png" alt="devtools encoding â–¾"></a></p>
  
  <p>Why this happens? How can I fix it?</p>