图标

产品图标在未完成图标规则及重绘之前,优先使用 material design icon,不足图标使用fontawesome

尺寸

常用尺寸 预览 Code
18px face
<i class="material-icons md-18">face</i>
24px face
<i class="material-icons md-24">face</i>
36px face
<i class="material-icons md-36">face</i>
48px face
<i class="material-icons md-48">face</i>

css

                    /* Rules for sizing the icon. */
                    .material-icons.md-18 { font-size: 18px; }
                    .material-icons.md-24 { font-size: 24px; }
                    .material-icons.md-36 { font-size: 36px; }
                    .material-icons.md-48 { font-size: 48px; }
            

主题

主题 预览 Code
dark face
<i class="material-icons md-dark">face</i>
light face
<i class="material-icons md-light">face</i>
light inactive face
<i class="material-icons md-light md-inactive">face</i>
dark inactive face
<i class="material-icons md-dark md-inactive">face</i>
品牌色 face
<i class="material-icons brand06f">face</i>

css

                    /* Rules for using icons as black on a light background. */
                    .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
                    .material-icons.md-black { color: rgba(0, 0, 0, 1); }
                    .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
                    
                    /* Rules for using icons as white on a dark background. */
                    .material-icons.md-light { color: rgba(255, 255, 255, 1); }
                    .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
                    
                    .material-icons.brand06f { color: #06f; }
            

CHEATSHEET

outline


状态 8

error_outline
error_outline
notifications_none
notifications_none
cached
cached
announcement
announcement
info
info
refresh
refresh
done
done
check_circle
check_circle

通讯&沟通 9

fa-webcam
headset
headset
keyboard_voice
keyboard_voice
call
call
fa-webcam-slash
mic_off
mic_off
grade
grade
textsms
textsms
phone_iphone
phone_iphone

控制 13

exit_to_app
exit_to_app
filter_list
filter_list
home
home
menu
menu
zoom_out_map
zoom_out_map
add_box
add_box
indeterminate_check_box
indeterminate_check_box
search
search
expand_less
expand_less
expand_more
expand_more
clear
clear
navigate_next
navigate_next
navigate_before
navigate_before

动作 16

crop
crop
smile-plus
audiotrack
audiotrack
cloud_download
cloud_download
print
print
share
share
photo_camera
photo_camera
launch
launch
wifi
wifi (rotate 90)
vpn_key
vpn_key
favorite_border
favorite_border
fa-eraser
highlight_off
highlight_off
edit
edit
settings
settings
add
add

媒体 8

featured_video
featured_video
play_circle_outline
play_circle_outline
volume_up
volume_up
volume_down
volume_down
volume_mute
volume_mute
pause
pause
skip_previous
skip_previous
skip_next
skip_next

用户 13

account_circle
account_circle
clipboard-list-check
history
history
map-marker-alt
notifications_none
notifications_none
insert_drive_file
insert_drive_file
book
book
insert_invitation
insert_invitation
description
description
keyboard_return
keyboard_return
forum
forum
live_help
live_help
help_outline
help_outline

solid


状态-solid

error
error
notifications
notifications
cached
cached
announcement
announcement
info
info
refresh
refresh
done
done
check_circle
check_circle

通讯&沟通-solid

fa-webcam
headset
headset
keyboard_voice
keyboard_voice
call
call
fa-webcam-slash
mic_off
mic_off
grade
grade
textsms
textsms
phone_iphone
phone_iphone

控制-solid

exit_to_app
exit_to_app
filter_list
filter_list
home
home
menu
menu
zoom_out_map
zoom_out_map
add_box
add_box
indeterminate_check_box
indeterminate_check_box
search
search
expand_less
expand_less
expand_more
expand_more
clear
clear
navigate_next
navigate_next
navigate_before
navigate_before

动作-solid

crop
crop
smile-plus
audiotrack
audiotrack
cloud_download
cloud_download
print
print
share
share
photo_camera
photo_camera
launch
launch
wifi
wifi (rotate 90)
vpn_key
vpn_key
favorite
favorite
fa-eraser
add_circle
highlight_off
edit
edit
settings
settings
add
add

媒体-solid

featured_video
featured_video
play_circle_filled
play_circle_filled
volume_up
volume_up
volume_down
volume_down
volume_mute
volume_mute
pause
pause
skip_previous
skip_previous
skip_next
skip_next

用户-solid

account_circle
account_circle
clipboard-list-check
history
history
place
place
notifications
notifications
insert_drive_file
insert_drive_file
book
book
insert_invitation
insert_invitation
description
description
keyboard_return
keyboard_return
forum
forum
live_help
live_help
help
help