[SOLVED] Materialize:materialize Icons are not working


#1

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


#2

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


#3

No errors, or issues while downloading too.


#4

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


#5

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


#6

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?


#7

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