Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <p>See also Google's list: <a href="https://github.com/google/material-design-icons/blob/master/iconfont/codepoints" target="_blank">codepoints</a>.  To use a Material Icon as CSS pseudo content (:before, :after): <code>xe23c</code> becomes <code>content:"\e23C"</code>.  You can use ligatures in pseudo elements, but this will not be supported in IE9. For more stuff, visit me at <a href="https://btn.ninja/page.icons.php" target="_blank">btn.ninja</a>.</p>

<!--new-->
<div class="clearfix">
<i class="material-icons">&#xea5f;</i>
<i class="material-icons">&#xe9bc;</i>
<i class="material-icons">&#xe994;</i>
<i class="material-icons admin_panel_settings">&#xef3d;</i>
<i class="material-icons fact_check">&#xf0c5;</i>
<i class="material-icons notification_important">&#xe004;</i>
<i class="material-icons speed">&#xe9e4;</i>
</div>

<div class="clearfix">
<i class="material-icons add_chart">&#xe97b;</i>
<i class="material-icons add_moderator">&#xe97d;</i>
<i class="material-icons add_ic_call">&#xe97c;</i>
<i class="material-icons approval">&#xe982;</i>
<i class="material-icons ballot">&#xe172;</i>
<i class="material-icons dashboard_customize">&#xe99b;</i>
<i class="material-icons edit_attributes">&#xe578;</i>
<i class="material-icons edit_off">&#xe950;</i>
<i class="material-icons how_to_reg">&#xe174;</i>  
<i class="material-icons how_to_vote">&#xe175;</i>
<i class="material-icons list_alt">&#xe0ee;</i>
<i class="material-icons menu_book">&#xea19;</i>
<i class="material-icons outdoor_grill">&#xea47;</i>
<i class="material-icons post_add">&#xea20;</i>
<i class="material-icons supervised_user_circle">&#xe939;</i>
<i class="material-icons toggle_on">&#xe9f6;</i>
<i class="material-icons toggle_off">&#xe9f5;</i>
<i class="material-icons table_chart">&#xe265;</i>
<i class="material-icons two_wheeler">&#xe9f9;</i>
<i class="material-icons waves">&#xe176;</i>
</div>

<br>

