Material Icons are not Loading in Hyperhtml

Question

I am using material Icons inside Hyperhtml Components. But even though css is loaded the Icon in not loading in the browser. Instead of the Icon the "3d_rotation" is showing.

This is My Implementation.

    const appIframeRender = hyperHTML.bind(document.querySelector('#iframe_element').attachShadow({mode: 'open'}));
        const main2 = hyperHTML.wire();
    appIframeRender`${[
            cbplugin.CharmListComponent.render(main2)
          ]}`;

    cbplugin.WrapperComponent.render = function (render, data){
        return render`

  <style>
  @import "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css";
  @import "https://fonts.googleapis.com/icon?family=Material+Icons";
  @import "https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700"; 

  </style>
  <div>
    <a class='dropdown-trigger card-more-actions' href='#' data-target='dropdown2'>
                <i class="material-icons">
                  3d_rotation
                  </i>
                </a>
  </div>
    }

So My Doubt is Is it possible that material Icon is not supported in Hyper Html. The material Icon css are showing in the inspect element styles.

Thank you

As already mentioned in my repository, hyperHTML has no issues with CSS or material icons, and this is the proof: https://codepen.io/WebReflection/pen/xeGZEd?editors=0010 What you probably have, as issue, is the fact you are trying to inject content directly to an iframe as if it's a regular element (it's not) instead of reaching its document. Until you'll be able to show online a failing code with all the nodes, I'm afraid it's hard to help you, no matter where you ask for such help. — Andrea Giammarchi, Apr 02 '19 at 15:44
Actually I fixed that issue by importing the material icon library in the parent component which is not using shadow dom. Is it because in shadow dom material icons are not supported? — Al Ameen, Apr 18 '19 at 12:03

score 0 · Answer 1 · answered Apr 03 '19 at 00:23

Whenever you use Shadow DOM, you must import fonts in the main document:

<html>
<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700">
</head>
...

Material Icons are not Loading in Hyperhtml

1 Answers1