16

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?

Tom Zych
  • 13,329
  • 9
  • 36
  • 53
Aapje
  • 195
  • 1
  • 1
  • 7

5 Answers5

52

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!

C.Schubert
  • 2,034
  • 16
  • 20
  • Oh, this one's a gotcha! Thanks! However, what is that about? Do we download something from Google that way? Or do they just want to track what we're using? What if I plan to deploy my site on a disconnected environment (strict security intranet)? – Konrad Viltersten Nov 14 '16 at 17:19
5

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

Ujjwal Kumar Gupta
  • 2,308
  • 1
  • 21
  • 32
  • 1
    Very useful in order to save time to avoid making too many requests to google api. Also if your site does not need internet conection. – Alejandro Bastidas Feb 12 '18 at 15:58
  • 2
    Just to put all I did for others reference: go to link [Material+Icons](https://fonts.googleapis.com/icon?family=Material+Icons) Copy the entire content and save as css file. viz. *materializeicons.css* Then update the font file location. `src: url('../fonts/materializecss.woff2') format('woff2');`. Ensure to have the font file at ../fonts/ folder. i.e. Download [woff2 Font](https://fonts.gstatic.com/s/materialicons/v41/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) to fonts folder. The url should be based on where you store the font file. – Doogle Oct 14 '18 at 07:53
0

If you are going to use icon don't forget to add CDN. If you are not going to use CDN you have to download icon files and map with your code.

CDN for Material Icons

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

Following tags can be used to indicate material icons.

<i class="material-icons">add</i>

To get more details please refer this official link. Material-icons

Following is a sample working code snippet with few icons.

<!DOCTYPE html>
<html>

 <head>
   <title>ICON</title>
   <!-- include material-icons -->
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <!--Let browser know website is optimized for mobile-->
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 </head>

 <body class="row">
   <div class="col s12" >          
    <i class="material-icons">add</i>
    <i class="material-icons">thumb_up</i>
    <i class="material-icons">shopping_cart</i>
    <i class="material-icons">perm_identity</i>   
   </div>
 </body>

</html>
Sandun Madola
  • 870
  • 2
  • 10
  • 26
0

If anyone else stumbles here, make sure you are not setting the element's font somewhere else that overrides the icon font. Be especially ware of !importants.

karuhanga
  • 3,010
  • 1
  • 27
  • 30
0

We can also accomplish this by installing npm package...

Step 1 : npm i material-design-icons

For more details Click here

Step 2 : Add link inside angular.json file under style tag as :

"styles": [
  "node_modules/material-design-icons/iconfont/material-icons.css"
]
mabdullahse
  • 3,474
  • 25
  • 23