<!--list-->
<i class="material-icons 3d_rotation">&#xe84d;</i>
<i class="material-icons ac_unit">&#xeb3b;</i>
<i class="material-icons access_alarm">&#xe190;</i>
<i class="material-icons access_time">&#xe192;</i>
<i class="material-icons accessibility">&#xe84e;</i>
<i class="material-icons accessible">&#xe914;</i>
<i class="material-icons account_balance">&#xe84f;</i>
<i class="material-icons account_balance_wallet">&#xe850;</i>
<i class="material-icons account_box">&#xe851;</i>
<i class="material-icons account_circle">&#xe853;</i>
<i class="material-icons adb">&#xe60e;</i>
<i class="material-icons add">&#xe145;</i>
<i class="material-icons add_a_photo">&#xe439;</i>
<i class="material-icons add_alarm">&#xe193;</i>
<i class="material-icons add_alert">&#xe003;</i>
<i class="material-icons add_box">&#xe146;</i>
<i class="material-icons add_circle">&#xe147;</i>
<i class="material-icons add_circle_outline">&#xe148;</i>
<i class="material-icons add_location">&#xe567;</i>
<i class="material-icons add_shopping_cart">&#xe854;</i>
<i class="material-icons add_to_photos">&#xe39d;</i>
<i class="material-icons add_to_queue">&#xe05c;</i>
<i class="material-icons adjust">&#xe39e;</i>
<i class="material-icons airline_seat_flat">&#xe630;</i>
<i class="material-icons airline_seat_flat_angled">&#xe631;</i>
<i class="material-icons airline_seat_individual_suite">&#xe632;</i>
<i class="material-icons airline_seat_legroom_extra">&#xe633;</i>
<i class="material-icons airline_seat_legroom_normal">&#xe634;</i>
<i class="material-icons airline_seat_legroom_reduced">&#xe635;</i>
<i class="material-icons airline_seat_recline_extra">&#xe636;</i>
<i class="material-icons airline_seat_recline_normal">&#xe637;</i>
<i class="material-icons airplanemode_active">&#xe195;</i>
<i class="material-icons airplanemode_inactive">&#xe194;</i>
<i class="material-icons airplay">&#xe055;</i>
<i class="material-icons airport_shuttle">&#xeb3c;</i>
<i class="material-icons alarm">&#xe855;</i>
<i class="material-icons alarm_add">&#xe856;</i>
<i class="material-icons alarm_off">&#xe857;</i>
<i class="material-icons alarm_on">&#xe858;</i>
<i class="material-icons album">&#xe019;</i>
<i class="material-icons all_inclusive">&#xeb3d;</i>
<i class="material-icons all_out">&#xe90b;</i>
<i class="material-icons android">&#xe859;</i>
<i class="material-icons announcement">&#xe85a;</i>
<i class="material-icons apps">&#xe5c3;</i>
<i class="material-icons archive">&#xe149;</i>
<i class="material-icons arrow_back">&#xe5c4;</i>
<i class="material-icons arrow_downward">&#xe5db;</i>
<i class="material-icons arrow_drop_down">&#xe5c5;</i>
<i class="material-icons arrow_drop_down_circle">&#xe5c6;</i>
<i class="material-icons arrow_drop_up">&#xe5c7;</i>
<i class="material-icons arrow_forward">&#xe5c8;</i>
<i class="material-icons arrow_upward">&#xe5d8;</i>
<i class="material-icons art_track">&#xe060;</i>
<i class="material-icons aspect_ratio">&#xe85b;</i>
<i class="material-icons assessment">&#xe85c;</i>
<i class="material-icons assignment">&#xe85d;</i>
<i class="material-icons assignment_ind">&#xe85e;</i>
<i class="material-icons assignment_late">&#xe85f;</i>
<i class="material-icons assignment_return">&#xe860;</i>
<i class="material-icons assignment_returned">&#xe861;</i>
<i class="material-icons assignment_turned_in">&#xe862;</i>
<i class="material-icons assistant">&#xe39f;</i>
<i class="material-icons assistant_photo">&#xe3a0;</i>
<i class="material-icons attach_file">&#xe226;</i>
<i class="material-icons attach_money">&#xe227;</i>
<i class="material-icons attachment">&#xe2bc;</i>
<i class="material-icons audiotrack">&#xe3a1;</i>
<i class="material-icons autorenew">&#xe863;</i>
<i class="material-icons av_timer">&#xe01b;</i>
<i class="material-icons backspace">&#xe14a;</i>
<i class="material-icons backup">&#xe864;</i>
<i class="material-icons battery_alert">&#xe19c;</i>
<i class="material-icons battery_charging_full">&#xe1a3;</i>
<i class="material-icons battery_full">&#xe1a4;</i>
<i class="material-icons battery_std">&#xe1a5;</i>
<i class="material-icons battery_unknown">&#xe1a6;</i>
<i class="material-icons beach_access">&#xeb3e;</i>
<i class="material-icons beenhere">&#xe52d;</i>
<i class="material-icons block">&#xe14b;</i>
<i class="material-icons bluetooth">&#xe1a7;</i>
<i class="material-icons bluetooth_audio">&#xe60f;</i>
<i class="material-icons bluetooth_connected">&#xe1a8;</i>
<i class="material-icons bluetooth_disabled">&#xe1a9;</i>
<i class="material-icons bluetooth_searching">&#xe1aa;</i>
<i class="material-icons blur_circular">&#xe3a2;</i>
<i class="material-icons blur_linear">&#xe3a3;</i>
<i class="material-icons blur_off">&#xe3a4;</i>
<i class="material-icons blur_on">&#xe3a5;</i>
<i class="material-icons book">&#xe865;</i>
<i class="material-icons bookmark">&#xe866;</i>
<i class="material-icons bookmark_border">&#xe867;</i>
<i class="material-icons border_all">&#xe228;</i>
<i class="material-icons border_bottom">&#xe229;</i>
<i class="material-icons border_clear">&#xe22a;</i>
<i class="material-icons border_color">&#xe22b;</i>
<i class="material-icons border_horizontal">&#xe22c;</i>
<i class="material-icons border_inner">&#xe22d;</i>
<i class="material-icons border_left">&#xe22e;</i>
<i class="material-icons border_outer">&#xe22f;</i>
<i class="material-icons border_right">&#xe230;</i>
<i class="material-icons border_style">&#xe231;</i>
<i class="material-icons border_top">&#xe232;</i>
<i class="material-icons border_vertical">&#xe233;</i>
<i class="material-icons branding_watermark">&#xe06b;</i>
<i class="material-icons brightness_1">&#xe3a6;</i>
<i class="material-icons brightness_2">&#xe3a7;</i>
<i class="material-icons brightness_3">&#xe3a8;</i>
<i class="material-icons brightness_4">&#xe3a9;</i>
<i class="material-icons brightness_5">&#xe3aa;</i>
<i class="material-icons brightness_6">&#xe3ab;</i>
<i class="material-icons brightness_7">&#xe3ac;</i>
<i class="material-icons brightness_auto">&#xe1ab;</i>
<i class="material-icons brightness_high">&#xe1ac;</i>
<i class="material-icons brightness_low">&#xe1ad;</i>
<i class="material-icons brightness_medium">&#xe1ae;</i>
<i class="material-icons broken_image">&#xe3ad;</i>
<i class="material-icons brush">&#xe3ae;</i>
<i class="material-icons bubble_chart">&#xe6dd;</i>
<i class="material-icons bug_report">&#xe868;</i>
<i class="material-icons build">&#xe869;</i>
<i class="material-icons burst_mode">&#xe43c;</i>
<i class="material-icons business">&#xe0af;</i>
<i class="material-icons business_center">&#xeb3f;</i>
<i class="material-icons cached">&#xe86a;</i>
<i class="material-icons cake">&#xe7e9;</i>
<i class="material-icons call">&#xe0b0;</i>
<i class="material-icons call_end">&#xe0b1;</i>
<i class="material-icons call_made">&#xe0b2;</i>
<i class="material-icons call_merge">&#xe0b3;</i>
<i class="material-icons call_missed">&#xe0b4;</i>
<i class="material-icons call_missed_outgoing">&#xe0e4;</i>
<i class="material-icons call_received">&#xe0b5;</i>
<i class="material-icons call_split">&#xe0b6;</i>
<i class="material-icons call_to_action">&#xe06c;</i>
<i class="material-icons camera">&#xe3af;</i>
<i class="material-icons camera_alt">&#xe3b0;</i>
<i class="material-icons camera_enhance">&#xe8fc;</i>
<i class="material-icons camera_front">&#xe3b1;</i>
<i class="material-icons camera_rear">&#xe3b2;</i>
<i class="material-icons camera_roll">&#xe3b3;</i>
<i class="material-icons cancel">&#xe5c9;</i>
<i class="material-icons card_giftcard">&#xe8f6;</i>
<i class="material-icons card_membership">&#xe8f7;</i>
<i class="material-icons card_travel">&#xe8f8;</i>
<i class="material-icons casino">&#xeb40;</i>
<i class="material-icons cast">&#xe307;</i>
<i class="material-icons cast_connected">&#xe308;</i>
<i class="material-icons center_focus_strong">&#xe3b4;</i>
<i class="material-icons center_focus_weak">&#xe3b5;</i>
<i class="material-icons change_history">&#xe86b;</i>
<i class="material-icons chat">&#xe0b7;</i>
<i class="material-icons chat_bubble">&#xe0ca;</i>
<i class="material-icons chat_bubble_outline">&#xe0cb;</i>
<i class="material-icons check">&#xe5ca;</i>
<i class="material-icons check_box">&#xe834;</i>
<i class="material-icons check_box_outline_blank">&#xe835;</i>
<i class="material-icons check_circle">&#xe86c;</i>
<i class="material-icons chevron_left">&#xe5cb;</i>
<i class="material-icons chevron_right">&#xe5cc;</i>
<i class="material-icons child_care">&#xeb41;</i>
<i class="material-icons child_friendly">&#xeb42;</i>
<i class="material-icons chrome_reader_mode">&#xe86d;</i>
<i class="material-icons class">&#xe86e;</i>
<i class="material-icons clear">&#xe14c;</i>
<i class="material-icons clear_all">&#xe0b8;</i>
<i class="material-icons close">&#xe5cd;</i>
<i class="material-icons closed_caption">&#xe01c;</i>
<i class="material-icons cloud">&#xe2bd;</i>
<i class="material-icons cloud_circle">&#xe2be;</i>
<i class="material-icons cloud_done">&#xe2bf;</i>
<i class="material-icons cloud_download">&#xe2c0;</i>
<i class="material-icons cloud_off">&#xe2c1;</i>
<i class="material-icons cloud_queue">&#xe2c2;</i>
<i class="material-icons cloud_upload">&#xe2c3;</i>
<i class="material-icons code">&#xe86f;</i>
<i class="material-icons collections">&#xe3b6;</i>
<i class="material-icons collections_bookmark">&#xe431;</i>
<i class="material-icons color_lens">&#xe3b7;</i>
<i class="material-icons colorize">&#xe3b8;</i>
<i class="material-icons comment">&#xe0b9;</i>
<i class="material-icons compare">&#xe3b9;</i>
<i class="material-icons compare_arrows">&#xe915;</i>
<i class="material-icons computer">&#xe30a;</i>
<i class="material-icons confirmation_number">&#xe638;</i>
<i class="material-icons contact_mail">&#xe0d0;</i>
<i class="material-icons contact_phone">&#xe0cf;</i>
<i class="material-icons contacts">&#xe0ba;</i>
<i class="material-icons content_copy">&#xe14d;</i>
<i class="material-icons content_cut">&#xe14e;</i>
<i class="material-icons content_paste">&#xe14f;</i>
<i class="material-icons control_point">&#xe3ba;</i>
<i class="material-icons control_point_duplicate">&#xe3bb;</i>
<i class="material-icons copyright">&#xe90c;</i>
<i class="material-icons create">&#xe150;</i>
<i class="material-icons create_new_folder">&#xe2cc;</i>
<i class="material-icons credit_card">&#xe870;</i>
<i class="material-icons crop">&#xe3be;</i>
<i class="material-icons crop_16_9">&#xe3bc;</i>
<i class="material-icons crop_3_2">&#xe3bd;</i>
<i class="material-icons crop_5_4">&#xe3bf;</i>
<i class="material-icons crop_7_5">&#xe3c0;</i>
<i class="material-icons crop_din">&#xe3c1;</i>
<i class="material-icons crop_free">&#xe3c2;</i>
<i class="material-icons crop_landscape">&#xe3c3;</i>
<i class="material-icons crop_original">&#xe3c4;</i>
<i class="material-icons crop_portrait">&#xe3c5;</i>
<i class="material-icons crop_rotate">&#xe437;</i>
<i class="material-icons crop_square">&#xe3c6;</i>
<i class="material-icons dashboard">&#xe871;</i>
<i class="material-icons data_usage">&#xe1af;</i>
<i class="material-icons date_range">&#xe916;</i>
<i class="material-icons dehaze">&#xe3c7;</i>
<i class="material-icons delete">&#xe872;</i>
<i class="material-icons delete_forever">&#xe92b;</i>
<i class="material-icons delete_sweep">&#xe16c;</i>
<i class="material-icons description">&#xe873;</i>
<i class="material-icons desktop_mac">&#xe30b;</i>
<i class="material-icons desktop_windows">&#xe30c;</i>
<i class="material-icons details">&#xe3c8;</i>
<i class="material-icons developer_board">&#xe30d;</i>
<i class="material-icons developer_mode">&#xe1b0;</i>
<i class="material-icons device_hub">&#xe335;</i>
<i class="material-icons devices">&#xe1b1;</i>
<i class="material-icons devices_other">&#xe337;</i>
<i class="material-icons dialer_sip">&#xe0bb;</i>
<i class="material-icons dialpad">&#xe0bc;</i>
<i class="material-icons directions">&#xe52e;</i>
<i class="material-icons directions_bike">&#xe52f;</i>
<i class="material-icons directions_boat">&#xe532;</i>
<i class="material-icons directions_bus">&#xe530;</i>
<i class="material-icons directions_car">&#xe531;</i>
<i class="material-icons directions_railway">&#xe534;</i>
<i class="material-icons directions_run">&#xe566;</i>
<i class="material-icons directions_subway">&#xe533;</i>
<i class="material-icons directions_transit">&#xe535;</i>
<i class="material-icons directions_walk">&#xe536;</i>
<i class="material-icons disc_full">&#xe610;</i>
<i class="material-icons dns">&#xe875;</i>
<i class="material-icons do_not_disturb">&#xe612;</i>
<i class="material-icons do_not_disturb_alt">&#xe611;</i>
<i class="material-icons do_not_disturb_off">&#xe643;</i>
<i class="material-icons do_not_disturb_on">&#xe644;</i>
<i class="material-icons dock">&#xe30e;</i>
<i class="material-icons domain">&#xe7ee;</i>
<i class="material-icons done">&#xe876;</i>
<i class="material-icons done_all">&#xe877;</i>
<i class="material-icons donut_large">&#xe917;</i>
<i class="material-icons donut_small">&#xe918;</i>
<i class="material-icons drafts">&#xe151;</i>
<i class="material-icons drag_handle">&#xe25d;</i>
<i class="material-icons drive_eta">&#xe613;</i>
<i class="material-icons dvr">&#xe1b2;</i>
<i class="material-icons edit">&#xe3c9;</i>
<i class="material-icons edit_location">&#xe568;</i>
<i class="material-icons eject">&#xe8fb;</i>
<i class="material-icons email">&#xe0be;</i>
<i class="material-icons enhanced_encryption">&#xe63f;</i>
<i class="material-icons equalizer">&#xe01d;</i>
<i class="material-icons error">&#xe000;</i>
<i class="material-icons error_outline">&#xe001;</i>
<i class="material-icons euro_symbol">&#xe926;</i>
<i class="material-icons ev_station">&#xe56d;</i>
<i class="material-icons event">&#xe878;</i>
<i class="material-icons event_available">&#xe614;</i>
<i class="material-icons event_busy">&#xe615;</i>
<i class="material-icons event_note">&#xe616;</i>
<i class="material-icons event_seat">&#xe903;</i>
<i class="material-icons exit_to_app">&#xe879;</i>
<i class="material-icons expand_less">&#xe5ce;</i>
<i class="material-icons expand_more">&#xe5cf;</i>
<i class="material-icons explicit">&#xe01e;</i>
<i class="material-icons explore">&#xe87a;</i>
<i class="material-icons exposure">&#xe3ca;</i>
<i class="material-icons exposure_neg_1">&#xe3cb;</i>
<i class="material-icons exposure_neg_2">&#xe3cc;</i>
<i class="material-icons exposure_plus_1">&#xe3cd;</i>
<i class="material-icons exposure_plus_2">&#xe3ce;</i>
<i class="material-icons exposure_zero">&#xe3cf;</i>
<i class="material-icons extension">&#xe87b;</i>
<i class="material-icons face">&#xe87c;</i>
<i class="material-icons fast_forward">&#xe01f;</i>
<i class="material-icons fast_rewind">&#xe020;</i>
<i class="material-icons favorite">&#xe87d;</i>
<i class="material-icons favorite_border">&#xe87e;</i>
<i class="material-icons featured_play_list">&#xe06d;</i>
<i class="material-icons featured_video">&#xe06e;</i>
<i class="material-icons feedback">&#xe87f;</i>
<i class="material-icons fiber_dvr">&#xe05d;</i>
<i class="material-icons fiber_manual_record">&#xe061;</i>
<i class="material-icons fiber_new">&#xe05e;</i>
<i class="material-icons fiber_pin">&#xe06a;</i>
<i class="material-icons fiber_smart_record">&#xe062;</i>
<i class="material-icons file_download">&#xe2c4;</i>
<i class="material-icons file_upload">&#xe2c6;</i>
<i class="material-icons filter">&#xe3d3;</i>
<i class="material-icons filter_1">&#xe3d0;</i>
<i class="material-icons filter_2">&#xe3d1;</i>
<i class="material-icons filter_3">&#xe3d2;</i>
<i class="material-icons filter_4">&#xe3d4;</i>
<i class="material-icons filter_5">&#xe3d5;</i>
<i class="material-icons filter_6">&#xe3d6;</i>
<i class="material-icons filter_7">&#xe3d7;</i>
<i class="material-icons filter_8">&#xe3d8;</i>
<i class="material-icons filter_9">&#xe3d9;</i>
<i class="material-icons filter_9_plus">&#xe3da;</i>
<i class="material-icons filter_b_and_w">&#xe3db;</i>
<i class="material-icons filter_center_focus">&#xe3dc;</i>
<i class="material-icons filter_drama">&#xe3dd;</i>
<i class="material-icons filter_frames">&#xe3de;</i>
<i class="material-icons filter_hdr">&#xe3df;</i>
<i class="material-icons filter_list">&#xe152;</i>
<i class="material-icons filter_none">&#xe3e0;</i>
<i class="material-icons filter_tilt_shift">&#xe3e2;</i>
<i class="material-icons filter_vintage">&#xe3e3;</i>
<i class="material-icons find_in_page">&#xe880;</i>
<i class="material-icons find_replace">&#xe881;</i>
<i class="material-icons fingerprint">&#xe90d;</i>
<i class="material-icons first_page">&#xe5dc;</i>
<i class="material-icons fitness_center">&#xeb43;</i>
<i class="material-icons flag">&#xe153;</i>
<i class="material-icons flare">&#xe3e4;</i>
<i class="material-icons flash_auto">&#xe3e5;</i>
<i class="material-icons flash_off">&#xe3e6;</i>
<i class="material-icons flash_on">&#xe3e7;</i>
<i class="material-icons flight">&#xe539;</i>
<i class="material-icons flight_land">&#xe904;</i>
<i class="material-icons flight_takeoff">&#xe905;</i>
<i class="material-icons flip">&#xe3e8;</i>
<i class="material-icons flip_to_back">&#xe882;</i>
<i class="material-icons flip_to_front">&#xe883;</i>
<i class="material-icons folder">&#xe2c7;</i>
<i class="material-icons folder_open">&#xe2c8;</i>
<i class="material-icons folder_shared">&#xe2c9;</i>
<i class="material-icons folder_special">&#xe617;</i>
<i class="material-icons font_download">&#xe167;</i>
<i class="material-icons format_align_center">&#xe234;</i>
<i class="material-icons format_align_justify">&#xe235;</i>
<i class="material-icons format_align_left">&#xe236;</i>
<i class="material-icons format_align_right">&#xe237;</i>
<i class="material-icons format_bold">&#xe238;</i>
<i class="material-icons format_clear">&#xe239;</i>
<i class="material-icons format_color_fill">&#xe23a;</i>
<i class="material-icons format_color_reset">&#xe23b;</i>
<i class="material-icons format_color_text">&#xe23c;</i>
<i class="material-icons format_indent_decrease">&#xe23d;</i>
<i class="material-icons format_indent_increase">&#xe23e;</i>
<i class="material-icons format_italic">&#xe23f;</i>
<i class="material-icons format_line_spacing">&#xe240;</i>
<i class="material-icons format_list_bulleted">&#xe241;</i>
<i class="material-icons format_list_numbered">&#xe242;</i>
<i class="material-icons format_paint">&#xe243;</i>
<i class="material-icons format_quote">&#xe244;</i>
<i class="material-icons format_shapes">&#xe25e;</i>
<i class="material-icons format_size">&#xe245;</i>
<i class="material-icons format_strikethrough">&#xe246;</i>
<i class="material-icons format_textdirection_l_to_r">&#xe247;</i>
<i class="material-icons format_textdirection_r_to_l">&#xe248;</i>
<i class="material-icons format_underlined">&#xe249;</i>
<i class="material-icons forum">&#xe0bf;</i>
<i class="material-icons forward">&#xe154;</i>
<i class="material-icons forward_10">&#xe056;</i>
<i class="material-icons forward_30">&#xe057;</i>
<i class="material-icons forward_5">&#xe058;</i>
<i class="material-icons free_breakfast">&#xeb44;</i>
<i class="material-icons fullscreen">&#xe5d0;</i>
<i class="material-icons fullscreen_exit">&#xe5d1;</i>
<i class="material-icons functions">&#xe24a;</i>
<i class="material-icons g_translate">&#xe927;</i>
<i class="material-icons gamepad">&#xe30f;</i>
<i class="material-icons games">&#xe021;</i>
<i class="material-icons gavel">&#xe90e;</i>
<i class="material-icons gesture">&#xe155;</i>
<i class="material-icons get_app">&#xe884;</i>
<i class="material-icons gif">&#xe908;</i>
<i class="material-icons golf_course">&#xeb45;</i>
<i class="material-icons gps_fixed">&#xe1b3;</i>
<i class="material-icons gps_not_fixed">&#xe1b4;</i>
<i class="material-icons gps_off">&#xe1b5;</i>
<i class="material-icons grade">&#xe885;</i>
<i class="material-icons gradient">&#xe3e9;</i>
<i class="material-icons grain">&#xe3ea;</i>
<i class="material-icons graphic_eq">&#xe1b8;</i>
<i class="material-icons grid_off">&#xe3eb;</i>
<i class="material-icons grid_on">&#xe3ec;</i>
<i class="material-icons group">&#xe7ef;</i>
<i class="material-icons group_add">&#xe7f0;</i>
<i class="material-icons group_work">&#xe886;</i>
<i class="material-icons hd">&#xe052;</i>
<i class="material-icons hdr_off">&#xe3ed;</i>
<i class="material-icons hdr_on">&#xe3ee;</i>
<i class="material-icons hdr_strong">&#xe3f1;</i>
<i class="material-icons hdr_weak">&#xe3f2;</i>
<i class="material-icons headset">&#xe310;</i>
<i class="material-icons headset_mic">&#xe311;</i>
<i class="material-icons healing">&#xe3f3;</i>
<i class="material-icons hearing">&#xe023;</i>
<i class="material-icons help">&#xe887;</i>
<i class="material-icons help_outline">&#xe8fd;</i>
<i class="material-icons high_quality">&#xe024;</i>
<i class="material-icons highlight">&#xe25f;</i>
<i class="material-icons highlight_off">&#xe888;</i>
<i class="material-icons history">&#xe889;</i>
<i class="material-icons home">&#xe88a;</i>
<i class="material-icons hot_tub">&#xeb46;</i>
<i class="material-icons hotel">&#xe53a;</i>
<i class="material-icons hourglass_empty">&#xe88b;</i>
<i class="material-icons hourglass_full">&#xe88c;</i>
<i class="material-icons http">&#xe902;</i>
<i class="material-icons https">&#xe88d;</i>
<i class="material-icons image">&#xe3f4;</i>
<i class="material-icons image_aspect_ratio">&#xe3f5;</i>
<i class="material-icons import_contacts">&#xe0e0;</i>
<i class="material-icons import_export">&#xe0c3;</i>
<i class="material-icons important_devices">&#xe912;</i>
<i class="material-icons inbox">&#xe156;</i>
<i class="material-icons indeterminate_check_box">&#xe909;</i>
<i class="material-icons info">&#xe88e;</i>
<i class="material-icons info_outline">&#xe88f;</i>
<i class="material-icons input">&#xe890;</i>
<i class="material-icons insert_chart">&#xe24b;</i>
<i class="material-icons insert_comment">&#xe24c;</i>
<i class="material-icons insert_drive_file">&#xe24d;</i>
<i class="material-icons insert_emoticon">&#xe24e;</i>
<i class="material-icons insert_invitation">&#xe24f;</i>
<i class="material-icons insert_link">&#xe250;</i>
<i class="material-icons insert_photo">&#xe251;</i>
<i class="material-icons invert_colors">&#xe891;</i>
<i class="material-icons invert_colors_off">&#xe0c4;</i>
<i class="material-icons iso">&#xe3f6;</i>
<i class="material-icons keyboard">&#xe312;</i>
<i class="material-icons keyboard_arrow_down">&#xe313;</i>
<i class="material-icons keyboard_arrow_left">&#xe314;</i>
<i class="material-icons keyboard_arrow_right">&#xe315;</i>
<i class="material-icons keyboard_arrow_up">&#xe316;</i>
<i class="material-icons keyboard_backspace">&#xe317;</i>
<i class="material-icons keyboard_capslock">&#xe318;</i>
<i class="material-icons keyboard_hide">&#xe31a;</i>
<i class="material-icons keyboard_return">&#xe31b;</i>
<i class="material-icons keyboard_tab">&#xe31c;</i>
<i class="material-icons keyboard_voice">&#xe31d;</i>
<i class="material-icons kitchen">&#xeb47;</i>
<i class="material-icons label">&#xe892;</i>
<i class="material-icons label_outline">&#xe893;</i>
<i class="material-icons landscape">&#xe3f7;</i>
<i class="material-icons language">&#xe894;</i>
<i class="material-icons laptop">&#xe31e;</i>
<i class="material-icons laptop_chromebook">&#xe31f;</i>
<i class="material-icons laptop_mac">&#xe320;</i>
<i class="material-icons laptop_windows">&#xe321;</i>
<i class="material-icons last_page">&#xe5dd;</i>
<i class="material-icons launch">&#xe895;</i>
<i class="material-icons layers">&#xe53b;</i>
<i class="material-icons layers_clear">&#xe53c;</i>
<i class="material-icons leak_add">&#xe3f8;</i>
<i class="material-icons leak_remove">&#xe3f9;</i>
<i class="material-icons lens">&#xe3fa;</i>
<i class="material-icons library_add">&#xe02e;</i>
<i class="material-icons library_books">&#xe02f;</i>
<i class="material-icons library_music">&#xe030;</i>
<i class="material-icons lightbulb_outline">&#xe90f;</i>
<i class="material-icons line_style">&#xe919;</i>
<i class="material-icons line_weight">&#xe91a;</i>
<i class="material-icons linear_scale">&#xe260;</i>
<i class="material-icons link">&#xe157;</i>
<i class="material-icons linked_camera">&#xe438;</i>
<i class="material-icons list">&#xe896;</i>
<i class="material-icons live_help">&#xe0c6;</i>
<i class="material-icons live_tv">&#xe639;</i>
<i class="material-icons local_activity">&#xe53f;</i>
<i class="material-icons local_airport">&#xe53d;</i>
<i class="material-icons local_atm">&#xe53e;</i>
<i class="material-icons local_bar">&#xe540;</i>
<i class="material-icons local_cafe">&#xe541;</i>
<i class="material-icons local_car_wash">&#xe542;</i>
<i class="material-icons local_convenience_store">&#xe543;</i>
<i class="material-icons local_dining">&#xe556;</i>
<i class="material-icons local_drink">&#xe544;</i>
<i class="material-icons local_florist">&#xe545;</i>
<i class="material-icons local_gas_station">&#xe546;</i>
<i class="material-icons local_grocery_store">&#xe547;</i>
<i class="material-icons local_hospital">&#xe548;</i>
<i class="material-icons local_hotel">&#xe549;</i>
<i class="material-icons local_laundry_service">&#xe54a;</i>
<i class="material-icons local_library">&#xe54b;</i>
<i class="material-icons local_mall">&#xe54c;</i>
<i class="material-icons local_movies">&#xe54d;</i>
<i class="material-icons local_offer">&#xe54e;</i>
<i class="material-icons local_parking">&#xe54f;</i>
<i class="material-icons local_pharmacy">&#xe550;</i>
<i class="material-icons local_phone">&#xe551;</i>
<i class="material-icons local_pizza">&#xe552;</i>
<i class="material-icons local_play">&#xe553;</i>
<i class="material-icons local_post_office">&#xe554;</i>
<i class="material-icons local_printshop">&#xe555;</i>
<i class="material-icons local_see">&#xe557;</i>
<i class="material-icons local_shipping">&#xe558;</i>
<i class="material-icons local_taxi">&#xe559;</i>
<i class="material-icons location_city">&#xe7f1;</i>
<i class="material-icons location_disabled">&#xe1b6;</i>
<i class="material-icons location_off">&#xe0c7;</i>
<i class="material-icons location_on">&#xe0c8;</i>
<i class="material-icons location_searching">&#xe1b7;</i>
<i class="material-icons lock">&#xe897;</i>
<i class="material-icons lock_open">&#xe898;</i>
<i class="material-icons lock_outline">&#xe899;</i>
<i class="material-icons looks">&#xe3fc;</i>
<i class="material-icons looks_3">&#xe3fb;</i>
<i class="material-icons looks_4">&#xe3fd;</i>
<i class="material-icons looks_5">&#xe3fe;</i>
<i class="material-icons looks_6">&#xe3ff;</i>
<i class="material-icons looks_one">&#xe400;</i>
<i class="material-icons looks_two">&#xe401;</i>
<i class="material-icons loop">&#xe028;</i>
<i class="material-icons loupe">&#xe402;</i>
<i class="material-icons low_priority">&#xe16d;</i>
<i class="material-icons loyalty">&#xe89a;</i>
<i class="material-icons mail">&#xe158;</i>
<i class="material-icons mail_outline">&#xe0e1;</i>
<i class="material-icons map">&#xe55b;</i>
<i class="material-icons markunread">&#xe159;</i>
<i class="material-icons markunread_mailbox">&#xe89b;</i>
<i class="material-icons memory">&#xe322;</i>
<i class="material-icons menu">&#xe5d2;</i>
<i class="material-icons merge_type">&#xe252;</i>
<i class="material-icons message">&#xe0c9;</i>
<i class="material-icons mic">&#xe029;</i>
<i class="material-icons mic_none">&#xe02a;</i>
<i class="material-icons mic_off">&#xe02b;</i>
<i class="material-icons mms">&#xe618;</i>
<i class="material-icons mode_comment">&#xe253;</i>
<i class="material-icons mode_edit">&#xe254;</i>
<i class="material-icons monetization_on">&#xe263;</i>
<i class="material-icons money_off">&#xe25c;</i>
<i class="material-icons monochrome_photos">&#xe403;</i>
<i class="material-icons mood">&#xe7f2;</i>
<i class="material-icons mood_bad">&#xe7f3;</i>
<i class="material-icons more">&#xe619;</i>
<i class="material-icons more_horiz">&#xe5d3;</i>
<i class="material-icons more_vert">&#xe5d4;</i>
<i class="material-icons motorcycle">&#xe91b;</i>
<i class="material-icons mouse">&#xe323;</i>
<i class="material-icons move_to_inbox">&#xe168;</i>
<i class="material-icons movie">&#xe02c;</i>
<i class="material-icons movie_creation">&#xe404;</i>
<i class="material-icons movie_filter">&#xe43a;</i>
<i class="material-icons multiline_chart">&#xe6df;</i>
<i class="material-icons music_note">&#xe405;</i>
<i class="material-icons music_video">&#xe063;</i>
<i class="material-icons my_location">&#xe55c;</i>
<i class="material-icons nature">&#xe406;</i>
<i class="material-icons nature_people">&#xe407;</i>
<i class="material-icons navigate_before">&#xe408;</i>
<i class="material-icons navigate_next">&#xe409;</i>
<i class="material-icons navigation">&#xe55d;</i>
<i class="material-icons near_me">&#xe569;</i>
<i class="material-icons network_cell">&#xe1b9;</i>
<i class="material-icons network_check">&#xe640;</i>
<i class="material-icons network_locked">&#xe61a;</i>
<i class="material-icons network_wifi">&#xe1ba;</i>
<i class="material-icons new_releases">&#xe031;</i>
<i class="material-icons next_week">&#xe16a;</i>
<i class="material-icons nfc">&#xe1bb;</i>
<i class="material-icons no_encryption">&#xe641;</i>
<i class="material-icons no_sim">&#xe0cc;</i>
<i class="material-icons not_interested">&#xe033;</i>
<i class="material-icons note">&#xe06f;</i>
<i class="material-icons note_add">&#xe89c;</i>
<i class="material-icons notifications">&#xe7f4;</i>
<i class="material-icons notifications_active">&#xe7f7;</i>
<i class="material-icons notifications_none">&#xe7f5;</i>
<i class="material-icons notifications_off">&#xe7f6;</i>
<i class="material-icons notifications_paused">&#xe7f8;</i>
<i class="material-icons offline_pin">&#xe90a;</i>
<i class="material-icons ondemand_video">&#xe63a;</i>
<i class="material-icons opacity">&#xe91c;</i>
<i class="material-icons open_in_browser">&#xe89d;</i>
<i class="material-icons open_in_new">&#xe89e;</i>
<i class="material-icons open_with">&#xe89f;</i>
<i class="material-icons pages">&#xe7f9;</i>
<i class="material-icons pageview">&#xe8a0;</i>
<i class="material-icons palette">&#xe40a;</i>
<i class="material-icons pan_tool">&#xe925;</i>
<i class="material-icons panorama">&#xe40b;</i>
<i class="material-icons panorama_fish_eye">&#xe40c;</i>
<i class="material-icons panorama_horizontal">&#xe40d;</i>
<i class="material-icons panorama_vertical">&#xe40e;</i>
<i class="material-icons panorama_wide_angle">&#xe40f;</i>
<i class="material-icons party_mode">&#xe7fa;</i>
<i class="material-icons pause">&#xe034;</i>
<i class="material-icons pause_circle_filled">&#xe035;</i>
<i class="material-icons pause_circle_outline">&#xe036;</i>
<i class="material-icons payment">&#xe8a1;</i>
<i class="material-icons people">&#xe7fb;</i>
<i class="material-icons people_outline">&#xe7fc;</i>
<i class="material-icons perm_camera_mic">&#xe8a2;</i>
<i class="material-icons perm_contact_calendar">&#xe8a3;</i>
<i class="material-icons perm_data_setting">&#xe8a4;</i>
<i class="material-icons perm_device_information">&#xe8a5;</i>
<i class="material-icons perm_identity">&#xe8a6;</i>
<i class="material-icons perm_media">&#xe8a7;</i>
<i class="material-icons perm_phone_msg">&#xe8a8;</i>
<i class="material-icons perm_scan_wifi">&#xe8a9;</i>
<i class="material-icons person">&#xe7fd;</i>
<i class="material-icons person_add">&#xe7fe;</i>
<i class="material-icons person_outline">&#xe7ff;</i>
<i class="material-icons person_pin">&#xe55a;</i>
<i class="material-icons person_pin_circle">&#xe56a;</i>
<i class="material-icons personal_video">&#xe63b;</i>
<i class="material-icons pets">&#xe91d;</i>
<i class="material-icons phone">&#xe0cd;</i>
<i class="material-icons phone_android">&#xe324;</i>
<i class="material-icons phone_bluetooth_speaker">&#xe61b;</i>
<i class="material-icons phone_forwarded">&#xe61c;</i>
<i class="material-icons phone_in_talk">&#xe61d;</i>
<i class="material-icons phone_iphone">&#xe325;</i>
<i class="material-icons phone_locked">&#xe61e;</i>
<i class="material-icons phone_missed">&#xe61f;</i>
<i class="material-icons phone_paused">&#xe620;</i>
<i class="material-icons phonelink">&#xe326;</i>
<i class="material-icons phonelink_erase">&#xe0db;</i>
<i class="material-icons phonelink_lock">&#xe0dc;</i>
<i class="material-icons phonelink_off">&#xe327;</i>
<i class="material-icons phonelink_ring">&#xe0dd;</i>
<i class="material-icons phonelink_setup">&#xe0de;</i>
<i class="material-icons photo">&#xe410;</i>
<i class="material-icons photo_album">&#xe411;</i>
<i class="material-icons photo_camera">&#xe412;</i>
<i class="material-icons photo_filter">&#xe43b;</i>
<i class="material-icons photo_library">&#xe413;</i>
<i class="material-icons photo_size_select_actual">&#xe432;</i>
<i class="material-icons photo_size_select_large">&#xe433;</i>
<i class="material-icons photo_size_select_small">&#xe434;</i>
<i class="material-icons picture_as_pdf">&#xe415;</i>
<i class="material-icons picture_in_picture">&#xe8aa;</i>
<i class="material-icons picture_in_picture_alt">&#xe911;</i>
<i class="material-icons pie_chart">&#xe6c4;</i>
<i class="material-icons pie_chart_outlined">&#xe6c5;</i>
<i class="material-icons pin_drop">&#xe55e;</i>
<i class="material-icons place">&#xe55f;</i>
<i class="material-icons play_arrow">&#xe037;</i>
<i class="material-icons play_circle_filled">&#xe038;</i>
<i class="material-icons play_circle_outline">&#xe039;</i>
<i class="material-icons play_for_work">&#xe906;</i>
<i class="material-icons playlist_add">&#xe03b;</i>
<i class="material-icons playlist_add_check">&#xe065;</i>
<i class="material-icons playlist_play">&#xe05f;</i>
<i class="material-icons plus_one">&#xe800;</i>
<i class="material-icons poll">&#xe801;</i>
<i class="material-icons polymer">&#xe8ab;</i>
<i class="material-icons pool">&#xeb48;</i>
<i class="material-icons portable_wifi_off">&#xe0ce;</i>
<i class="material-icons portrait">&#xe416;</i>
<i class="material-icons power">&#xe63c;</i>
<i class="material-icons power_input">&#xe336;</i>
<i class="material-icons power_settings_new">&#xe8ac;</i>
<i class="material-icons pregnant_woman">&#xe91e;</i>
<i class="material-icons present_to_all">&#xe0df;</i>
<i class="material-icons print">&#xe8ad;</i>
<i class="material-icons priority_high">&#xe645;</i>
<i class="material-icons public">&#xe80b;</i>
<i class="material-icons publish">&#xe255;</i>
<i class="material-icons query_builder">&#xe8ae;</i>
<i class="material-icons question_answer">&#xe8af;</i>
<i class="material-icons queue">&#xe03c;</i>
<i class="material-icons queue_music">&#xe03d;</i>
<i class="material-icons queue_play_next">&#xe066;</i>
<i class="material-icons radio">&#xe03e;</i>
<i class="material-icons radio_button_checked">&#xe837;</i>
<i class="material-icons radio_button_unchecked">&#xe836;</i>
<i class="material-icons rate_review">&#xe560;</i>
<i class="material-icons receipt">&#xe8b0;</i>
<i class="material-icons recent_actors">&#xe03f;</i>
<i class="material-icons record_voice_over">&#xe91f;</i>
<i class="material-icons redeem">&#xe8b1;</i>
<i class="material-icons redo">&#xe15a;</i>
<i class="material-icons refresh">&#xe5d5;</i>
<i class="material-icons remove">&#xe15b;</i>
<i class="material-icons remove_circle">&#xe15c;</i>
<i class="material-icons remove_circle_outline">&#xe15d;</i>
<i class="material-icons remove_from_queue">&#xe067;</i>
<i class="material-icons remove_red_eye">&#xe417;</i>
<i class="material-icons remove_shopping_cart">&#xe928;</i>
<i class="material-icons reorder">&#xe8fe;</i>
<i class="material-icons repeat">&#xe040;</i>
<i class="material-icons repeat_one">&#xe041;</i>
<i class="material-icons replay">&#xe042;</i>
<i class="material-icons replay_10">&#xe059;</i>
<i class="material-icons replay_30">&#xe05a;</i>
<i class="material-icons replay_5">&#xe05b;</i>
<i class="material-icons reply">&#xe15e;</i>
<i class="material-icons reply_all">&#xe15f;</i>
<i class="material-icons report">&#xe160;</i>
<i class="material-icons report_problem">&#xe8b2;</i>
<i class="material-icons restaurant">&#xe56c;</i>
<i class="material-icons restaurant_menu">&#xe561;</i>
<i class="material-icons restore">&#xe8b3;</i>
<i class="material-icons restore_page">&#xe929;</i>
<i class="material-icons ring_volume">&#xe0d1;</i>
<i class="material-icons room">&#xe8b4;</i>
<i class="material-icons room_service">&#xeb49;</i>
<i class="material-icons rotate_90_degrees_ccw">&#xe418;</i>
<i class="material-icons rotate_left">&#xe419;</i>
<i class="material-icons rotate_right">&#xe41a;</i>
<i class="material-icons rounded_corner">&#xe920;</i>
<i class="material-icons router">&#xe328;</i>
<i class="material-icons rowing">&#xe921;</i>
<i class="material-icons rss_feed">&#xe0e5;</i>
<i class="material-icons rv_hookup">&#xe642;</i>
<i class="material-icons satellite">&#xe562;</i>
<i class="material-icons save">&#xe161;</i>
<i class="material-icons scanner">&#xe329;</i>
<i class="material-icons schedule">&#xe8b5;</i>
<i class="material-icons school">&#xe80c;</i>
<i class="material-icons screen_lock_landscape">&#xe1be;</i>
<i class="material-icons screen_lock_portrait">&#xe1bf;</i>
<i class="material-icons screen_lock_rotation">&#xe1c0;</i>
<i class="material-icons screen_rotation">&#xe1c1;</i>
<i class="material-icons screen_share">&#xe0e2;</i>
<i class="material-icons sd_card">&#xe623;</i>
<i class="material-icons sd_storage">&#xe1c2;</i>
<i class="material-icons search">&#xe8b6;</i>
<i class="material-icons security">&#xe32a;</i>
<i class="material-icons select_all">&#xe162;</i>
<i class="material-icons send">&#xe163;</i>
<i class="material-icons sentiment_dissatisfied">&#xe811;</i>
<i class="material-icons sentiment_neutral">&#xe812;</i>
<i class="material-icons sentiment_satisfied">&#xe813;</i>
<i class="material-icons sentiment_very_dissatisfied">&#xe814;</i>
<i class="material-icons sentiment_very_satisfied">&#xe815;</i>
<i class="material-icons settings">&#xe8b8;</i>
<i class="material-icons settings_applications">&#xe8b9;</i>
<i class="material-icons settings_backup_restore">&#xe8ba;</i>
<i class="material-icons settings_bluetooth">&#xe8bb;</i>
<i class="material-icons settings_brightness">&#xe8bd;</i>
<i class="material-icons settings_cell">&#xe8bc;</i>
<i class="material-icons settings_ethernet">&#xe8be;</i>
<i class="material-icons settings_input_antenna">&#xe8bf;</i>
<i class="material-icons settings_input_component">&#xe8c0;</i>
<i class="material-icons settings_input_composite">&#xe8c1;</i>
<i class="material-icons settings_input_hdmi">&#xe8c2;</i>
<i class="material-icons settings_input_svideo">&#xe8c3;</i>
<i class="material-icons settings_overscan">&#xe8c4;</i>
<i class="material-icons settings_phone">&#xe8c5;</i>
<i class="material-icons settings_power">&#xe8c6;</i>
<i class="material-icons settings_remote">&#xe8c7;</i>
<i class="material-icons settings_system_daydream">&#xe1c3;</i>
<i class="material-icons settings_voice">&#xe8c8;</i>
<i class="material-icons share">&#xe80d;</i>
<i class="material-icons shop">&#xe8c9;</i>
<i class="material-icons shop_two">&#xe8ca;</i>
<i class="material-icons shopping_basket">&#xe8cb;</i>
<i class="material-icons shopping_cart">&#xe8cc;</i>
<i class="material-icons short_text">&#xe261;</i>
<i class="material-icons show_chart">&#xe6e1;</i>
<i class="material-icons shuffle">&#xe043;</i>
<i class="material-icons signal_cellular_4_bar">&#xe1c8;</i>
<i class="material-icons signal_cellular_connected_no_internet_4_bar">&#xe1cd;</i>
<i class="material-icons signal_cellular_no_sim">&#xe1ce;</i>
<i class="material-icons signal_cellular_null">&#xe1cf;</i>
<i class="material-icons signal_cellular_off">&#xe1d0;</i>
<i class="material-icons signal_wifi_4_bar">&#xe1d8;</i>
<i class="material-icons signal_wifi_4_bar_lock">&#xe1d9;</i>
<i class="material-icons signal_wifi_off">&#xe1da;</i>
<i class="material-icons sim_card">&#xe32b;</i>
<i class="material-icons sim_card_alert">&#xe624;</i>
<i class="material-icons skip_next">&#xe044;</i>
<i class="material-icons skip_previous">&#xe045;</i>
<i class="material-icons slideshow">&#xe41b;</i>
<i class="material-icons slow_motion_video">&#xe068;</i>
<i class="material-icons smartphone">&#xe32c;</i>
<i class="material-icons smoke_free">&#xeb4a;</i>
<i class="material-icons smoking_rooms">&#xeb4b;</i>
<i class="material-icons sms">&#xe625;</i>
<i class="material-icons sms_failed">&#xe626;</i>
<i class="material-icons snooze">&#xe046;</i>
<i class="material-icons sort">&#xe164;</i>
<i class="material-icons sort_by_alpha">&#xe053;</i>
<i class="material-icons spa">&#xeb4c;</i>
<i class="material-icons space_bar">&#xe256;</i>
<i class="material-icons speaker">&#xe32d;</i>
<i class="material-icons speaker_group">&#xe32e;</i>
<i class="material-icons speaker_notes">&#xe8cd;</i>
<i class="material-icons speaker_notes_off">&#xe92a;</i>
<i class="material-icons speaker_phone">&#xe0d2;</i>
<i class="material-icons spellcheck">&#xe8ce;</i>
<i class="material-icons star">&#xe838;</i>
<i class="material-icons star_border">&#xe83a;</i>
<i class="material-icons star_half">&#xe839;</i>
<i class="material-icons stars">&#xe8d0;</i>
<i class="material-icons stay_current_landscape">&#xe0d3;</i>
<i class="material-icons stay_current_portrait">&#xe0d4;</i>
<i class="material-icons stay_primary_landscape">&#xe0d5;</i>
<i class="material-icons stay_primary_portrait">&#xe0d6;</i>
<i class="material-icons stop">&#xe047;</i>
<i class="material-icons stop_screen_share">&#xe0e3;</i>
<i class="material-icons storage">&#xe1db;</i>
<i class="material-icons store">&#xe8d1;</i>
<i class="material-icons store_mall_directory">&#xe563;</i>
<i class="material-icons straighten">&#xe41c;</i>
<i class="material-icons streetview">&#xe56e;</i>
<i class="material-icons strikethrough_s">&#xe257;</i>
<i class="material-icons style">&#xe41d;</i>
<i class="material-icons subdirectory_arrow_left">&#xe5d9;</i>
<i class="material-icons subdirectory_arrow_right">&#xe5da;</i>
<i class="material-icons subject">&#xe8d2;</i>
<i class="material-icons subscriptions">&#xe064;</i>
<i class="material-icons subtitles">&#xe048;</i>
<i class="material-icons subway">&#xe56f;</i>
<i class="material-icons supervisor_account">&#xe8d3;</i>
<i class="material-icons surround_sound">&#xe049;</i>
<i class="material-icons swap_calls">&#xe0d7;</i>
<i class="material-icons swap_horiz">&#xe8d4;</i>
<i class="material-icons swap_horizontal_circle">&#xe933;</i>
<i class="material-icons swap_vert">&#xe8d5;</i>
<i class="material-icons swap_vertical_circle">&#xe8d6;</i>
<i class="material-icons switch_camera">&#xe41e;</i>
<i class="material-icons switch_video">&#xe41f;</i>
<i class="material-icons sync">&#xe627;</i>
<i class="material-icons sync_disabled">&#xe628;</i>
<i class="material-icons sync_problem">&#xe629;</i>
<i class="material-icons system_update">&#xe62a;</i>
<i class="material-icons system_update_alt">&#xe8d7;</i>
<i class="material-icons tab">&#xe8d8;</i>
<i class="material-icons tab_unselected">&#xe8d9;</i>
<i class="material-icons tablet">&#xe32f;</i>
<i class="material-icons tablet_android">&#xe330;</i>
<i class="material-icons tablet_mac">&#xe331;</i>
<i class="material-icons tag_faces">&#xe420;</i>
<i class="material-icons tap_and_play">&#xe62b;</i>
<i class="material-icons terrain">&#xe564;</i>
<i class="material-icons text_fields">&#xe262;</i>
<i class="material-icons text_format">&#xe165;</i>
<i class="material-icons textsms">&#xe0d8;</i>
<i class="material-icons texture">&#xe421;</i>
<i class="material-icons theaters">&#xe8da;</i>
<i class="material-icons thumb_down">&#xe8db;</i>
<i class="material-icons thumb_up">&#xe8dc;</i>
<i class="material-icons thumbs_up_down">&#xe8dd;</i>
<i class="material-icons time_to_leave">&#xe62c;</i>
<i class="material-icons timelapse">&#xe422;</i>
<i class="material-icons timeline">&#xe922;</i>
<i class="material-icons timer">&#xe425;</i>
<i class="material-icons timer_10">&#xe423;</i>
<i class="material-icons timer_3">&#xe424;</i>
<i class="material-icons timer_off">&#xe426;</i>
<i class="material-icons title">&#xe264;</i>
<i class="material-icons toc">&#xe8de;</i>
<i class="material-icons today">&#xe8df;</i>
<i class="material-icons toll">&#xe8e0;</i>
<i class="material-icons tonality">&#xe427;</i>
<i class="material-icons touch_app">&#xe913;</i>
<i class="material-icons toys">&#xe332;</i>
<i class="material-icons track_changes">&#xe8e1;</i>
<i class="material-icons traffic">&#xe565;</i>
<i class="material-icons train">&#xe570;</i>
<i class="material-icons tram">&#xe571;</i>
<i class="material-icons transfer_within_a_station">&#xe572;</i>
<i class="material-icons transform">&#xe428;</i>
<i class="material-icons translate">&#xe8e2;</i>
<i class="material-icons trending_down">&#xe8e3;</i>
<i class="material-icons trending_flat">&#xe8e4;</i>
<i class="material-icons trending_up">&#xe8e5;</i>
<i class="material-icons tune">&#xe429;</i>
<i class="material-icons turned_in">&#xe8e6;</i>
<i class="material-icons turned_in_not">&#xe8e7;</i>
<i class="material-icons tv">&#xe333;</i>
<i class="material-icons unarchive">&#xe169;</i>
<i class="material-icons undo">&#xe166;</i>
<i class="material-icons unfold_less">&#xe5d6;</i>
<i class="material-icons unfold_more">&#xe5d7;</i>
<i class="material-icons update">&#xe923;</i>
<i class="material-icons usb">&#xe1e0;</i>
<i class="material-icons verified_user">&#xe8e8;</i>
<i class="material-icons vertical_align_bottom">&#xe258;</i>
<i class="material-icons vertical_align_center">&#xe259;</i>
<i class="material-icons vertical_align_top">&#xe25a;</i>
<i class="material-icons vibration">&#xe62d;</i>
<i class="material-icons video_call">&#xe070;</i>
<i class="material-icons video_label">&#xe071;</i>
<i class="material-icons video_library">&#xe04a;</i>
<i class="material-icons videocam">&#xe04b;</i>
<i class="material-icons videocam_off">&#xe04c;</i>
<i class="material-icons videogame_asset">&#xe338;</i>
<i class="material-icons view_agenda">&#xe8e9;</i>
<i class="material-icons view_array">&#xe8ea;</i>
<i class="material-icons view_carousel">&#xe8eb;</i>
<i class="material-icons view_column">&#xe8ec;</i>
<i class="material-icons view_comfy">&#xe42a;</i>
<i class="material-icons view_compact">&#xe42b;</i>
<i class="material-icons view_day">&#xe8ed;</i>
<i class="material-icons view_headline">&#xe8ee;</i>
<i class="material-icons view_list">&#xe8ef;</i>
<i class="material-icons view_module">&#xe8f0;</i>
<i class="material-icons view_quilt">&#xe8f1;</i>
<i class="material-icons view_stream">&#xe8f2;</i>
<i class="material-icons view_week">&#xe8f3;</i>
<i class="material-icons vignette">&#xe435;</i>
<i class="material-icons visibility">&#xe8f4;</i>
<i class="material-icons visibility_off">&#xe8f5;</i>
<i class="material-icons voice_chat">&#xe62e;</i>
<i class="material-icons voicemail">&#xe0d9;</i>
<i class="material-icons volume_down">&#xe04d;</i>
<i class="material-icons volume_mute">&#xe04e;</i>
<i class="material-icons volume_off">&#xe04f;</i>
<i class="material-icons volume_up">&#xe050;</i>
<i class="material-icons vpn_key">&#xe0da;</i>
<i class="material-icons vpn_lock">&#xe62f;</i>
<i class="material-icons wallpaper">&#xe1bc;</i>
<i class="material-icons warning">&#xe002;</i>
<i class="material-icons watch">&#xe334;</i>
<i class="material-icons watch_later">&#xe924;</i>
<i class="material-icons wb_auto">&#xe42c;</i>
<i class="material-icons wb_cloudy">&#xe42d;</i>
<i class="material-icons wb_incandescent">&#xe42e;</i>
<i class="material-icons wb_iridescent">&#xe436;</i>
<i class="material-icons wb_sunny">&#xe430;</i>
<i class="material-icons wc">&#xe63d;</i>
<i class="material-icons web">&#xe051;</i>
<i class="material-icons web_asset">&#xe069;</i>
<i class="material-icons weekend">&#xe16b;</i>
<i class="material-icons whatshot">&#xe80e;</i>
<i class="material-icons widgets">&#xe1bd;</i>
<i class="material-icons wifi">&#xe63e;</i>
<i class="material-icons wifi_lock">&#xe1e1;</i>
<i class="material-icons wifi_tethering">&#xe1e2;</i>
<i class="material-icons work">&#xe8f9;</i>
<i class="material-icons wrap_text">&#xe25b;</i>
<i class="material-icons youtube_searched_for">&#xe8fa;</i>
<i class="material-icons zoom_in">&#xe8ff;</i>
<i class="material-icons zoom_out">&#xe900;</i>
<i class="material-icons zoom_out_map">&#xe56b;</i>
              
            
!

CSS

              
                /*just for demo*/
body { background-color:#ddd; box-sizing:border-box; max-width:1000px; margin: 0 auto; font-family:sans-serif; } 
i { padding:10px; margin:2px; background-color:#fff; box-shadow:1px 1px 3px rgba(0,0,0,.15); display:block; float:left; }
.clearfix:after { content:''; display:table; width:100%;}
              
            
!

JS

              
                /*

Documentation:
https://material.io/icons/

To include in your page, add the link: 

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Then copy the html code for the icon you wish to use.

Google often adds new icons to this font.  If the icon you want is not listed here, you can: a) download the woff2 font via Dev Tools, b) convert it to OTF or TTF using an online font converter, and c) open it in FontForge to find the code.

*/
              
            
!
999px

Console