TerryN TerryN - 1 year ago 487
CSS Question

MaterializeCSS Icons not working

I'm having an issue with getting the icons to display while using MaterializeCSS. I'm using the bare bones "Getting Started" from the documentation but for whatever reason icons refuse to show up. Below is the code I'm using

<!DOCTYPE html>

<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<ul class="hide-on-med-and-down">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
<ul id="slide-out" class="side-nav fixed">
<li class="bold"><a href="#!" class="waves-effect waves-teal">First Sidebar Link</a></li>
<li class="bold"><a href="#!" class="">Second Sidebar Link</a></li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<a class="collapsible-header waves-effect waves-teal">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
<div class="collapsible-body">
<li><a href="#!">First</a></li>
<li><a href="#!">Second</a></li>
<li><a href="#!">Third</a></li>
<li><a href="#!">Fourth</a></li>
<a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
<!--Import jQuery before materialize.js-->
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
menuWidth: 300, // Default is 240
closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor


All this code is trying to do is display a navbar, it was pulled directly from the documentation.

The hamburger menu doesn't appear when the browser is resized
No Hamburger Icon

The dropdown arrow doesn't appear beside the dropdown menu item.
Dropdown Missing

I feel like it's something stupid that I'm missing but I've been looking at it for 2 hours and my brain is melted. Any help would be appreciated.

Answer Source

EDIT: Here's the updated code for the dropdown arrow too:

<i class="material-icons right">arrow_drop_down</i>

I ran into this issue too and wondered where my hamburger icon went!

Unfortunately, a lot of their documentation hasn't been refreshed, so the code you are using is a bit outdated.

Change this:

<i class="mdi-navigation-menu"></i>

to this:

<i class="material-icons">menu</i>

and you should see the icon. If you check their source code, you'll see that even their site uses the updated code that's different from their docs:

MaterializeCSS Source Code for Menu Icon

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download