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.)

The shadow dom does not load the font with @font-face. At least in Chrome. You have to include the CSS declaration outside the shadow dom as well. See: http://robdodson.me/at-font-face-doesnt-work-in-shadow-dom/ — bucabay, Apr 04 '17 at 10:39

score 6 · Accepted Answer · answered Mar 01 '15 at 14:00

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.

This is partly wrong, \@font-face clearly bleeds into the shadow dom. Your example is of font-face bleeding into the shadow dom. You have to have the \@font-face outside the shadow in order to use the my-octicons font inside the shadow. — Vectorjohn, May 10 '19 at 18:39

Icon Fonts in Shadow DOM

1 Answers1