- Home
- Icon Tutorial
- font-awesome
- material-icons
- ▼action-icons
- Material Icon Shopping_cart
- Material Icon Speaker_notes
- Material Icon Spellcheck
- Material Icon Star_rate
- Material Icon Stars
- Material Icon Store
- Material Icon Subject
- Material Icon Supervisor_account
- Material Icon Swap_horiz
- Material Icon Swap_vert
- Material Icon Swap_vertical_circle
- Material Icon System_update_alt
- Material Icon Tab
- Material Icon Tab_unselected
- Material Icon Theaters
- Material Icon Thumb_down
- Material Icon Thumb_up
- Material Icon Thumbs_up_down
- Material Icon Timeline
- Material Icon Toc
- Material Icon Today
- Material Icon Toll
- Material Icon Touch_app
- Material Icon Track_changes
- Material Icon Translate
- Material Icon Trending_down
- Material Icon Trending_flat
- Material Icon Trending_up
- Material Icon Turned_in
- Material Icon Turned_in_not
- Material Icon Update
- Material Icon Verified_user
- Material Icon View_agenda
- Material Icon View_array
- Material Icon View_carousel
- Material Icon View_column
- Material Icon View_day
- Material Icon View_headline
- Material Icon View_list
- Material Icon View_module
- Material Icon View_quilt
- Material Icon View_stream
- Material Icon View_week
- Material Icon Visibility
- Material Icon Visibility_off
- Material Icon Watch_later
- Material Icon Work
- Material Icon Youtube_searched_for
- Material Icon Zoom_in
- Material Icon Zoom_out
- action icons part I
- action icons part III
Material Icon Thumb_down Icon
Usage
<i class="material-icons">thumb_down</i>
Out of the box
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<i class="material-icons">thumb_down</i>
</body>
</html>
Live Demo
Large Icon
<!DOCTYPE html>
<html>
<head><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style type="text/css">
.material-icons.md-48 { font-size: 48px; }
</style>
</head>
<body>
<i class="material-icons md-48">thumb_down</i>
</body>
</html>
Live Demo
Change color
<!DOCTYPE html>
<html>
<head><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style type="text/css">
.material-icons.md-18 { font-size: 18px;color: #0000FF }
.material-icons.md-24 { font-size: 24px;color: #0000FF }
.material-icons.md-36 { font-size: 36px;color: #0000FF }
.material-icons.md-48 { font-size: 48px;color: #0000FF }
</style>
</head>
<body>
<p><i class="material-icons md-18">thumb_down</i></p>
<p><i class="material-icons md-24">thumb_down</i></p>
<p><i class="material-icons md-36">thumb_down</i></p>
<p><i class="material-icons md-48">thumb_down</i></p>
</body>
</html>
Live Demo
Previous: Material Icon Theaters
Next:
Material Icon Thumb_up Icon