- Home
- Icon Tutorial
- font-awesome
- material-icons
- ▼action-icons
- Material Icon Hourglass_full
- Material Icon Http
- Material Icon Https
- Material Icon Important_devices
- Material Icon Info
- Material Icon Info_outline
- Material Icon Input
- Material Icon Invert_colors
- Material Icon Label
- Material Icon Label_outline
- Material Icon Language
- Material Icon Launch
- Material Icon Lightbulb_outline
- Material Icon Line_style
- Material Icon Line_weight
- Material Icon List
- Material Icon Lock
- Material Icon Lock_open
- Material Icon Lock_outline
- Material Icon Loyalty
- Material Icon Markunread_mailbox
- Material Icon Motorcycle
- Material Icon Note_add
- Material Icon Offline_pin
- Material Icon Opacity
- Material Icon Open_in_browser
- Material Icon Open_in_new
- Material Icon Open_with
- Material Icon Pageview
- Material Icon Pan_tool
- Material Icon Payment
- Material Icon Perm_camera_mic
- Material Icon Perm_contact_calendar
- Material Icon Perm_data_setting
- Material Icon Perm_device_information
- Material Icon Perm_identity
- Material Icon Perm_media
- Material Icon Perm_phone_msg
- Material Icon Perm_scan_wifi
- Material Icon Pets
- Material Icon Picture_in_picture
- Material Icon Picture_in_picture_alt
- Material Icon Play_for_work
- Material Icon Polymer.php
- Material Icon Power_settings_new
- Material Icon Pregnant_woman
- Material Icon Print
- Material Icon Query_builder
- Material Icon Question_answer
- Material Icon Receipt
- Material Icon Record_voice_over
- Material Icon Redeem
- Material Icon Reorder
- Material Icon Report_problem
- Material Icon Restore
- Material Icon Room
- Material Icon Rounded_corner
- Material Icon Rowing
- Material Icon Schedule
- Material Icon Search
- Material Icon Settings
- Material Icon Settings_applications
- Material Icon Settings_backup_restore
- Material Icon Settings_bluetooth
- Material Icon Settings_brightness
- Material Icon Settings_cell
- Material Icon Settings_ethernet
- Material Icon Settings_input_antenna
- Material Icon Settings_input_component
- Material Icon Settings_input_composite
- Material Icon Settings_input_hdmi
- Material Icon Settings_input_svideo
- Material Icon Settings_overscan
- Material Icon Settings_phone
- Material Icon Settings_power
- Material Icon Settings_remote
- Material Icon Settings_voice
- Material Icon Shop
- Material Icon Shop_two
- Material Icon Shopping_basket
- action icons part III
- action icons part I
Material Icon Picture_in_picture Icon
Usage
<i class="material-icons">picture_in_picture</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">picture_in_picture</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">picture_in_picture</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">picture_in_picture</i></p>
<p><i class="material-icons md-24">picture_in_picture</i></p>
<p><i class="material-icons md-36">picture_in_picture</i></p>
<p><i class="material-icons md-48">picture_in_picture</i></p>
</body>
</html>
Live Demo
Previous: Material Icon Pets Icon
Next:
Material Icon Picture_in_picture_alt Icon
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics