<h2>XTras</h2> <div class="demo-category"> <div class="demo-icon-block"><i class="mdl-icon material-icons mdl-icon--spin">android</i> <span class="name">mdl-icon--spin</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons mdl-icon--pulse">android</i> <span class="name">mdl-icon--pulse</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons mdl-icon--rotate-90">android</i> <span class="name">mdl-icon--rotate-90</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons mdl-icon--rotate-180">android</i> <span class="name">mdl-icon--rotate-180</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons mdl-icon--rotate-270">android</i> <span class="name">mdl-icon--rotate-270</span></div> <div class="demo-icon-block"> <i class="mdl-icon material-icons mdl-icon--bounce">android</i> <span class="name">mdl-icon--bounce</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons mdl-icon--flip-horizontal">build</i> <span class="name">mdl-icon--flip-horizontal</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons mdl-icon--flip-vertical">build</i> <span class="name">mdl-icon--flip-vertical</span></div> </div> <h2>action</h2> <div class="demo-category"> <div class="demo-icon-block"><i class="mdl-icon material-icons">3d_rotation</i><span class="name">3d_rotation</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">accessibility</i><span class="name">accessibility</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">account_balance</i><span class="name">account_balance</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">account_balance_wallet</i><span class="name">account_balance_wallet</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">account_box</i><span class="name">account_box</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">account_circle</i><span class="name">account_circle</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">add_shopping_cart</i><span class="name">add_shopping_cart</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">alarm</i><span class="name">alarm</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">alarm_add</i><span class="name">alarm_add</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">alarm_off</i><span class="name">alarm_off</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">alarm_on</i><span class="name">alarm_on</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">android</i><span class="name">android</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">announcement</i><span class="name">announcement</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">aspect_ratio</i><span class="name">aspect_ratio</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">assessment</i><span class="name">assessment</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">assignment</i><span class="name">assignment</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">assignment_ind</i><span class="name">assignment_ind</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">assignment_late</i><span class="name">assignment_late</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">assignment_return</i><span class="name">assignment_return</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">assignment_returned</i><span class="name">assignment_returned</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">assignment_turned_in</i><span class="name">assignment_turned_in</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">autorenew</i><span class="name">autorenew</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">backup</i><span class="name">backup</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">book</i><span class="name">book</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">bookmark</i><span class="name">bookmark</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">bookmark_outline</i><span class="name">bookmark_outline</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">bug_report</i><span class="name">bug_report</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">build</i><span class="name">build</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">cached</i><span class="name">cached</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">camera_enhance</i><span class="name">camera_enhance</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">card_membership</i><span class="name">card_membership</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">card_travel</i><span class="name">card_travel</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">change_history</i><span class="name">change_history</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">check_circle</i><span class="name">check_circle</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">chrome_reader_mode</i><span class="name">chrome_reader_mode</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">class</i><span class="name">class</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">credit_card</i><span class="name">credit_card</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">dashboard</i><span class="name">dashboard</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">delete</i><span class="name">delete</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">description</i><span class="name">description</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">dns</i><span class="name">dns</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">done</i><span class="name">done</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">done_all</i><span class="name">done_all</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">event</i><span class="name">event</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">exit_to_app</i><span class="name">exit_to_app</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">explore</i><span class="name">explore</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">extension</i><span class="name">extension</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">face</i><span class="name">face</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">favorite</i><span class="name">favorite</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">favorite_outline</i><span class="name">favorite_outline</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">find_in_page</i><span class="name">find_in_page</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">find_replace</i><span class="name">find_replace</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">flip_to_back</i><span class="name">flip_to_back</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">flip_to_front</i><span class="name">flip_to_front</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">get_app</i><span class="name">get_app</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">gif</i><span class="name">gif</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">grade</i><span class="name">grade</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">group_work</i><span class="name">group_work</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">help</i><span class="name">help</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">highlight_remove</i><span class="name">highlight_remove</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">history</i><span class="name">history</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">home</i><span class="name">home</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">http</i><span class="name">http</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">https</i><span class="name">https</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">info</i><span class="name">info</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">info_outline</i><span class="name">info_outline</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">input</i><span class="name">input</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">invert_colors</i><span class="name">invert_colors</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">label</i><span class="name">label</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">label_outline</i><span class="name">label_outline</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">language</i><span class="name">language</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">launch</i><span class="name">launch</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">list</i><span class="name">list</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">lock</i><span class="name">lock</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">lock_open</i><span class="name">lock_open</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">lock_outline</i><span class="name">lock_outline</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">loyalty</i><span class="name">loyalty</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">markunread_mailbox</i><span class="name">markunread_mailbox</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">note_add</i><span class="name">note_add</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">open_in_browser</i><span class="name">open_in_browser</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">open_in_new</i><span class="name">open_in_new</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">open_with</i><span class="name">open_with</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">pageview</i><span class="name">pageview</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">payment</i><span class="name">payment</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">perm_camera_mic</i><span class="name">perm_camera_mic</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">perm_contact_cal</i><span class="name">perm_contact_cal</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">perm_data_setting</i><span class="name">perm_data_setting</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">perm_device_info</i><span class="name">perm_device_info</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">perm_identity</i><span class="name">perm_identity</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">perm_media</i><span class="name">perm_media</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">perm_phone_msg</i><span class="name">perm_phone_msg</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">perm_scan_wifi</i><span class="name">perm_scan_wifi</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">picture_in_picture</i><span class="name">picture_in_picture</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">polymer</i><span class="name">polymer</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">print</i><span class="name">print</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">query_builder</i><span class="name">query_builder</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">question_answer</i><span class="name">question_answer</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">receipt</i><span class="name">receipt</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">redeem</i><span class="name">redeem</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">reorder</i><span class="name">reorder</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">report_problem</i><span class="name">report_problem</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">restore</i><span class="name">restore</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">room</i><span class="name">room</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">schedule</i><span class="name">schedule</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">search</i><span class="name">search</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">settings</i><span class="name">settings</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">settings_applications</i><span class="name">settings_applications</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">settings_backup_restore</i><span class="name">settings_backup_restore</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">settings_bluetooth</i><span class="name">settings_bluetooth</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">settings_cell</i><span class="name">settings_cell</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">settings_display</i><span class="name">settings_display</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">settings_ethernet</i><span class="name">settings_ethernet</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">settings_input_antenna</i><span class="name">settings_input_antenna</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">settings_input_component</i><span class="name">settings_input_component</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">settings_input_composite</i><span class="name">settings_input_composite</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">settings_input_hdmi</i><span class="name">settings_input_hdmi</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">settings_input_svideo</i><span class="name">settings_input_svideo</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">settings_overscan</i><span class="name">settings_overscan</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">settings_phone</i><span class="name">settings_phone</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">settings_power</i><span class="name">settings_power</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">settings_remote</i><span class="name">settings_remote</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">settings_voice</i><span class="name">settings_voice</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">shop</i><span class="name">shop</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">shop_two</i><span class="name">shop_two</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">shopping_basket</i><span class="name">shopping_basket</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">shopping_cart</i><span class="name">shopping_cart</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">speaker_notes</i><span class="name">speaker_notes</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">spellcheck</i><span class="name">spellcheck</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">star_rate</i><span class="name">star_rate</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">stars</i><span class="name">stars</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">store</i><span class="name">store</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">subject</i><span class="name">subject</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">supervisor_account</i><span class="name">supervisor_account</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">swap_horiz</i><span class="name">swap_horiz</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">swap_vert</i><span class="name">swap_vert</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">swap_vert_circle</i><span class="name">swap_vert_circle</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">system_update_tv</i><span class="name">system_update_tv</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">tab</i><span class="name">tab</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">tab_unselected</i><span class="name">tab_unselected</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">theaters</i><span class="name">theaters</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">thumb_down</i><span class="name">thumb_down</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">thumb_up</i><span class="name">thumb_up</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">thumbs_up_down</i><span class="name">thumbs_up_down</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">toc</i><span class="name">toc</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">today</i><span class="name">today</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">track_changes</i><span class="name">track_changes</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">translate</i><span class="name">translate</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">trending_down</i><span class="name">trending_down</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">trending_neutral</i><span class="name">trending_neutral</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">trending_up</i><span class="name">trending_up</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">turned_in</i><span class="name">turned_in</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">turned_in_not</i><span class="name">turned_in_not</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">verified_user</i><span class="name">verified_user</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">view_agenda</i><span class="name">view_agenda</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">view_array</i><span class="name">view_array</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">view_carousel</i><span class="name">view_carousel</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">view_column</i><span class="name">view_column</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">view_day</i><span class="name">view_day</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">view_headline</i><span class="name">view_headline</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">view_list</i><span class="name">view_list</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">view_module</i><span class="name">view_module</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">view_quilt</i><span class="name">view_quilt</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">view_stream</i><span class="name">view_stream</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">view_week</i><span class="name">view_week</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">visibility</i><span class="name">visibility</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">visibility_off</i><span class="name">visibility_off</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">wallet_giftcard</i><span class="name">wallet_giftcard</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">wallet_membership</i><span class="name">wallet_membership</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">wallet_travel</i><span class="name">wallet_travel</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">work</i><span class="name">work</span></div> </div> <h2>alert</h2> <div class="demo-category"> <div class="demo-icon-block"><i class="mdl-icon material-icons">error</i><span class="name">error</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">warning</i><span class="name">warning</span></div> </div> <h2>av</h2> <div class="demo-category"> <div class="demo-icon-block"><i class="mdl-icon material-icons">album</i><span class="name">album</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">av_timer</i><span class="name">av_timer</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">closed_caption</i><span class="name">closed_caption</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">equalizer</i><span class="name">equalizer</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">explicit</i><span class="name">explicit</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">fast_forward</i><span class="name">fast_forward</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">fast_rewind</i><span class="name">fast_rewind</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">games</i><span class="name">games</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">hearing</i><span class="name">hearing</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">high_quality</i><span class="name">high_quality</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">loop</i><span class="name">loop</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">mic</i><span class="name">mic</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">mic_none</i><span class="name">mic_none</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">mic_off</i><span class="name">mic_off</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">movie</i><span class="name">movie</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">my_library_add</i><span class="name">my_library_add</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">my_library_books</i><span class="name">my_library_books</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">my_library_music</i><span class="name">my_library_music</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">new_releases</i><span class="name">new_releases</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">not_interested</i><span class="name">not_interested</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">pause</i><span class="name">pause</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">pause_circle_fill</i><span class="name">pause_circle_fill</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">pause_circle_outline</i><span class="name">pause_circle_outline</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">play_arrow</i><span class="name">play_arrow</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">play_circle_fill</i><span class="name">play_circle_fill</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">play_circle_outline</i><span class="name">play_circle_outline</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">play_shopping_bag</i><span class="name">play_shopping_bag</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">playlist_add</i><span class="name">playlist_add</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">queue</i><span class="name">queue</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">queue_music</i><span class="name">queue_music</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">radio</i><span class="name">radio</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">recent_actors</i><span class="name">recent_actors</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">repeat</i><span class="name">repeat</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">repeat_one</i><span class="name">repeat_one</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">replay</i><span class="name">replay</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">shuffle</i><span class="name">shuffle</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">skip_next</i><span class="name">skip_next</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">skip_previous</i><span class="name">skip_previous</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">snooze</i><span class="name">snooze</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">stop</i><span class="name">stop</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">subtitles</i><span class="name">subtitles</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">surround_sound</i><span class="name">surround_sound</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">video_collection</i><span class="name">video_collection</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">videocam</i><span class="name">videocam</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">videocam_off</i><span class="name">videocam_off</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">volume_down</i><span class="name">volume_down</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">volume_mute</i><span class="name">volume_mute</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">volume_off</i><span class="name">volume_off</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">volume_up</i><span class="name">volume_up</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">web</i><span class="name">web</span></div> </div> <h2>communication</h2> <div class="demo-category"> <div class="demo-icon-block"><i class="mdl-icon material-icons">business</i><span class="name">business</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">call</i><span class="name">call</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">call_end</i><span class="name">call_end</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">call_made</i><span class="name">call_made</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">call_merge</i><span class="name">call_merge</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">call_missed</i><span class="name">call_missed</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">call_received</i><span class="name">call_received</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">call_split</i><span class="name">call_split</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">chat</i><span class="name">chat</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">clear_all</i><span class="name">clear_all</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">comment</i><span class="name">comment</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">contact_phone</i><span class="name">contact_phone</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">contacts</i><span class="name">contacts</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">dialer_sip</i><span class="name">dialer_sip</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">dialpad</i><span class="name">dialpad</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">dnd_on</i><span class="name">dnd_on</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">email</i><span class="name">email</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">forum</i><span class="name">forum</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">import_export</i><span class="name">import_export</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">invert_colors_off</i><span class="name">invert_colors_off</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">invert_colors_on</i><span class="name">invert_colors_on</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">live_help</i><span class="name">live_help</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">location_off</i><span class="name">location_off</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">location_on</i><span class="name">location_on</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">message</i><span class="name">message</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">messenger</i><span class="name">messenger</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">no_sim</i><span class="name">no_sim</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">phone</i><span class="name">phone</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">portable_wifi_off</i><span class="name">portable_wifi_off</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">quick_contacts_dialer</i><span class="name">quick_contacts_dialer</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">ring_volume</i><span class="name">ring_volume</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">stay_current_landscape</i><span class="name">stay_current_landscape</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">stay_current_portrait</i><span class="name">stay_current_portrait</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">stay_primary_landscape</i><span class="name">stay_primary_landscape</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">stay_primary_portrait</i><span class="name">stay_primary_portrait</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">swap_calls</i><span class="name">swap_calls</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">textsms</i><span class="name">textsms</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">voicemail</i><span class="name">voicemail</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">vpn_key</i><span class="name">vpn_key</span></div> </div> <h2>content</h2> <div class="demo-category"> <div class="demo-icon-block"><i class="mdl-icon material-icons">add</i><span class="name">add</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">add_box</i><span class="name">add_box</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">add_circle</i><span class="name">add_circle</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">add_circle_outline</i><span class="name">add_circle_outline</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">archive</i><span class="name">archive</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">backspace</i><span class="name">backspace</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">block</i><span class="name">block</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">clear</i><span class="name">clear</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">content_copy</i><span class="name">content_copy</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">content_cut</i><span class="name">content_cut</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">content_paste</i><span class="name">content_paste</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">create</i><span class="name">create</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">drafts</i><span class="name">drafts</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">filter_list</i><span class="name">filter_list</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">flag</i><span class="name">flag</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">forward</i><span class="name">forward</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">gesture</i><span class="name">gesture</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">inbox</i><span class="name">inbox</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">link</i><span class="name">link</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">mail</i><span class="name">mail</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">markunread</i><span class="name">markunread</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">redo</i><span class="name">redo</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">remove</i><span class="name">remove</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">remove_circle</i><span class="name">remove_circle</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">remove_circle_outline</i><span class="name">remove_circle_outline</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">reply</i><span class="name">reply</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">reply_all</i><span class="name">reply_all</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">report</i><span class="name">report</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">save</i><span class="name">save</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">select_all</i><span class="name">select_all</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">send</i><span class="name">send</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">sort</i><span class="name">sort</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">text_format</i><span class="name">text_format</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">undo</i><span class="name">undo</span></div> </div> <h2>device</h2> <div class="demo-category"> <div class="demo-icon-block"><i class="mdl-icon material-icons">access_alarm</i><span class="name">access_alarm</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">access_alarms</i><span class="name">access_alarms</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">access_time</i><span class="name">access_time</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">add_alarm</i><span class="name">add_alarm</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">airplanemode_off</i><span class="name">airplanemode_off</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">airplanemode_on</i><span class="name">airplanemode_on</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">battery_alert</i><span class="name">battery_alert</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">battery_charging_full</i><span class="name">battery_charging_full</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">battery_full</i><span class="name">battery_full</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">battery_std</i><span class="name">battery_std</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">battery_unknown</i><span class="name">battery_unknown</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">bluetooth</i><span class="name">bluetooth</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">bluetooth_connected</i><span class="name">bluetooth_connected</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">bluetooth_disabled</i><span class="name">bluetooth_disabled</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">bluetooth_searching</i><span class="name">bluetooth_searching</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">brightness_auto</i><span class="name">brightness_auto</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">brightness_high</i><span class="name">brightness_high</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">brightness_low</i><span class="name">brightness_low</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">brightness_medium</i><span class="name">brightness_medium</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">data_usage</i><span class="name">data_usage</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">developer_mode</i><span class="name">developer_mode</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">devices</i><span class="name">devices</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">dvr</i><span class="name">dvr</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">gps_fixed</i><span class="name">gps_fixed</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">gps_not_fixed</i><span class="name">gps_not_fixed</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">gps_off</i><span class="name">gps_off</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">location_disabled</i><span class="name">location_disabled</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">location_searching</i><span class="name">location_searching</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">multitrack_audio</i><span class="name">multitrack_audio</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">network_cell</i><span class="name">network_cell</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">network_wifi</i><span class="name">network_wifi</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">nfc</i><span class="name">nfc</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">now_wallpaper</i><span class="name">now_wallpaper</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">now_widgets</i><span class="name">now_widgets</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">screen_lock_landscape</i><span class="name">screen_lock_landscape</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">screen_lock_portrait</i><span class="name">screen_lock_portrait</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">screen_lock_rotation</i><span class="name">screen_lock_rotation</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">screen_rotation</i><span class="name">screen_rotation</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">sd_storage</i><span class="name">sd_storage</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">settings_system_daydream</i><span class="name">settings_system_daydream</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">signal_cellular_4_bar</i><span class="name">signal_cellular_4_bar</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">signal_cellular_connected_no_internet_4_bar</i><span class="name">signal_cellular_connected_no_internet_4_bar</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">signal_cellular_no_sim</i><span class="name">signal_cellular_no_sim</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">signal_cellular_null</i><span class="name">signal_cellular_null</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">signal_cellular_off</i><span class="name">signal_cellular_off</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">signal_wifi_4_bar</i><span class="name">signal_wifi_4_bar</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">signal_wifi_off</i><span class="name">signal_wifi_off</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">storage</i><span class="name">storage</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">usb</i><span class="name">usb</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">wifi_lock</i><span class="name">wifi_lock</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">wifi_tethering</i><span class="name">wifi_tethering</span></div> </div> <h2>editor</h2> <div class="demo-category"> <div class="demo-icon-block"><i class="mdl-icon material-icons">attach_file</i><span class="name">attach_file</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">attach_money</i><span class="name">attach_money</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">border_all</i><span class="name">border_all</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">border_bottom</i><span class="name">border_bottom</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">border_clear</i><span class="name">border_clear</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">border_color</i><span class="name">border_color</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">border_horizontal</i><span class="name">border_horizontal</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">border_inner</i><span class="name">border_inner</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">border_left</i><span class="name">border_left</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">border_outer</i><span class="name">border_outer</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">border_right</i><span class="name">border_right</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">border_style</i><span class="name">border_style</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">border_top</i><span class="name">border_top</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">border_vertical</i><span class="name">border_vertical</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">format_align_center</i><span class="name">format_align_center</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">format_align_justify</i><span class="name">format_align_justify</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">format_align_left</i><span class="name">format_align_left</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">format_align_right</i><span class="name">format_align_right</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">format_bold</i><span class="name">format_bold</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">format_clear</i><span class="name">format_clear</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">format_color_fill</i><span class="name">format_color_fill</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">format_color_reset</i><span class="name">format_color_reset</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">format_color_text</i><span class="name">format_color_text</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">format_indent_decrease</i><span class="name">format_indent_decrease</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">format_indent_increase</i><span class="name">format_indent_increase</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">format_italic</i><span class="name">format_italic</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">format_line_spacing</i><span class="name">format_line_spacing</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">format_list_bulleted</i><span class="name">format_list_bulleted</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">format_list_numbered</i><span class="name">format_list_numbered</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">format_paint</i><span class="name">format_paint</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">format_quote</i><span class="name">format_quote</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">format_size</i><span class="name">format_size</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">format_strikethrough</i><span class="name">format_strikethrough</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">format_textdirection_l_to_r</i><span class="name">format_textdirection_l_to_r</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">format_textdirection_r_to_l</i><span class="name">format_textdirection_r_to_l</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">format_underline</i><span class="name">format_underline</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">functions</i><span class="name">functions</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">insert_chart</i><span class="name">insert_chart</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">insert_comment</i><span class="name">insert_comment</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">insert_drive_file</i><span class="name">insert_drive_file</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">insert_emoticon</i><span class="name">insert_emoticon</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">insert_invitation</i><span class="name">insert_invitation</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">insert_link</i><span class="name">insert_link</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">insert_photo</i><span class="name">insert_photo</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">merge_type</i><span class="name">merge_type</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">mode_comment</i><span class="name">mode_comment</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">mode_edit</i><span class="name">mode_edit</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">publish</i><span class="name">publish</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">vertical_align_bottom</i><span class="name">vertical_align_bottom</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">vertical_align_center</i><span class="name">vertical_align_center</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">vertical_align_top</i><span class="name">vertical_align_top</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">wrap_text</i><span class="name">wrap_text</span></div> </div> <h2>file</h2> <div class="demo-category"> <div class="demo-icon-block"><i class="mdl-icon material-icons">attachment</i><span class="name">attachment</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">cloud</i><span class="name">cloud</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">cloud_circle</i><span class="name">cloud_circle</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">cloud_done</i><span class="name">cloud_done</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">cloud_download</i><span class="name">cloud_download</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">cloud_off</i><span class="name">cloud_off</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">cloud_queue</i><span class="name">cloud_queue</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">cloud_upload</i><span class="name">cloud_upload</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">file_download</i><span class="name">file_download</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">file_upload</i><span class="name">file_upload</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">folder</i><span class="name">folder</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">folder_open</i><span class="name">folder_open</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">folder_shared</i><span class="name">folder_shared</span></div> </div> <h2>hardware</h2> <div class="demo-category"> <div class="demo-icon-block"><i class="mdl-icon material-icons">cast</i><span class="name">cast</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">cast_connected</i><span class="name">cast_connected</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">computer</i><span class="name">computer</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">desktop_mac</i><span class="name">desktop_mac</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">desktop_windows</i><span class="name">desktop_windows</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">dock</i><span class="name">dock</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">gamepad</i><span class="name">gamepad</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">headset</i><span class="name">headset</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">headset_mic</i><span class="name">headset_mic</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">keyboard</i><span class="name">keyboard</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">keyboard_arrow_down</i><span class="name">keyboard_arrow_down</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">keyboard_arrow_left</i><span class="name">keyboard_arrow_left</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">keyboard_arrow_right</i><span class="name">keyboard_arrow_right</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">keyboard_arrow_up</i><span class="name">keyboard_arrow_up</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">keyboard_backspace</i><span class="name">keyboard_backspace</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">keyboard_capslock</i><span class="name">keyboard_capslock</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">keyboard_control</i><span class="name">keyboard_control</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">keyboard_hide</i><span class="name">keyboard_hide</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">keyboard_return</i><span class="name">keyboard_return</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">keyboard_tab</i><span class="name">keyboard_tab</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">keyboard_voice</i><span class="name">keyboard_voice</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">laptop</i><span class="name">laptop</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">laptop_chromebook</i><span class="name">laptop_chromebook</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">laptop_mac</i><span class="name">laptop_mac</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">laptop_windows</i><span class="name">laptop_windows</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">memory</i><span class="name">memory</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">mouse</i><span class="name">mouse</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">phone_android</i><span class="name">phone_android</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">phone_iphone</i><span class="name">phone_iphone</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">phonelink</i><span class="name">phonelink</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">phonelink_off</i><span class="name">phonelink_off</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">security</i><span class="name">security</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">sim_card</i><span class="name">sim_card</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">smartphone</i><span class="name">smartphone</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">speaker</i><span class="name">speaker</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">tablet</i><span class="name">tablet</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">tablet_android</i><span class="name">tablet_android</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">tablet_mac</i><span class="name">tablet_mac</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">tv</i><span class="name">tv</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">watch</i><span class="name">watch</span></div> </div> <h2>image</h2> <div class="demo-category"> <div class="demo-icon-block"><i class="mdl-icon material-icons">add_to_photos</i><span class="name">add_to_photos</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">adjust</i><span class="name">adjust</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">assistant_photo</i><span class="name">assistant_photo</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">audiotrack</i><span class="name">audiotrack</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">blur_circular</i><span class="name">blur_circular</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">blur_linear</i><span class="name">blur_linear</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">blur_off</i><span class="name">blur_off</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">blur_on</i><span class="name">blur_on</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">brightness_1</i><span class="name">brightness_1</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">brightness_2</i><span class="name">brightness_2</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">brightness_3</i><span class="name">brightness_3</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">brightness_4</i><span class="name">brightness_4</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">brightness_5</i><span class="name">brightness_5</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">brightness_6</i><span class="name">brightness_6</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">brightness_7</i><span class="name">brightness_7</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">brush</i><span class="name">brush</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">camera</i><span class="name">camera</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">camera_alt</i><span class="name">camera_alt</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">camera_front</i><span class="name">camera_front</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">camera_rear</i><span class="name">camera_rear</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">camera_roll</i><span class="name">camera_roll</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">center_focus_strong</i><span class="name">center_focus_strong</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">center_focus_weak</i><span class="name">center_focus_weak</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">collections</i><span class="name">collections</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">color_lens</i><span class="name">color_lens</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">colorize</i><span class="name">colorize</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">compare</i><span class="name">compare</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">control_point</i><span class="name">control_point</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">control_point_duplicate</i><span class="name">control_point_duplicate</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">crop_16_9</i><span class="name">crop_16_9</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">crop</i><span class="name">crop</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">crop_3_2</i><span class="name">crop_3_2</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">crop_5_4</i><span class="name">crop_5_4</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">crop_7_5</i><span class="name">crop_7_5</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">crop_din</i><span class="name">crop_din</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">crop_free</i><span class="name">crop_free</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">crop_landscape</i><span class="name">crop_landscape</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">crop_original</i><span class="name">crop_original</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">crop_portrait</i><span class="name">crop_portrait</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">crop_square</i><span class="name">crop_square</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">dehaze</i><span class="name">dehaze</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">details</i><span class="name">details</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">edit</i><span class="name">edit</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">exposure</i><span class="name">exposure</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">exposure_minus_1</i><span class="name">exposure_minus_1</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">exposure_minus_2</i><span class="name">exposure_minus_2</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">exposure_plus_1</i><span class="name">exposure_plus_1</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">exposure_plus_2</i><span class="name">exposure_plus_2</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">exposure_zero</i><span class="name">exposure_zero</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">filter_1</i><span class="name">filter_1</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">filter</i><span class="name">filter</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">filter_2</i><span class="name">filter_2</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">filter_3</i><span class="name">filter_3</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">filter_4</i><span class="name">filter_4</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">filter_5</i><span class="name">filter_5</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">filter_6</i><span class="name">filter_6</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">filter_7</i><span class="name">filter_7</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">filter_8</i><span class="name">filter_8</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">filter_9</i><span class="name">filter_9</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">filter_9_plus</i><span class="name">filter_9_plus</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">filter_b_and_w</i><span class="name">filter_b_and_w</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">filter_center_focus</i><span class="name">filter_center_focus</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">filter_drama</i><span class="name">filter_drama</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">filter_frames</i><span class="name">filter_frames</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">filter_hdr</i><span class="name">filter_hdr</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">filter_none</i><span class="name">filter_none</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">filter_tilt_shift</i><span class="name">filter_tilt_shift</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">filter_vintage</i><span class="name">filter_vintage</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">flare</i><span class="name">flare</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">flash_auto</i><span class="name">flash_auto</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">flash_off</i><span class="name">flash_off</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">flash_on</i><span class="name">flash_on</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">flip</i><span class="name">flip</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">gradient</i><span class="name">gradient</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">grain</i><span class="name">grain</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">grid_off</i><span class="name">grid_off</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">grid_on</i><span class="name">grid_on</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">hdr_off</i><span class="name">hdr_off</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">hdr_on</i><span class="name">hdr_on</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">hdr_strong</i><span class="name">hdr_strong</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">hdr_weak</i><span class="name">hdr_weak</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">healing</i><span class="name">healing</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">image</i><span class="name">image</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">image_aspect_ratio</i><span class="name">image_aspect_ratio</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">iso</i><span class="name">iso</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">landscape</i><span class="name">landscape</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">leak_add</i><span class="name">leak_add</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">leak_remove</i><span class="name">leak_remove</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">lens</i><span class="name">lens</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">looks</i><span class="name">looks</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">looks_3</i><span class="name">looks_3</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">looks_4</i><span class="name">looks_4</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">looks_5</i><span class="name">looks_5</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">looks_6</i><span class="name">looks_6</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">loupe</i><span class="name">loupe</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">movie_creation</i><span class="name">movie_creation</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">nature</i><span class="name">nature</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">nature_people</i><span class="name">nature_people</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">navigate_before</i><span class="name">navigate_before</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">navigate_next</i><span class="name">navigate_next</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">palette</i><span class="name">palette</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">panorama</i><span class="name">panorama</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">panorama_fisheye</i><span class="name">panorama_fisheye</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">panorama_horizontal</i><span class="name">panorama_horizontal</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">panorama_vertical</i><span class="name">panorama_vertical</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">panorama_wide_angle</i><span class="name">panorama_wide_angle</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">photo</i><span class="name">photo</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">photo_album</i><span class="name">photo_album</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">photo_camera</i><span class="name">photo_camera</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">photo_library</i><span class="name">photo_library</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">portrait</i><span class="name">portrait</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">remove_red_eye</i><span class="name">remove_red_eye</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">rotate_left</i><span class="name">rotate_left</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">rotate_right</i><span class="name">rotate_right</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">slideshow</i><span class="name">slideshow</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">straighten</i><span class="name">straighten</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">style</i><span class="name">style</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">switch_camera</i><span class="name">switch_camera</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">switch_video</i><span class="name">switch_video</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">tag_faces</i><span class="name">tag_faces</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">texture</i><span class="name">texture</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">timelapse</i><span class="name">timelapse</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">timer_10</i><span class="name">timer_10</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">timer</i><span class="name">timer</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">timer_3</i><span class="name">timer_3</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">timer_auto</i><span class="name">timer_auto</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">timer_off</i><span class="name">timer_off</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">tonality</i><span class="name">tonality</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">transform</i><span class="name">transform</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">tune</i><span class="name">tune</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">wb_auto</i><span class="name">wb_auto</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">wb_cloudy</i><span class="name">wb_cloudy</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">wb_incandescent</i><span class="name">wb_incandescent</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">wb_sunny</i><span class="name">wb_sunny</span></div> </div> <h2>maps</h2> <div class="demo-category"> <div class="demo-icon-block"><i class="mdl-icon material-icons">beenhere</i><span class="name">beenhere</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">directions</i><span class="name">directions</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">directions_bike</i><span class="name">directions_bike</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">directions_bus</i><span class="name">directions_bus</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">directions_car</i><span class="name">directions_car</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">directions_ferry</i><span class="name">directions_ferry</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">directions_subway</i><span class="name">directions_subway</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">directions_train</i><span class="name">directions_train</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">directions_transit</i><span class="name">directions_transit</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">directions_walk</i><span class="name">directions_walk</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">flight</i><span class="name">flight</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">hotel</i><span class="name">hotel</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">layers</i><span class="name">layers</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">layers_clear</i><span class="name">layers_clear</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">local_airport</i><span class="name">local_airport</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">local_atm</i><span class="name">local_atm</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">local_attraction</i><span class="name">local_attraction</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">local_bar</i><span class="name">local_bar</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">local_cafe</i><span class="name">local_cafe</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">local_car_wash</i><span class="name">local_car_wash</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">local_convenience_store</i><span class="name">local_convenience_store</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">local_drink</i><span class="name">local_drink</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">local_florist</i><span class="name">local_florist</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">local_gas_station</i><span class="name">local_gas_station</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">local_grocery_store</i><span class="name">local_grocery_store</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">local_hospital</i><span class="name">local_hospital</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">local_hotel</i><span class="name">local_hotel</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">local_laundry_service</i><span class="name">local_laundry_service</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">local_library</i><span class="name">local_library</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">local_mall</i><span class="name">local_mall</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">local_movies</i><span class="name">local_movies</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">local_offer</i><span class="name">local_offer</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">local_parking</i><span class="name">local_parking</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">local_pharmacy</i><span class="name">local_pharmacy</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">local_phone</i><span class="name">local_phone</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">local_pizza</i><span class="name">local_pizza</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">local_play</i><span class="name">local_play</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">local_post_office</i><span class="name">local_post_office</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">local_print_shop</i><span class="name">local_print_shop</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">local_restaurant</i><span class="name">local_restaurant</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">local_see</i><span class="name">local_see</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">local_shipping</i><span class="name">local_shipping</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">local_taxi</i><span class="name">local_taxi</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">location_history</i><span class="name">location_history</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">map</i><span class="name">map</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">my_location</i><span class="name">my_location</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">navigation</i><span class="name">navigation</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">pin_drop</i><span class="name">pin_drop</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">place</i><span class="name">place</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">rate_review</i><span class="name">rate_review</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">restaurant_menu</i><span class="name">restaurant_menu</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">satellite</i><span class="name">satellite</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">store_mall_directory</i><span class="name">store_mall_directory</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">terrain</i><span class="name">terrain</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">traffic</i><span class="name">traffic</span></div> </div> <h2>navigation</h2> <div class="demo-category"> <div class="demo-icon-block"><i class="mdl-icon material-icons">apps</i><span class="name">apps</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">arrow_back</i><span class="name">arrow_back</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">arrow_drop_down</i><span class="name">arrow_drop_down</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">arrow_drop_down_circle</i><span class="name">arrow_drop_down_circle</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">arrow_drop_up</i><span class="name">arrow_drop_up</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">arrow_forward</i><span class="name">arrow_forward</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">cancel</i><span class="name">cancel</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">check</i><span class="name">check</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">chevron_left</i><span class="name">chevron_left</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">chevron_right</i><span class="name">chevron_right</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">close</i><span class="name">close</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">expand_less</i><span class="name">expand_less</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">expand_more</i><span class="name">expand_more</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">fullscreen</i><span class="name">fullscreen</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">fullscreen_exit</i><span class="name">fullscreen_exit</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">menu</i><span class="name">menu</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">more_horiz</i><span class="name">more_horiz</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">more_vert</i><span class="name">more_vert</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">refresh</i><span class="name">refresh</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">unfold_less</i><span class="name">unfold_less</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">unfold_more</i><span class="name">unfold_more</span></div> </div> <h2>notification</h2> <div class="demo-category"> <div class="demo-icon-block"><i class="mdl-icon material-icons">adb</i><span class="name">adb</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">bluetooth_audio</i><span class="name">bluetooth_audio</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">disc_full</i><span class="name">disc_full</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">dnd_forwardslash</i><span class="name">dnd_forwardslash</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">do_not_disturb</i><span class="name">do_not_disturb</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">drive_eta</i><span class="name">drive_eta</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">event_available</i><span class="name">event_available</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">event_busy</i><span class="name">event_busy</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">event_note</i><span class="name">event_note</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">folder_special</i><span class="name">folder_special</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">mms</i><span class="name">mms</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">more</i><span class="name">more</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">network_locked</i><span class="name">network_locked</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">phone_bluetooth_speaker</i><span class="name">phone_bluetooth_speaker</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">phone_forwarded</i><span class="name">phone_forwarded</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">phone_in_talk</i><span class="name">phone_in_talk</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">phone_locked</i><span class="name">phone_locked</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">phone_missed</i><span class="name">phone_missed</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">phone_paused</i><span class="name">phone_paused</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">sd_card</i><span class="name">sd_card</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">sim_card_alert</i><span class="name">sim_card_alert</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">sms</i><span class="name">sms</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">sms_failed</i><span class="name">sms_failed</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">sync</i><span class="name">sync</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">sync_disabled</i><span class="name">sync_disabled</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">sync_problem</i><span class="name">sync_problem</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">system_update</i><span class="name">system_update</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">tap_and_play</i><span class="name">tap_and_play</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">time_to_leave</i><span class="name">time_to_leave</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">vibration</i><span class="name">vibration</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">voice_chat</i><span class="name">voice_chat</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">vpn_lock</i><span class="name">vpn_lock</span></div> </div> <h2>social</h2> <div class="demo-category"> <div class="demo-icon-block"><i class="mdl-icon material-icons">cake</i><span class="name">cake</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">domain</i><span class="name">domain</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">group</i><span class="name">group</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">group_add</i><span class="name">group_add</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">location_city</i><span class="name">location_city</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">mood</i><span class="name">mood</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">notifications</i><span class="name">notifications</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">notifications_none</i><span class="name">notifications_none</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">notifications_off</i><span class="name">notifications_off</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">notifications_on</i><span class="name">notifications_on</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">notifications_paused</i><span class="name">notifications_paused</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">pages</i><span class="name">pages</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">party_mode</i><span class="name">party_mode</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">people</i><span class="name">people</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">people_outline</i><span class="name">people_outline</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">person</i><span class="name">person</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">person_add</i><span class="name">person_add</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">person_outline</i><span class="name">person_outline</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">plus_one</i><span class="name">plus_one</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">poll</i><span class="name">poll</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">public</i><span class="name">public</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">school</i><span class="name">school</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">share</i><span class="name">share</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">whatshot</i><span class="name">whatshot</span></div> </div> <h2>toggle</h2> <div class="demo-category"> <div class="demo-icon-block"><i class="mdl-icon material-icons">check_box</i><span class="name">check_box</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">check_box_outline_blank</i><span class="name">check_box_outline_blank</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">radio_button_off</i><span class="name">radio_button_off</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">radio_button_on</i><span class="name">radio_button_on</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">star</i><span class="name">star</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">star_half</i><span class="name">star_half</span></div> <div class="demo-icon-block"><i class="mdl-icon material-icons">star_outline</i><span class="name">star_outline</span></div> </div>