Angular Material Icons v0.6.0
AngularJS directive to use Material Design icons with custom fill-color and size.
- For production, use minified version directly from CDN:
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.6.0/angular-material-icons.min.js"></script>
For other purposes, project files are available via bower / npm or can be cloned directly from github.
{{command}}
- Inject
ngMdIcons
to your angularjs application:
angular.module('demoapp', ['ngMdIcons']);
- Use
ng-md-icon
directive in your html, specifying fill-color through css:
<ng-md-icon icon="..." style="fill: ..." size="..."></ng-md-icon>
icon="send"
icon="send"
style="fill: pink"
icon="{{icon}}"
style="fill: {{fill}}"
icon="send"
style="fill: #abcdef"
size="20"
-- no size --
(default is 24)
size="{{size}}"
size="64"
- This directive is tested on Chrome, Firefox, Safari and Edge.
For IE, use ng-attr-style
instead of style
. Also refer AngularJS documentation on IE Compatibility.
- Optional: Include SVG-Morpheus in your project and changes to
icon
attribute that you do through your controller will go through delightful morphing as seen above.
Refer code for this page (index.html and demo.js) for details.
<script src="//cdnjs.cloudflare.com/ajax/libs/SVG-Morpheus/0.1.8/svg-morpheus.js"></script>
When SVG-Morpheus is included, you can use options
attribute to control morphing options.
options=
'{"duration": 375}'
(default is 750)
options=
'{"rotation": "none"}'
(default is clock)
options=
'{"rotation": "counterclock"}'
Example:
Morph on ng-click
Note that options
attribute is a JSON parse-able string so surround keys with double-quotes.
- Advanced: Refer demo.js to register custom icons for your project or to access default icon shapes from a controller or another service.
standby
custom-delete
marker
live_circle
Full list of icons:
amazon
apple
facebook-box
facebook-messenger
facebook
github-box
github-circle
google-plus-box
google-plus
hangouts
linkedin-box
linkedin
login
logout
office
twitter
whatsapp
windows
action
3d_rotation
accessibility
account_balance
account_balance_wallet
account_box
account_child
account_circle
add_shopping_cart
alarm
alarm_add
alarm_off
alarm_on
android
announcement
aspect_ratio
assessment
assignment
assignment_ind
assignment_late
assignment_return
assignment_returned
assignment_turned_in
autorenew
backup
book
bookmark
bookmark_outline
bug_report
cached
check_circle
class
credit_card
dashboard
delete
description
dns
done
done_all
event
exit_to_app
explore
extension
face
favorite
favorite_outline
find_in_page
find_replace
flip_to_back
flip_to_front
get_app
grade
group_work
help
highlight_remove
history
home
https
info
info_outline
input
invert_colors
label
label_outline
language
launch
list
lock
lock_open
lock_outline
loyalty
markunread_mailbox
note_add
open_in_browser
open_in_new
open_with
pageview
payment
perm_camera_mic
perm_contact_cal
perm_data_setting
perm_device_info
perm_identity
perm_media
perm_phone_msg
perm_scan_wifi
picture_in_picture
polymer
print
query_builder
question_answer
receipt
redeem
reorder
report_problem
restore
room
schedule
search
settings
settings_applications
settings_backup_restore
settings_bluetooth
settings_cell
settings_display
settings_ethernet
settings_input_antenna
settings_input_component
settings_input_composite
settings_input_hdmi
settings_input_svideo
settings_overscan
settings_phone
settings_power
settings_remote
settings_voice
shop
shop_two
shopping_basket
shopping_cart
speaker_notes
spellcheck
star_rate
stars
store
subject
supervisor_account
swap_horiz
swap_vert
swap_vert_circle
system_update_tv
tab
tab_unselected
theaters
thumb_down
thumb_up
thumbs_up_down
toc
today
track_changes
translate
trending_down
trending_neutral
trending_up
turned_in
turned_in_not
verified_user
view_agenda
view_array
view_carousel
view_column
view_day
view_headline
view_list
view_module
view_quilt
view_stream
view_week
visibility
visibility_off
wallet_giftcard
wallet_membership
wallet_travel
work
alert
error
warning
AV
album
av_timer
closed_caption
equalizer
explicit
fast_forward
fast_rewind
games
hearing
high_quality
loop
mic
mic_none
mic_off
movie
my_library_add
my_library_books
my_library_music
new_releases
not_interested
pause
pause_circle_fill
pause_circle_outline
play_arrow
play_circle_fill
play_circle_outline
play_shopping_bag
playlist_add
queue
queue_music
radio
recent_actors
repeat
repeat_one
replay
shuffle
skip_next
skip_previous
snooze
stop
subtitles
surround_sound
video_collection
videocam
videocam_off
volume_down
volume_mute
volume_off
volume_up
web
communication
business
call
call_end
call_made
call_merge
call_missed
call_received
call_split
chat
clear_all
comment
contacts
dialer_sip
dialpad
dnd_on
email
forum
import_export
invert_colors_off
invert_colors_on
live_help
location_off
location_on
message
messenger
no_sim
phone
portable_wifi_off
quick_contacts_dialer
quick_contacts_mail
ring_volume
stay_current_landscape
stay_current_portrait
stay_primary_landscape
stay_primary_portrait
swap_calls
textsms
voicemail
vpn_key
content
add
add_box
add_circle
add_circle_outline
archive
backspace
block
clear
content_copy
content_cut
content_paste
create
drafts
filter_list
flag
forward
gesture
inbox
link
mail
markunread
redo
remove
remove_circle
remove_circle_outline
reply
reply_all
report
save
select_all
send
sort
text_format
undo
device
access_alarm
access_alarms
access_time
add_alarm
airplanemode_off
airplanemode_on
battery_20
battery_30
battery_50
battery_60
battery_80
battery_90
battery_alert
battery_charging_20
battery_charging_30
battery_charging_50
battery_charging_60
battery_charging_80
battery_charging_90
battery_charging_full
battery_full
battery_std
battery_unknown
bluetooth
bluetooth_connected
bluetooth_disabled
bluetooth_searching
brightness_auto
brightness_high
brightness_low
brightness_medium
data_usage
developer_mode
devices
dvr
gps_fixed
gps_not_fixed
gps_off
location_disabled
location_searching
multitrack_audio
network_cell
network_wifi
nfc
now_wallpaper
now_widgets
screen_lock_landscape
screen_lock_portrait
screen_lock_rotation
screen_rotation
sd_storage
settings_system_daydream
signal_cellular_0_bar
signal_cellular_1_bar
signal_cellular_2_bar
signal_cellular_3_bar
signal_cellular_4_bar
signal_cellular_connected_no_internet_0_bar
signal_cellular_connected_no_internet_1_bar
signal_cellular_connected_no_internet_2_bar
signal_cellular_connected_no_internet_3_bar
signal_cellular_connected_no_internet_4_bar
signal_cellular_no_sim
signal_cellular_null
signal_cellular_off
signal_wifi_0_bar
signal_wifi_1_bar
signal_wifi_2_bar
signal_wifi_3_bar
signal_wifi_4_bar
signal_wifi_off
storage
usb
wifi_lock
wifi_tethering
editor
attach_file
attach_money
border_all
border_bottom
border_clear
border_color
border_horizontal
border_inner
border_left
border_outer
border_right
border_style
border_top
border_vertical
format_align_center
format_align_justify
format_align_left
format_align_right
format_bold
format_clear
format_color_fill
format_color_reset
format_color_text
format_indent_decrease
format_indent_increase
format_italic
format_line_spacing
format_list_bulleted
format_list_numbered
format_paint
format_quote
format_size
format_strikethrough
format_textdirection_l_to_r
format_textdirection_r_to_l
format_underline
functions
insert_chart
insert_comment
insert_drive_file
insert_emoticon
insert_invitation
insert_link
insert_photo
merge_type
mode_comment
mode_edit
publish
vertical_align_bottom
vertical_align_center
vertical_align_top
wrap_text
file
attachment
cloud
cloud_circle
cloud_done
cloud_download
cloud_off
cloud_queue
cloud_upload
file_download
file_upload
folder
folder_open
folder_shared
hardware
cast
cast_connected
computer
desktop_mac
desktop_windows
dock
gamepad
headset
headset_mic
keyboard
keyboard_alt
keyboard_arrow_down
keyboard_arrow_left
keyboard_arrow_right
keyboard_arrow_up
keyboard_backspace
keyboard_capslock
keyboard_control
keyboard_hide
keyboard_return
keyboard_tab
keyboard_voice
laptop
laptop_chromebook
laptop_mac
laptop_windows
memory
mouse
phone_android
phone_iphone
phonelink
phonelink_off
security
sim_card
smartphone
speaker
tablet
tablet_android
tablet_mac
tv
watch
image
add_to_photos
adjust
assistant_photo
audiotrack
blur_circular
blur_linear
blur_off
blur_on
brightness_1
brightness_2
brightness_3
brightness_4
brightness_5
brightness_6
brightness_7
brush
camera
camera_alt
camera_front
camera_rear
camera_roll
center_focus_strong
center_focus_weak
collections
color_lens
colorize
compare
control_point
control_point_duplicate
crop_16_9
crop
crop_3_2
crop_5_4
crop_7_5
crop_din
crop_free
crop_landscape
crop_original
crop_portrait
crop_square
dehaze
details
edit
exposure
exposure_minus_1
exposure_minus_2
exposure_plus_1
exposure_plus_2
exposure_zero
filter_1
filter
filter_2
filter_3
filter_4
filter_5
filter_6
filter_7
filter_8
filter_9
filter_9_plus
filter_b_and_w
filter_center_focus
filter_drama
filter_frames
filter_hdr
filter_none
filter_tilt_shift
filter_vintage
flare
flash_auto
flash_off
flash_on
flip
gradient
grain
grid_off
grid_on
hdr_off
hdr_on
hdr_strong
hdr_weak
healing
image
image_aspect_ratio
iso
landscape
leak_add
leak_remove
lens
looks
looks_3
looks_4
looks_5
looks_6
looks_one
looks_two
loupe
movie_creation
nature
nature_people
navigate_before
navigate_next
palette
panorama
panorama_fisheye
panorama_horizontal
panorama_vertical
panorama_wide_angle
photo
photo_album
photo_camera
photo_library
portrait
remove_red_eye
rotate_left
rotate_right
slideshow
straighten
style
switch_camera
switch_video
tag_faces
texture
timelapse
timer_10
timer
timer_3
timer_auto
timer_off
tonality
transform
tune
wb_auto
wb_cloudy
wb_incandescent
wb_irradescent
wb_sunny
maps
beenhere
directions
directions_bike
directions_bus
directions_car
directions_ferry
directions_subway
directions_train
directions_transit
directions_walk
flight
hotel
layers
layers_clear
local_airport
local_atm
local_attraction
local_bar
local_cafe
local_car_wash
local_convenience_store
local_drink
local_florist
local_gas_station
local_grocery_store
local_hospital
local_hotel
local_laundry_service
local_library
local_mall
local_movies
local_offer
local_parking
local_pharmacy
local_phone
local_pizza
local_play
local_post_office
local_print_shop
local_restaurant
local_see
local_shipping
local_taxi
location_history
map
my_location
navigation
pin_drop
place
rate_review
restaurant_menu
satellite
store_mall_directory
terrain
traffic
navigation
apps
arrow_back
arrow_drop_down
arrow_drop_down_circle
arrow_drop_up
arrow_forward
cancel
check
chevron_left
chevron_right
close
expand_less
expand_more
fullscreen
fullscreen_exit
menu
more_horiz
more_vert
refresh
unfold_less
unfold_more
notification
adb
bluetooth_audio
disc_full
dnd_forwardslash
do_not_disturb
drive_eta
event_available
event_busy
event_note
folder_special
mms
more
network_locked
phone_bluetooth_speaker
phone_forwarded
phone_in_talk
phone_locked
phone_missed
phone_paused
play_download
play_install
sd_card
sim_card_alert
sms
sms_failed
sync
sync_disabled
sync_problem
system_update
tap_and_play
time_to_leave
vibration
voice_chat
vpn_lock
social
cake
domain
group
group_add
location_city
mood
notifications
notifications_none
notifications_off
notifications_on
notifications_paused
pages
party_mode
people
people_outline
person
person_add
person_outline
plus_one
poll
public
school
share
whatshot
toggle
check_box
check_box_outline_blank
radio_button_off
radio_button_on
star
star_half
star_outline