Material icons not showing on a hosted webpages
<p>I hosted a site on Github pages, and the material icons are not showing. The issue is that they are showing when I launch the index.html page from my browser (instead of going to the hosted page).</p>

<p><a href="https://i.stack.imgur.com/AdHut.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AdHut.jpg" alt="What I get from the page on my computer"></a></p>

<p><a href="https://i.stack.imgur.com/xgFDl.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xgFDl.jpg" alt="What I get from the hosted page"></a></p>

<p>Here's the html for this part:</p>

<pre><code>&lt;head&gt;
    &lt;link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
    &lt;link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"/&gt;
    &lt;meta charset="UTF-8"/&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
&lt;/head&gt;

&lt;body&gt;


    &lt;div class="row"&gt;
        &lt;div class="col s12 m6"&gt;
            &lt;div class="card"&gt;
            &lt;div class="card-content blue-text text-darken-2"&gt;
            &lt;span class="card-title"&gt;Olivier Grech&lt;/span&gt;
            &lt;p&gt;Text&lt;/p&gt;
            &lt;div&gt;&lt;i class="material-icons"&gt;phone&lt;/i&gt;&lt;em&gt;Phone&lt;/em&gt;&lt;/div&gt;
                &lt;div&gt;&lt;a href="mailto:mail"&gt;&lt;i class="material-icons"&gt;email&lt;/i&gt;&lt;/a&gt;&lt;em&gt;mail&lt;/em&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

&lt;!--Rest of the page--&gt;
</code></pre>