MaterializeCSS Icon 在 Angular 7 中的导航栏上不起作用

我正在尝试使用MaterializeCSS Icon在导航栏上工作。在发布的代码中，箭头drop_down似乎不起作用。相反，它只显示一个文本。图标呈现在除 app.component.html 文件之外的其他页面上。

我尝试直接在索引.html文件中导入以下代码。结果还是一样。我在这里错过了什么吗？另外，我无法弄清楚为什么图标显示在除app.component之外的任何其他组件中的原因.html

任何帮助将不胜感激。谢谢。如果需要更多详细信息，请告诉我。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

索引.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>UiCommunity</title>
  <base href="/">
  
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<header>
  <nav class="white">
    <div class="container nav-wrapper">
      <a href="/" class="brand-logo">Community</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li>
          <a routerLink="/" routerLinkActive="active">HOME</a>
        </li>
        <li>
          <a routerLink="/event" routerLinkActive="active">EVENTS</a>
        </li>
        <li *ngIf="!authenticated()">
          <a routerLink="/login" routerLinkActive="active">LOGIN</a>
        </li>
        <li *ngIf=!authenticated()>
          <a routerLink="/register" routerLinkActive="active">SIGNUP</a>
        </li>
        <li *ngIf=authenticated()>
          <a routerLink="/logout" class="black-text">LOGOUT</a>
        </li>
        <li *ngIf=authenticated()>
          <a routerLink="/profile" class="dropdown-trigger black-text" data-target="dropdown1">PROFILE<i class="material-icons right">arrow_drop_down</i></a>
        </li>
        <li>
          <a class="btn waves-effect waves-lime lime darken-4 white-text">Donate</a>
        </li>
      </ul>
    </div>
  </nav>
  <ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
    <li class="divider" tabindex="-1"></li>
    <li><a href="#!">three</a></li>
    <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
    <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
  </ul>
</header>
<main>
  <router-outlet></router-outlet>
</main>
<footer></footer>

这是我的风格.css

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/materialize-css/dist/css/materialize.css";
@import url('https://fonts.googleapis.com/css?family=Philosopher');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

您可以尝试直接在应用程序组件 ts/js 文件上导入样式文件吗？如果您安装了所有依赖项并且它适用于其他页面，则可能是导入或错误的路径问题。

相关内容

最新更新

热门标签：