Materialize CSS Icons

Materialize CSS Icons

Materialize CSS icon is taken from Material design that is provided by google. These icons can be downloaded directly from the material design specs.

Materialize CSS supports the following popular icon libraries:

  • Font Awesome Icons
  • Google Material Icons
  • Bootstrap Icons

Icon Uses

To use Material icons inside the project, simply add the given below CDN link inside the <head> section of the web page.

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

To use these icons, use the .material-icons class to the <i> element base class.

Icon
  
   <i class="material-icons">camera</i>  
 

General Syntax

<i class="Write down icon class ">Icon Name</i>    
Try It Now

Source Code

Download
<i class="material-icons">cloud</i>
<i class="material-icons">cloud</i>
<i class="material-icons">cloud</i>
<i class="material-icons">cloud</i>
<i class="material-icons">cloud</i>    
Try it yourself

Source Code : Output

cloud cloud cloud cloud cloud

Icons Size

Materialize CSS provides different predefined class such as .tiny, .small, .medium & .large. It is used to create the tiny, small, medium, and large sizes of the materialized icons correspondingly.

General Syntax

<i class="{Icons class} { tiny | small | medium | large}">cloud</i>    
Try It Now

Source Code

Download
<i class="material-icons tiny">cloud</i>
<i class="material-icons small">cloud</i>
<i class="material-icons">cloud</i>
<i class="material-icons medium">cloud</i>
<i class="material-icons large">cloud</i>    
Try it yourself

Source Code : Output

cloud cloud cloud cloud cloud

Code Explanation

Icons List

Followings are the list of Materialize css icons.Use it inside your project.

3d_rotation

3d_rotation

ac_unit

ac_unit

access_alarm

access_alarm

access_alarms

access_alarms

access_time

access_time

accessibility

accessibility

accessible

accessible

account_balance

account_balance

account_balance_wallet

account_balance_wallet

account_box

account_box

account_circle

account_circle

adb

adb

add

add

add_a_photo

add_a_photo

add_alarm

add_alarm

add_alert

add_alert

add_box

add_box

add_circle

add_circle

add_circle_outline

add_circle_outline

add_location

add_location

add_shopping_cart

add_shopping_cart

add_to_photos

add_to_photos

add_to_queue

add_to_queue

adjust

adjust

airline_seat_flat

airline_seat_flat

airline_seat_flat_angled

airline_seat_flat_angled

airline_seat_individual_suite

airline_seat_individual_suite

airline_seat_legroom_extra

airline_seat_legroom_extra

airline_seat_legroom_normal

airline_seat_legroom_normal

airline_seat_legroom_reduced

airline_seat_legroom_reduced

airline_seat_recline_extra

airline_seat_recline_extra

airline_seat_recline_normal

airline_seat_recline_normal

airplanemode_active

airplanemode_active

airplanemode_inactive

airplanemode_inactive

airplay

airplay

airport_shuttle

airport_shuttle

alarm

alarm

alarm_add

alarm_add

alarm_off

alarm_off

alarm_on

alarm_on

album

album

all_inclusive

all_inclusive

all_out

all_out

android

android

announcement

announcement

apps

apps

archive

archive

arrow_back

arrow_back

arrow_downward

arrow_downward

arrow_drop_down

arrow_drop_down

arrow_drop_down_circle

arrow_drop_down_circle

arrow_drop_up

arrow_drop_up

arrow_forward

arrow_forward

arrow_upward

arrow_upward

art_track

art_track

aspect_ratio

aspect_ratio

assessment

assessment

assignment

assignment

assignment_ind

assignment_ind

assignment_late

assignment_late

assignment_return

assignment_return

assignment_returned

assignment_returned

assignment_turned_in

assignment_turned_in

assistant

assistant

assistant_photo

assistant_photo

attach_file

attach_file

attach_money

attach_money

attachment

attachment

audiotrack

audiotrack

autorenew

autorenew

av_timer

av_timer

backspace

backspace

backup

backup

battery_alert

battery_alert

battery_charging_full

battery_charging_full

battery_full

battery_full

battery_std

battery_std

battery_unknown

battery_unknown

