Instructions to include the font icons

[arunkumar413]

Hello Team,

I followed the instructions to include the icon fonts library in a webpage but the icons aren't displaying. I tried the below link in a test page (https://stackblitz.com/edit/react-h3uqjv?file=public%2Findex.html,src%2FApp.js) but the icons aren't rendering.

It seems that the link <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> isn't sufficient to include the icons.

Could you please specify clear instructions in the below link.

https://developers.google.com/fonts/docs/material_icons#icon_font_for_the_web

Thanks, Arun

[aisgbnok]

@arunkumar413, simply, your example uses two different styles: Material Icons (aka Filled) and Material Icons Outlined. The Google Fonts stylesheet that you are linking is only for Material Icons so those icons will render. The Outlined icons will not as their stylesheet is not linked. You need to also link the Outlined stylesheet.

Detailed

If you open the https://fonts.googleapis.com/icon?family=Material+Icons link that you are using you will see that it provides you only with the .material-icons class selector:

Your HTML uses .material-icons and .material-icons-outlined those are two different classes. The tags with the .material-icons class will render correctly as that class is defined by the stylesheet you link to. However, the .material-icons-outlined will not render as that class isn't included in that stylesheet. You need to include a link to each style you are using. So you will need to also link to the Outlined stylesheet:

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

You can include both in a single link using css2 instead of icon:

https://fonts.googleapis.com/css2?family=Material+Icons&family=Material+Icons+Outlined

I personally am not sure what the difference is between using the css2 or icon API. Maybe someone else more familiar with the APIs could enlighten us both. You might also want to use Material Symbols as I believe those are getting more active development these days along with more robust customization. Regardless I hope this helps. 😃

[arunkumar413]

@aisgbnok Thanks for the information.

[aisgbnok]

No problem. I quickly glanced at the Material Icons Guide and it doesn't seem to explain how to use different styles. That should probably be included or be more discoverable if it exists somewhere.