Google Material Icons showing text instead of icon

Question

I don't want icon text to be displayed in case the page fails to load the icons library. For example the below code should display the invite person icon-

<i style="font-size:16px;color:grey" class="material-icons">person_add</i>

But when the page fails to load for some reason(like slow internet connection), the above code is showing text - "person_add" which looks very insulting. Is there any solution for this issue, I infact don't want the text to be appeared in any way even if the library is no present.

Not familiar with Material Icons, but with FontAwesome, classes are used for icons. Are you sure that's not the case? — Andrew Li, Aug 04 '18 at 14:00
@KorelK you mean in the library in the section ? Here it is - — Karan Parte, Aug 04 '18 at 14:05

Coral Kashri · Answer 1 · 2018-08-04T14:13:29.700

0

You have a problem in your link:

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

Remove the ; and add https:// in the beginning of the href:

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

edited Aug 04 '18 at 14:13

answered Aug 04 '18 at 14:07

Coral Kashri

3,436
2
10
22

1

Still the issue persists – Karan Parte Aug 04 '18 at 14:16
@KaranParte can you post your whole html page? – Coral Kashri Aug 04 '18 at 14:19

score 0 · Answer 2 · answered Aug 04 '18 at 16:12

First Clear Your cache
Then add the link in your head section like this

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

Then in your body section add this

  <i style="font-size:16px;color:grey" class="material-icons">person_add</i>

it should look like this

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <!--your code-->

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

</head>

<body>
  <!--your code-->

  <i style="font-size:16px;color:grey" class="material-icons">person_add</i>

  <!--your code-->

</body>

</html>

Google Material Icons showing text instead of icon

2 Answers2