extends ../../layouts/LayoutComponent
include ../../mixins/icons/IconCard


prepend styles
  link(rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons')

block append variables
  
  
  -
    var icons = [
      "search", "done", "face", "settings", "fingerprint", "check_circle", "info", "home", "favorite", "account_circle", "help_outline", "lightbulb", "android", "delete", "shopping_cart", "language", "flutter_dash", "accessibility", "visibility", "lock", "favorite_border", "trending_up", "thumb_up", "schedule", "verified", "pets", "3d_rotation", "account_balance", "build", "open_in_new", "description", "bug_report", "event", "question_answer", "paid", "list", "arrow_right_alt", "dashboard", "accessibility_new", "pan_tool", "analytics", "star_rate", "logout", "shopping_bag", "manage_accounts", "credit_card", "verified_user", "work", "calendar_today", "help", "login", "launch", "filter_alt", "feedback", "fact_check", "view_in_ar", "history", "code", "eco", "savings", "visibility_off", "check_circle_outline", "thumb_up_off_alt", "timeline", "article", "done_outline", "grade", "add_shopping_cart", "date_range", "explore", "perm_identity", "autorenew", "add_task", "nightlight_round", "flight_takeoff", "report_problem", "assignment", "alarm", "task_alt", "update", "highlight_off", "watch_later", "lock_open", "account_balance_wallet", "store", "privacy_tip", "room", "print", "account_box", "touch_app", "today", "dns", "admin_panel_settings", "gavel", "contact_support", "g_translate", "api", "zoom_in", "power_settings_new", "payment", "record_voice_over", "bookmark_border", "assessment", "thumb_down", "open_in_full", "supervisor_account", "translate", "accessible", "model_training", "bookmark", "stars", "work_outline", "get_app", "book", "done_all", "extension", "label", "pending", "cached", "shopping_basket", "published_with_changes", "leaderboard", "group_work", "loyalty", "accessible_forward", "input", "query_builder", "announcement", "add_to_drive", "drag_indicator", "delete_outline", "note_add", "assignment_turned_in", "reorder", "hourglass_empty", "open_with", "preview", "view_list", "invert_colors", "help_center", "pending_actions", "track_changes", "compare_arrows", "supervised_user_circle", "settings_accessibility", "integration_instructions", "backup", "trending_flat", "contact_page", "saved_search", "build_circle", "arrow_circle_up", "receipt", "card_giftcard", "trending_down", "euro_symbol", "grading", "swipe", "pageview", "close_fullscreen", "mediation", "sensors", "label_important", "source", "rule", "copyright", "restore", "thumbs_up_down", "perm_media", "assignment_ind", "exit_to_app", "zoom_out", "alarm_on", "delete_forever", "bookmarks", "settings_phone", "swap_horiz", "change_history", "flaky", "anchor", "card_membership", "dashboard_customize", "support", "wysiwyg", "arrow_circle_down", "offline_pin", "opacity", "bookmark_added", "theaters", "https", "offline_bolt", "pregnant_woman", "book_online", "sticky_note_2", "tab", "subject", "thumb_down_off_alt", "rowing", "no_accounts", "redeem", "hourglass_full", "outlet", "settings_input_antenna", "commute", "not_started", "aspect_ratio", "settings_voice", "flight_land", "donut_large", "important_devices", "bookmark_add", "swap_vert", "find_in_page", "speaker_notes", "perm_phone_msg", "contactless", "view_headline", "minimize", "toll", "youtube_searched_for", "history_toggle_off", "table_view", "dangerous", "schedule_send", "sync_alt", "highlight_alt", "polymer", "settings_applications", "turned_in_not", "view_week", "settings_ethernet", "settings_remote", "upgrade", "open_in_browser", "try", "addchart", "assignment_late", "lock_clock", "system_update_alt", "app_blocking", "smart_button", "camera_enhance", "fit_screen", "settings_input_composite", "toc", "online_prediction", "shop", "mark_as_unread", "alarm_add", "circle_notifications", "class", "disabled_by_default", "http", "settings_brightness", "turned_in", "settings_input_hdmi", "gif", "settings_bluetooth", "next_plan", "settings_cell", "settings_overscan", "view_carousel", "dynamic_form", "find_replace", "hide_source", "calendar_view_month", "donut_small", "search_off", "perm_contact_calendar", "quickreply", "view_column", "card_travel", "file_present", "play_for_work", "view_day", "batch_prediction", "tour", "wifi_protected_setup", "settings_power", "view_agenda", "all_inbox", "expand", "perm_scan_wifi", "settings_input_component", "flip_to_front", "unpublished", "maximize", "picture_in_picture", "markunread_mailbox", "segment", "spellcheck", "event_seat", "alarm_off", "production_quantity_limits", "settings_input_svideo", "outbound", "remove_shopping_cart", "view_module", "line_style", "plagiarism", "view_sidebar", "assignment_return", "restore_from_trash", "settings_backup_restore", "bookmark_remove", "compress", "perm_camera_mic", "restore_page", "eject", "sensors_off", "view_quilt", "code_off", "remove_done", "assignment_returned", "horizontal_split", "vertical_split", "voice_over_off", "outbox", "send_and_archive", "speaker_notes_off", "chrome_reader_mode", "perm_device_information", "shop_2", "view_stream", "all_out", "not_accessible", "swap_vertical_circle", "calendar_view_day", "cancel_schedule_send", "picture_in_picture_alt", "swap_horizontal_circle", "calendar_view_week", "edit_off", "hourglass_disabled", "space_dashboard", "extension_off", "perm_data_setting", "tab_unselected", "credit_card_off", "update_disabled", "new_label", "request_page", "line_weight", "flip_to_back", "work_off", "comment_bank", "text_rotate_vertical", "shop_two", "view_array", "backup_table", "explore_off", "label_off", "rounded_corner", "text_rotation_angledown", "text_rotation_down", "text_rotate_up", "text_rotation_angleup", "open_in_new_off", "subtitles_off", "text_rotation_none", "facebook", "facebook", "person", "groups", "public", "notifications", "school", "people", "person_outline", "share", "group", "catching_pokemon", "coronavirus", "emoji_events", "psychology", "notifications_active", "sentiment_satisfied", "emoji_emotions", "person_add", "construction", "science", "engineering", "health_and_safety", "emoji_objects", "people_alt", "precision_manufacturing", "cake", "masks", "group_add", "sentiment_dissatisfied", "self_improvement", "military_tech", "ios_share", "sports_esports", "emoji_people", "sentiment_very_satisfied", "mood", "thumb_up_alt", "domain", "location_city", "sentiment_neutral", "architecture", "sports_kabaddi", "poll", "person_add_alt", "sports_soccer", "travel_explore", "whatshot", "connect_without_contact", "hiking", "sentiment_very_dissatisfied", "history_edu", "notifications_none", "female", "emoji_nature", "notification_add", "recommend", "male", "kayaking", "mood_bad", "sports_basketball", "switch_account", "sick", "person_add_alt_1", "6_ft_apart", "luggage", "notifications_off", "clean_hands", "nights_stay", "outdoor_grill", "emoji_symbols", "people_outline", "deck", "person_remove", "social_distance", "emoji_flags", "sanitizer", "emoji_food_beverage", "sports_tennis", "add_reaction", "follow_the_signs", "paragliding", "transgender", "thumb_down_alt", "elderly", "nordic_walking", "skateboarding", "sports_volleyball", "downhill_skiing", "sports_motorsports", "king_bed", "fireplace", "snowboarding", "sports", "sports_baseball", "surfing", "piano", "sports_football", "single_bed", "sports_mma", "person_off", "plus_one", "edit_notifications", "emoji_transportation", "pages", "person_remove_alt_1", "reduce_capacity", "safety_divider", "snowshoeing", "add_moderator", "public_off", "kitesurfing", "remove_moderator", "party_mode", "sports_rugby", "sledding", "sports_cricket", "sports_hockey", "notifications_paused", "sports_handball", "ice_skating", "sports_golf", "piano_off", "no_luggage", "real_estate_agent", "personal_injury", "menu", "menu", "close", "expand_more", "arrow_back", "arrow_forward_ios", "chevron_right", "arrow_drop_down", "arrow_back_ios", "more_vert", "cancel", "arrow_forward", "check", "expand_less", "more_horiz", "apps", "arrow_back_ios_new", "chevron_left", "campaign", "refresh", "arrow_upward", "payments", "arrow_right", "east", "menu_open", "arrow_downward", "double_arrow", "maps_home_work", "unfold_more", "fullscreen", "south", "home_work", "arrow_drop_up", "west", "arrow_drop_down_circle", "last_page", "north_east", "fullscreen_exit", "arrow_left", "first_page", "north", "north_west", "unfold_less", "subdirectory_arrow_right", "switch_left", "subdirectory_arrow_left", "waterfall_chart", "assistant_direction", "switch_right", "app_settings_alt", "legend_toggle", "offline_share", "south_west", "south_east", "pivot_table_chart", "email", "email", "call", "location_on", "phone", "business", "chat", "alternate_email", "qr_code_scanner", "vpn_key", "list_alt", "chat_bubble", "chat_bubble_outline", "qr_code_2", "sentiment_satisfied_alt", "forum", "contact_mail", "mail_outline", "comment", "rss_feed", "message", "textsms", "person_search", "qr_code", "contacts", "hourglass_bottom", "live_help", "contact_phone", "app_registration", "document_scanner", "present_to_all", "duo", "import_contacts", "mark_email_read", "forward_to_inbox", "mark_chat_unread", "mark_email_unread", "screen_share", "stay_current_portrait", "dialpad", "hourglass_top", "read_more", "stay_primary_portrait", "call_end", "import_export", "phone_enabled", "phonelink_ring", "location_off", "3p", "mark_chat_read", "unsubscribe", "person_add_disabled", "more_time", "ring_volume", "clear_all", "call_missed", "domain_verification", "phone_disabled", "phonelink_lock", "phonelink_setup", "call_split", "cell_wifi", "domain_disabled", "portable_wifi_off", "voicemail", "stay_current_landscape", "cancel_presentation", "call_merge", "swap_calls", "rtt", "sip", "speaker_phone", "mobile_screen_share", "add_ic_call", "nat", "call_received", "pause_presentation", "call_missed_outgoing", "phonelink_erase", "stop_screen_share", "stay_primary_landscape", "call_made", "desktop_access_disabled", "print_disabled", "wifi_calling", "dialer_sip", "invert_colors_off", "no_sim", "add", "add", "send", "link", "content_copy", "add_circle_outline", "add_circle", "insights", "clear", "mail", "create", "save", "bolt", "filter_list", "inventory", "inventory_2", "flag", "remove", "remove_circle_outline", "calculate", "sort", "remove_circle", "push_pin", "block", "undo", "shield", "how_to_reg", "policy", "stream", "reply", "content_paste", "add_box", "content_cut", "report", "file_copy", "archive", "tag", "biotech", "link_off", "square_foot", "inbox", "waves", "stacked_bar_chart", "dynamic_feed", "redo", "forward", "where_to_vote", "save_alt", "change_circle", "backspace", "gesture", "how_to_vote", "drafts", "low_priority", "upcoming", "add_link", "font_download", "move_to_inbox", "outlined_flag", "ballot", "delete_sweep", "weekend", "markunread", "reply_all", "text_format", "attribution", "report_gmailerrorred", "select_all", "next_week", "unarchive", "copy_all", "report_off", "content_paste_off", "font_download_off", "edit", "edit", "navigate_next", "photo_camera", "auto_awesome", "tune", "circle", "palette", "receipt_long", "camera_alt", "auto_stories", "timer", "image", "navigate_before", "brush", "wb_sunny", "picture_as_pdf", "audiotrack", "add_a_photo", "music_note", "remove_red_eye", "camera", "collections", "looks_one", "flash_on", "landscape", "euro", "filter_vintage", "auto_fix_high", "color_lens", "image_search", "blur_on", "filter_drama", "straighten", "tag_faces", "healing", "brightness_6", "assistant", "lens", "flare", "style", "timelapse", "grid_on", "face_retouching_natural", "crop_square", "texture", "crop", "video_camera_front", "brightness_5", "motion_photos_on", "add_photo_alternate", "control_point", "looks_two", "nature_people", "animation", "auto_awesome_motion", "portrait", "brightness_4", "brightness_7", "crop_free", "dehaze", "photo_library", "collections_bookmark", "colorize", "looks_3", "cases", "wb_cloudy", "transform", "auto_awesome_mosaic", "bedtime", "rotate_right", "timer_off", "center_focus_strong", "looks_4", "movie_creation", "grain", "slideshow", "adjust", "flip_camera_android", "panorama_fish_eye", "view_comfy", "crop_original", "shutter_speed", "gradient", "looks_5", "leak_add", "looks", "photo", "thermostat_auto", "brightness_1", "details", "filter_center_focus", "flash_off", "loupe", "mic_external_on", "photo_camera_back", "broken_image", "compare", "filter_1", "photo_album", "photo_filter", "brightness_3", "filter_tilt_shift", "filter_frames", "nature", "panorama", "photo_camera_front", "exposure_neg_2", "24mp", "camera_roll", "center_focus_weak", "filter", "photo_size_select_actual", "vignette", "wb_incandescent", "23mp", "auto_fix_normal", "brightness_2", "filter_2", "filter_hdr", "hdr_strong", "camera_front", "crop_din", "blur_linear", "monochrome_photos", "rotate_left", "tonality", "assistant_photo", "crop_7_5", "video_camera_back", "view_compact", "blur_circular", "grid_off", "hdr_weak", "exposure_plus_1", "hide_image", "motion_photos_auto", "movie_filter", "music_off", "rotate_90_degrees_ccw", "linked_camera", "control_point_duplicate", "filter_6", "filter_8", "filter_none", "flip_camera_ios", "leak_remove", "looks_6", "timer_3", "video_stable", "60fps_select", "add_to_photos", "burst_mode", "motion_photos_paused", "switch_video", "crop_16_9", "crop_portrait", "flash_auto", "flip", "panorama_horizontal_select", "panorama_wide_angle_select", "vrpano", "wb_auto", "crop_5_4", "hdr_enhanced_select", "panorama_horizontal", "22mp", "crop_landscape", "crop_rotate", "face_retouching_off", "filter_3", "hdr_on", "hevc", "panorama_vertical_select", "wb_shade", "wb_twilight", "11mp", "crop_3_2", "dirty_lens", "filter_4", "filter_9", "motion_photos_off", "photo_size_select_small", "30fps_select", "exposure", "filter_5", "filter_7", "filter_b_and_w", "iso", "panorama_photosphere_select", "12mp", "5mp", "filter_9_plus", "hdr_plus", "14mp", "20mp", "blur_off", "camera_rear", "exposure_plus_2", "panorama_photosphere", "photo_size_select_large", "raw_off", "switch_camera", "10mp", "2mp", "8mp", "autofps_select", "hdr_off", "image_aspect_ratio", "image_not_supported", "motion_photos_pause", "mp", "panorama_wide_angle", "raw_on", "wb_iridescent", "17mp", "18mp", "21mp", "9mp", "exposure_zero", "panorama_vertical", "timer_10", "13mp", "15mp", "16mp", "19mp", "3mp", "4mp", "6mp", "exposure_neg_1", "mic_external_off", "auto_fix_off", "7mp", "place", "file_download", "play_arrow", "warning", "star", "smartphone", "insert_photo", "storefront", "wifi", "devices", "feed", "sensor_door"
    ]

block append content
  +PageHeader({title:'Material Icons'})
    p.mt-2 Get Material Icons in five styles and a range of downloadable sizes and densities. The icons are crafted based on the core design principles and metrics of Material design guideline.
    a(href='https://fonts.google.com/icons' target='_blank').btn.btn-link.ps-0.btn-sm Material Icons Documentation
      span.fas.fa-chevron-right.ms-1.fs-11
  
  .card.mb-3
    .card-header
      h5.mb-0 CSS
    .card-body.bg-body-tertiary
      +ComponentCardLib
        link(rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons')
        

  +IconExampleCard.mb-3
    span.material-icons.text-secondary.fs-4 notifications

  .card.mb-3(data-list!={valueNames: ['icon-list-item']})
    +IconListHeader
    .card-body.bg-body-tertiary
      .row.list#icon-list
        each value, index in icons
          +IconCard(value)
            span.material-icons.text-900.fs-6 #{value}

      +IconSearchFallback

  +CopiedNotificationToast