title: Icon Fonts in Shadow DOM
body: <p>Is there a recommended way to let Icon Fonts (eq. FontAwesome/Octicons) bleed into the Shadow DOM?</p>
  
  <p>At the moment, when I want to use an icon in a custom element's Shadow DOM I have to include parts of the <code>ociticons.css</code> file inline in the Shadow DOM:</p>
  
  <pre><code>#shadowroot
  &lt;style&gt;
      .octicon, .mega-octicon {
        font: normal normal normal 16px/1 octicons;
        display: inline-block;
        text-decoration: none;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
      .mega-octicon { font-size: 32px; }
      .octicon-search:before { content: '\f02e'} /*  */
  &lt;/style&gt;
  &lt;button&gt;
    &lt;span class="mega-octicon octicon-search"&gt;&lt;/span&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>(Apparently, <code>@font-face</code> does bleed into the Shadow DOM.)</p>