- Home
- Icon Tutorial
- font-awesome
- material-icons
- ▼action-icons
- Material Icon Accessibility
- Material Icon Accessible
- Material Icon Account_balance
- Material Icon Account_balance_wallet
- Material Icon Account_box
- Material Icon Account_circle
- Material Icon Add_shopping_cart
- Material Icon Alarm
- Material Icon Alarm_add
- Material Icon Alarm_off
- Material Icon Alarm_on
- Material Icon All_out
- Material Icon Android
- Material Icon Announcement
- Material Icon Aspect_ratio
- Material Icon Assessment
- Material Icon Assignment
- Material Icon Assignment_ind
- Material Icon Assignment_late
- Material Icon Assignment_return
- Material Icon Assignment_returned
- Material Icon Assignment_turned_in
- Material Icon Autorenew
- Material Icon Backup
- Material Icon Book
- Material Icon Bookmark
- Material Icon Bookmark-border
- Material Icon Bug-report
- Material Icon Build
- Material Icon Cached
- Material Icon Camera_enhance
- Material Icon Card_giftcard
- Material Icon Card_membership
- Material Icon Card_travel
- Material Icon Change_history
- Material Icon Check_circle
- Material Icon Chrome_reader_mode
- Material Icon Class
- Material Icon Code
- Material Icon Compare_arrows
- Material Icon Copyright
- Material Icon Credit_card
- Material Icon Dashboard
- Material Icon Date_range
- Material Icon Delete
- Material Icon Description
- Material Icon Dns
- Material Icon Done
- Material Icon Done_all
- Material Icon Donut_large
- Material Icon Donut_small
- Material Icon Eject
- Material Icon Event
- Material Icon Event_seat
- Material Icon Exit_to_app
- Material Icon Explore
- Material Icon Extension
- Material Icon Face
- Material Icon Favorite
- Material Icon Favorite_border
- Material Icon Feedback
- Material Icon Find_in_page
- Material Icon Find_replace
- Material Icon Fingerprint
- Material Icon Flight_land
- Material Icon Flight_takeoff
- Material Icon Flip_to_back
- Material Icon Flip_to_front
- Material Icon Gavel
- Material Icon Get_app
- Material Icon Gif
- Material Icon Grade
- Material Icon Group_work
- Material Icon Help
- Material Icon Help_outline
- Material Icon Highlight_off
- Material Icon History
- Material Icon Home
- Material Icon Hourglass_empty
- action icons part II
- action icons part III
Material Icon Code Icon
Usage
<i class="material-icons">code</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">code</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">code</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">code</i></p>
<p><i class="material-icons md-24">code</i></p>
<p><i class="material-icons md-36">code</i></p>
<p><i class="material-icons md-48">code</i></p>
</body>
</html>
Live Demo
Previous: Material Icon Class Icon
Next:
Material Icon Compare_arrows Icon
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics