Иконки материалов не работают внутри шаблона (веб-компоненты)

Question

Я пытался использовать Компоненты материалов для Web на своей странице ( LINK ).

Возможность создать FAB с использованием MDC, и вы можете найти их здесь [CODE-PEN] [2]

Но когда я пытаюсь сделать то же самое внутри шаблона и пользовательских элементов (веб-компонент), кажется, что он не работает LINK

Я получил правильный CSS для FAB, но значок не отображается. Может ли кто-нибудь помочь мне с этим?

MDC LINK 1 : https://github.com/material-components/material-components-web/tree/master/packages/mdc-fab

WORKING [2]: https://codepen.io/rleo2joseph/pen/GRRZGRv

NOT WORKING [3]: https://codepen.io/rleo2joseph/pen/KKKzeqY?editors=1010

Answer 1

Кажется, что ваш порядок импорта (из css) неправильный ... Я пробовал это:

<link rel="stylesheet" type="text/css" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

И он работал просто отлично ... (возможно, material-components-web переопределяет некоторый материалопределения значков)

В любом случае - я надеюсь, что вы использовали ваши ссылки CSS внутри компонента только для демонстрационных целей и что ваше замедление CSS в исходном коде находится в разделе заголовка вашей страницы (или в любом другом загрузчике CSS)в этом отношении)

---

ОБНОВЛЕНИЕ:

Пожалуйста, включите значки материалов в конфигурации пера (раздел CSS), например:

Опять же, я надеюсь, что в вашем проекте вы определили ссылки (и их порядок), как я уже отмечал в моем первоначальном ответе ... включая элемент link внутрикомпонент действительно не рекомендуется (импорт нескольких компонентов приведет к нескольким ненужным импортам)