Material Design Icons: Social
Material Design Icons allow designers and developers targeting various platforms to download icons in the format, color and size they need for any web project.We have listed here Material Design Icons courtesy of Google. You can download them directly from the Material Design specs.How to Use Material Design Icons?
To be able to use these icons, you must include this line in the portion of your HTML code<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">To use these icons, add the material-icons class on your web pages. For an example: If you want to add location icon,then add the below code into the web page.
<i class="material-icons">add_location</i>
Material Design Icons Size
To control the size of the icon, you can simply add font-size: 30px property of your icon. Optionally you can use preset classes as shown below.<i class="material-icons" style="font-size: 20px;">add_location</i>
<i class="tiny material-icons">add_location</i>
<i class="small material-icons">add_location</i>
<i class="medium material-icons">add_location</i>
<i class="large material-icons">add_location</i>
Material Design Social
# | Icon | Description | Demo |
---|---|---|---|
1 | domain | domain | View Demo ➧ |
2 | group_add | group_add | View Demo ➧ |
3 | group | group | View Demo ➧ |
4 | location_city | location_city | View Demo ➧ |
5 | mood_bad | mood_bad | View Demo ➧ |
6 | mood | mood | View Demo ➧ |
7 | notifications_active | notifications_active | View Demo ➧ |
8 | notifications | notifications | View Demo ➧ |
9 | notifications_none | notifications_none | View Demo ➧ |
10 | notifications_off | notifications_off | View Demo ➧ |
11 | notifications_paused | notifications_paused | View Demo ➧ |
12 | pages | pages | View Demo ➧ |
13 | party_mode | party_mode | View Demo ➧ |
14 | people | people | View Demo ➧ |
15 | people_outline | people_outline | View Demo ➧ |
16 | person_add | person_add | View Demo ➧ |
17 | person | person | View Demo ➧ |
18 | person_outline | person_outline | View Demo ➧ |
19 | plus_one | plus_one | View Demo ➧ |
20 | poll | poll | View Demo ➧ |
21 | public | public | View Demo ➧ |
22 | school | school | View Demo ➧ |
23 | sentiment_dissatisfied | sentiment_dissatisfied | View Demo ➧ |
24 | sentiment_neutral | sentiment_neutral | View Demo ➧ |
25 | sentiment_satisfied | sentiment_satisfied | View Demo ➧ |
26 | sentiment_very_dissatisfied | sentiment_very_dissatisfied | View Demo ➧ |
27 | sentiment_very_satisfied | sentiment_very_satisfied | View Demo ➧ |
28 | share | share | View Demo ➧ |
29 | whatshot | whatshot | View Demo ➧ |
# | Icon | Description | Demo |