我在LitELement中使用ShadowDOM创建了一个组件，我想在其中显示GoogleFonts的Material Symbols Outlined中的图标。
在index.html中，我使用以下URL：

https://fonts.googleapis.com/css2?family=Material+Symbols+Outline

作为一个普通的CSS链接：

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>

当我把一些东西

<span class="material-symbols-outlined">
  search
</span>

直接在index.html中。但是当我把它移到ShadowDOM组件中时，它不工作。因此，假设index.html <link>必须留在index.html中以提供@font-face，我尝试将样式表注入ShadowDOM以提供类声明（.material-symbols-outlined）-有三种方法：
1.通过css导入：

@customElement('my-comp')
export class MyComponent extends LitElement {
  static styles = [
    css`
      @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined");
    `
  ];

  render() {
    return html`
      <span class="material-symbols-outlined">search</span>
    `;
  }
}

1.通过渲染中的链接：

@customElement('my-comp')
export class MyComponent extends LitElement {
  render() {
    const iconsCssLink = html`
      <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
    `;

    return html`
      ${iconsCssLink}
      <span class="material-symbols-outlined">search</span>
    `;
  }
}

1.通过仅包含样式的共享组件：

@customElement('icon-styles')
 export class IconStylesComponent extends LitElement {
   static styles = [
     css`
       @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined");
     `
   ];
 }

然后使用ShadowDOM将其导入目标组件：

@customElement('my-comp')
export class MyComponent extends LitElement {
  static styles = [
    IconStylesComponent.styles,
  ];

  render() {
    return html`
      <span class="material-symbols-outlined">search</span>
    `;
  }
}

这些方法都不管用。我遗漏了哪一块拼图？