Я пытаюсь использовать иконку MaterializeCSS для работы на панели навигации.В опубликованном коде arrow-drop_down не работает.Вместо этого он показывает только текст.Значки отображаются на других страницах, кроме файла app.component.html.
Я попытался импортировать приведенный ниже код прямо в файл index.html.Все тот же результат.Я что-то здесь упускаю?Кроме того, я не могу понять причину, по которой значки отображаются в любом другом компоненте, кроме app.component.html
. Любая помощь будет принята с благодарностью.Спасибо.Дайте мне знать, если потребуется более подробная информация.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
index.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>
Это мой style.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');