beach_access

beach_access

beenhere

beenhere

block

block

bluetooth

bluetooth

bluetooth_audio

bluetooth_audio

bluetooth_connected

bluetooth_connected

bluetooth_disabled

bluetooth_disabled

bluetooth_searching

bluetooth_searching

blur_circular

blur_circular

blur_linear

blur_linear

blur_off

blur_off

blur_on

blur_on

book

book

bookmark

bookmark

bookmark_border

bookmark_border

border_all

border_all

border_bottom

border_bottom

border_clear

border_clear

border_color

border_color

border_horizontal

border_horizontal

border_inner

border_inner

border_left

border_left

border_outer

border_outer

border_right

border_right

border_style

border_style

border_top

border_top

border_vertical

border_vertical

branding_watermark

branding_watermark

brightness_1

brightness_1

brightness_2

brightness_2

brightness_3

brightness_3

brightness_4

brightness_4

brightness_5

brightness_5

brightness_6

brightness_6

brightness_7

brightness_7

brightness_auto

brightness_auto

brightness_high

brightness_high

brightness_low

brightness_low

brightness_medium

brightness_medium

broken_image

broken_image

brush

brush

bubble_chart

bubble_chart

bug_report

bug_report

build

build

burst_mode

burst_mode

business

business

business_center

business_center

cached

cached

cake

cake

call

call

call_end

call_end

call_made

call_made

call_merge

call_merge

call_missed

call_missed

call_missed_outgoing

call_missed_outgoing

call_received

call_received

call_split

call_split

call_to_action

call_to_action

camera

camera

camera_alt

camera_alt

camera_enhance

camera_enhance

camera_front

camera_front

camera_rear

camera_rear

camera_roll

camera_roll

cancel

cancel

card_giftcard

card_giftcard

card_membership

card_membership

card_travel

card_travel

casino

casino

cast

cast

cast_connected

cast_connected

center_focus_strong

center_focus_strong

center_focus_weak

center_focus_weak

change_history

change_history

chat

chat

chat_bubble

chat_bubble

chat_bubble_outline

chat_bubble_outline

check

check

check_box

check_box

check_box_outline_blank

check_box_outline_blank

check_circle

check_circle

chevron_left

chevron_left

chevron_right

chevron_right

child_care

child_care

child_friendly

child_friendly

chrome_reader_mode

chrome_reader_mode

class

class

clear

clear

clear_all

clear_all

close

close

closed_caption

closed_caption

cloud

cloud

cloud_circle

cloud_circle

cloud_done

cloud_done

cloud_download

cloud_download

cloud_off

cloud_off

cloud_queue

cloud_queue

cloud_upload

cloud_upload

code

code

collections

collections

collections_bookmark

collections_bookmark

color_lens

color_lens

colorize

colorize

comment

comment

compare

compare

compare_arrows

compare_arrows

computer

computer

confirmation_number

confirmation_number

contact_mail

contact_mail

contact_phone

contact_phone

contacts

contacts

content_copy

content_copy

content_cut

content_cut

content_paste

content_paste

control_point

control_point

control_point_duplicate

control_point_duplicate

copyright

copyright

create

create

create_new_folder

create_new_folder

credit_card

credit_card

crop

crop

crop_16_9

crop_16_9

crop_3_2

crop_3_2

crop_5_4

crop_5_4

crop_7_5

crop_7_5

crop_din

crop_din

crop_free

crop_free

crop_landscape

crop_landscape

crop_original

crop_original

crop_portrait

crop_portrait

crop_rotate

crop_rotate

crop_square

crop_square

dashboard

dashboard

data_usage

data_usage

date_range

date_range

dehaze

dehaze

delete

delete

delete_forever

delete_forever

delete_sweep

delete_sweep

description

description

desktop_mac

desktop_mac

desktop_windows

desktop_windows

details

details

developer_board

developer_board

developer_mode

developer_mode

device_hub

device_hub

devices

devices

devices_other

devices_other

dialer_sip

dialer_sip

dialpad

dialpad

directions

directions

directions_bike

directions_bike

directions_boat

directions_boat

directions_bus

