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
Whenever you use Shadow DOM, you must import fonts in the main document: