Icon

An example icon:

contact

Act! Icons use ligatures or the icon attribute for determining the icon to render.

Icon customization through CSS variables:

  • --act-icon-font: 'Act! Icons';
  • --act-icon-size: 16px;

Available icons by ligature

add add
alert alert
analytics analytics
arrow-down arrow-down
arrow-up arrow-upd
collapse collapse
expand expand
calendar calendar
call call
camera camera
carrot-down carrot-down
carrot-left carrot-left
carrot-right carrot-right
carrot-up carrot-up
contact contact
contact-add contact-add
contact-update contact-update
edit edit
elipse elipse
elipse-v elipse-v
grip grip
email email
filter filter
hide hide
list list
repeat repeat
save save
search search
settings settings
sort sort
tag tag
tasks tasks
time time
close close
dashboard dashboard
delete delete
attachment attachment
companies companies
connect connect
duplicate duplicate
computer computer
excel excel
globe globe
groups groups
help help
histoy history
insight insight
map map
marketing-automation marketing-automation
note note
opportunities opportunities
pipeline pipeline
print print
private private
welcome, smiley, :) :) welcome smiley
write-letter write-letter
quote quote
graph graph
columns columns
info info
product-add product-add
run-report run-report
link link
carrot-left-first carrot-left-first
carrot-right-last carrot-right-last
arrow-left arrow-left
arrow-right arrow-right
app-store, shopping-cart app-store shopping-cart
add-email add-email
report report
subreport subreport
home home
today today
menu menu
star star
star-filled star-filled
error error
connecting connecting
offline offline
online online
syncing syncing
syncing-failed syncing-failed
synced synced
pause-syncing pause-syncing
pie pie
thumbs-up thumbs-up
assets assets
campaigns campaigns
landing-page landing-page
isp isp
mute mute
admin admin
log-out log-out
quick-add quick-add
subgroups subgroups
plugins plugins

Using Other Icons

In the following example, we will demonstrate the usage of the Material Icon library within the <awc-icon> component.

First add the following CDN reference to your HTML page:

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

Then, when using the Act! Icon Web Component add the following CSS:

awc-icon.material {
  --awc-icon-font: 'Material Icons';
}

Now, anytime you use the material class with an awc-icon you will be utilizing the Material Icon Library.

For example,

<awc-icon class="material">home</awc-icon>

Will show the home icon from the Material Icon Library.