CODEWITHSUNDEEP
htmlcssgoogle-material-icons
Jafar Amini
Jafar Amini

Reputation: 415

How can I use material icon in the web page

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.

Upvotes: 1

Views: 1775

Answers (1)

Alok Tiwari
Alok Tiwari

Reputation: 71

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>

Upvotes: 6

Related Questions