directions_bus

directions_car

directions_car

directions_railway

directions_railway

directions_run

directions_run

directions_subway

directions_subway

directions_transit

directions_transit

directions_walk

directions_walk

disc_full

disc_full

dns

dns

do_not_disturb

do_not_disturb

do_not_disturb_alt

do_not_disturb_alt

do_not_disturb_off

do_not_disturb_off

do_not_disturb_on

do_not_disturb_on

dock

dock

domain

domain

done

done

done_all

done_all

donut_large

donut_large

donut_small

donut_small

drafts

drafts

drag_handle

drag_handle

drive_eta

drive_eta

dvr

dvr

edit

edit

edit_location

edit_location

eject

eject

email

email

enhanced_encryption

enhanced_encryption

equalizer

equalizer

error

error

error_outline

error_outline

euro_symbol

euro_symbol

ev_station

ev_station

event

event

event_available

event_available

event_busy

event_busy

event_note

event_note

event_seat

event_seat

exit_to_app

exit_to_app

expand_less

expand_less

expand_more

expand_more

explicit

explicit

explore

explore

exposure

exposure

exposure_neg_1

exposure_neg_1

exposure_neg_2

exposure_neg_2

exposure_plus_1

exposure_plus_1

exposure_plus_2

exposure_plus_2

exposure_zero

exposure_zero

extension

extension

face

face

fast_forward

fast_forward

fast_rewind

fast_rewind

favorite

favorite

favorite_border

favorite_border

featured_play_list

featured_play_list

featured_video

featured_video

feedback

feedback

fiber_dvr

fiber_dvr

fiber_manual_record

fiber_manual_record

fiber_new

fiber_new

fiber_pin

fiber_pin

fiber_smart_record

fiber_smart_record

file_download

file_download

file_upload

file_upload

filter

filter

filter_1

filter_1

filter_2

filter_2

filter_3

filter_3

filter_4

filter_4

filter_5

filter_5

filter_6

filter_6

filter_7

filter_7

filter_8

filter_8

filter_9

filter_9

filter_9_plus

filter_9_plus

filter_b_and_w

filter_b_and_w

filter_center_focus

filter_center_focus

filter_drama

filter_drama

filter_frames

filter_frames

filter_hdr

filter_hdr

filter_list

filter_list

filter_none

filter_none

filter_tilt_shift

filter_tilt_shift

filter_vintage

filter_vintage

find_in_page

find_in_page

find_replace

find_replace

fingerprint

fingerprint

first_page

first_page

fitness_center

fitness_center

flag

flag

flare

flare

flash_auto

flash_auto

flash_off

flash_off

flash_on

flash_on

flight

flight

flight_land

flight_land

flight_takeoff

flight_takeoff

flip

flip

flip_to_back

flip_to_back

flip_to_front

flip_to_front

folder

folder

folder_open

folder_open

folder_shared

folder_shared

folder_special

folder_special

font_download

font_download

format_align_center

format_align_center

format_align_justify

format_align_justify

format_align_left

format_align_left

format_align_right

format_align_right

format_bold

format_bold

format_clear

format_clear

format_color_fill

format_color_fill

format_color_reset

format_color_reset

format_color_text

format_color_text

format_indent_decrease

format_indent_decrease

format_indent_increase

format_indent_increase

format_italic

format_italic

format_line_spacing

format_line_spacing

format_list_bulleted

format_list_bulleted

format_list_numbered

format_list_numbered

format_paint

format_paint

format_quote

format_quote

format_shapes

format_shapes

format_size

format_size

format_strikethrough

format_strikethrough

format_textdirection_l_to_r

format_textdirection_l_to_r

format_textdirection_r_to_l

format_textdirection_r_to_l

format_underlined

format_underlined

forum

forum

forward

forward

forward_10

forward_10

forward_30

forward_30

forward_5

forward_5

free_breakfast

free_breakfast

fullscreen

fullscreen

fullscreen_exit

fullscreen_exit

functions

functions

g_translate

g_translate

gamepad

gamepad

games

games

gavel

gavel

gesture

gesture

get_app

get_app

gif

gif

Web Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS