title: How to hide icon fonts in search engine results?
body: <p>My text used in html to display icons from an icon font are appearing in google search results. How can I stop this from happening?</p>
  
  <p>I have already added <code>area-hidden</code> and <code>role='img'</code>, but these do not seem to have any impact.    </p>
  
  <pre><code>&lt;span class="material-icons" aria-hidden="true" role="img"&gt;search&lt;/span&gt;
  </code></pre>
  
  <p>I have looked around online and mostly found information on how to improve for accessibility purposes, but not so much on how to hide it from googlebot.</p>
  
  <h2>Solution</h2>
  
  <p>Based on @jake's answer below I went with the following.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;span class="material-icons" aria-hidden="true" role="img" data-icon="search"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.material-icons::after{
      content: attr(data-icon);
  }
  </code></pre>