how to display materialize icons?

I have simple html page and use materialize CSS framework. I want to use materialize icons. <head> tag contains

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<link href="../css/materialize.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<body> contains:

<div class="search-wrapper card">
   <input id="search">
   <i class="material-icons">search</i>
   <div class="search-results"></div>
</div>

Page displays it as text, not icon

if i put <i class="small mdi-action-search"></i> then it works.

But i don't understand why <i class="material-icons">search</i> doesn't work.

What should i do to make it works?

Solution

Since I use IntelliJ Idea, utf-16 encoding was used by default for some reason.

Right clicking on the file content and changing file encoding to utf-8 helped