[SOLVED] Materialize:materialize Icons are not working

Hello,
I’m facing an issue where after adding

materialize:materialize

Everything seems to work fine expect for some CSS styles and inability to use any of the icons.

I have added all of dependencies too

fourseven:scss
meteor
jquery

Using the latest version of everything available. What’s the issue?

PS.
Using sample code from materialize’s website.

<body>
  <nav class="nav-extended">
    <div class="nav-wrapper">
      <a href="#" class="brand-logo">Logo</a>
      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">JavaScript</a></li>
      </ul>
      <ul class="side-nav" id="mobile-demo">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
    <div class="nav-content">
      <ul class="tabs tabs-transparent">
        <li class="tab"><a href="#test1">Test 1</a></li>
        <li class="tab"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab"><a href="#test4">Test 4</a></li>
      </ul>
    </div>
  </nav>
  <div id="test1" class="col s12">Test 1</div>
  <div id="test2" class="col s12">Test 2</div>
  <div id="test3" class="col s12">Test 3</div>
  <div id="test4" class="col s12">Test 4</div>


  <a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a>
       <button class="btn waves-effect waves-light" type="submit" name="action">Submit
    <i class="material-icons right">send</i>
  </button>

  <a class="btn-large disabled">Button</a>
<a class="btn disabled">Button</a>
<a class="btn-flat disabled">Button</a>
<a class="btn-floating disabled"><i class="material-icons">add</i></a>

</body>


Gives me this

Instead of

Any errors in the console? Any issues downloading the font files from the remote host?

No errors, or issues while downloading too.

Also noticed that some javascript functionality that comes with Materialize doesn’t function. Perhaps I should add it manually?

If I remember correctly you need to get the icons font on your own.

1 Like

Yeh I think @storyteller is correct if my memory serves me well. Also about the functionality not working. Are you initializing it correctly? How are you doing it now? Oncreated? or OnRendered?

1 Like

Yes, true. I had to include icon fonts on my own, and I got it working. Thanks!