Значки материалов не загружаются в Hyperhtml - PullRequest
Новая
       19

Значки материалов не загружаются в Hyperhtml

0 голосов
/ 02 апреля 2019

Я использую значки материалов внутри компонентов Hyperhtml.Но даже при том, что css загружен, значок не загружается в браузере.Вместо иконки отображается «3d_rotation».

Это моя реализация.

    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>
    }

Так что я сомневаюсь, возможно ли, что Icon материала не поддерживается в Hyper Html.Материал Icon css отображается в стилях элемента inspect.

Спасибо

1 Ответ

0 голосов
/ 03 апреля 2019

Каждый раз, когда вы используете Shadow DOM, вы должны импортировать шрифты в основной документ: 

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