1

I added

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

to index.html

but I can't show the icon on the web page it shows the icon name as a string.

I tried

<span class="material-icons-outlined">
  done
</span>

but it does not work.

Improve this question
2
  • Change class from "material-icons-outlined" to "material-icons"
    – Luiz
    Commented Nov 30, 2021 at 13:41
  • I did it but it does not work
    – Jafar Amini
    Commented Nov 30, 2021 at 13:43

1 Answer 1

Reset to default
6

You can show Material icons on the web page using this code

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

<i class="material-icons">cloud</i>
<i class="material-icons" style="font-size:48px;">cloud</i>
<i class="material-icons" style="font-size:60px;color:red;">cloud</i>

</body>
</html>

Example

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

<i class="material-icons">cloud</i>
<i class="material-icons" style="font-size:48px;">cloud</i>
<i class="material-icons" style="font-size:60px;color:red;">cloud</i>

Improve this answer
1
  • 1
    Yes, it works thanks a lot. Very nice answer and what I was looking for.
    – Jafar Amini
    Commented Nov 30, 2021 at 13:47

Not the answer you're looking for? Browse other questions tagged or ask your own question.