Icon Fonts in Shadow DOM

Question

Is there a recommended way to let Icon Fonts (eq. FontAwesome/Octicons) bleed into the Shadow DOM?

At the moment, when I want to use an icon in a custom element's Shadow DOM I have to include parts of the ociticons.css file inline in the Shadow DOM:

#shadowroot
<style>
    .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'} /*  */
</style>
<button>
  <span class="mega-octicon octicon-search"></span>
</button>

(Apparently, @font-face does bleed into the Shadow DOM.)

Answer 1

No, there is no “recommended way” to use icon fonts just because those are simply a bundle of css and shadow DOM is intended to hide light css. So your request contradicts the purpose of shadowing.

The common approach is to build the component for showing font-related icons. Every custom component library has in fact it’s own component to show font-icons. Just google for font-awesome polymer or like. A random example.

---

Sidenote: @font-face does not bleed into shadow. It’s the directive setting the relation between fontname and the file where this font to take from, for those fonts which are not known to browser yet. That said, whether you’d try to declare:

@font-face {
    font-family: my-octicons;
    src: url('octicons.otf');
}

and then use it like:

font: normal normal normal 16px/1 my-octicons;

in shadow, it won’t be resolved. The reason it’s resolved in your case is that the browser knows where to take the font to show. In general, it’s the same case as if you were declaring:

font: Helvetica;

without any @font-face in before.

Hope this helps.