Materializecss icons not working?

Question

I am using materializecss. But I can't get the icons to work it says the word but doesn't show the icon?

I included the materializecss and the js but still not working...

Anyone know how to fix this?

Answer 1

you have to include the icons with this link:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

place this somewhere in your head and it will work!

Answer 2

You can perform the following steps to render the icon -

1. add this link in your html page - <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

2. open the browser and you will see that icon has rendered. but we dont want the icon to be rendered using googleapis.

3. open the console and go to the src of google apis and open the css file, and copy the whole css and add the css into a css file or materialize.min.css.

4. you will see the font url in the css that you just copied, open that url in the browser and the file of woff2 format will be downloaded.

5. now just copy the file into the font folder and change the src of the font in the css file to point to this file.

6. remove the link that you included in step -1 .

refresh the page, you will see that icon has rendered.

Thanks