Having an issue implementing MaterializeCSS Icons on the navbar. The arrow-drop_down icon is not displaying correctly, showing only text instead. Oddly enough, the icons render properly on other pages except for the app.component.html file.
I attempted to directly import the code snippet below into the index.html file with no change in result. I'm unsure if there's something missing here and puzzled as to why the icons show up on every component except for app.component.html
Any assistance would be greatly appreciated. Thank you. Please let me know if more information is needed.
<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>This is my 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');