Icon
Icons are a staple of modern web development. They offer users a symbolic image to help them recognize features and interperate the UI.
Below is a list of icons, each with a corresponding name tag. Select which Icon to display by passing the name to the symbol property of the TritonIcon.
Basic Usage
<triton-icon symbol="cog"></triton-icon>
<TritonIcon symbol="cog"/>
<html>
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<triton-icon symbol="cog"></triton-icon>
</body>
</html>
Icons
Here is a list of all the icons currently avalible in Triton.
undefined
analyse
chart-area
chart-bar
chart-donut
chart-gauge
chart-line
chart-pie
chart-radar
chart-scatter
charts
config
donut
gauge
run-analysis
table
vessel-statistics
baseline
bus-switch
equipment-diagram
single-line-diagram
threshold
Login
Logout
access
account-circle
add-picture
alarm
align-arrow-middle
align-bottom
align-horizontal
align-justify
align-left
align-right
align-text-center
align-text-left
align-text-right
align-top
align-vertical
allign-right
allign-vertical
angle-swap-horizontal
angle-swap-vertical
announcement
app-store
application-1
application
apps-list
area
arrow-align-middle
arrow-back
arrow-down
arrow-forward
arrow-head
arrow-left
arrow-right
arrow-up
arrow_drop_down
arrow_drop_up
attachment
average
battery-charging
bookmark
border-color
border-size
border-type
box
brightness
broadcast
calendar
cancel
caret-down
caret-left
caret-right
caret-up
chat-buble
check
chevron-down
chevron-left
chevron-right
chevron-up
chevron-wide-right
circle
clock
close
cloud-download-2
cloud-download
cloud-upload-2
cloud-upload
cloud
co2
cog
color-border
color-fill
color-text
compass
configuration
confirmation-number
container
copy
cut
dark
dashboard-editor
dashboard
day-dusk
day
db-cloud
db
device-hub
documents
dots-horizontal
dots-vertical
double-chevron-up
drag-item-1
drag-item
dusk
edit-redo
edit-undo
edit
emblem
expand
external-page
fast_forward
fast_rewind
feed
file
fill-color
filter-1
filter-2
fingerprint
flash
folder-outlined
folder
format-itallic
format-remove
format-underline
format_align_center
format_align_justify
format_align_left
format_align_right
format_bold
format_clear
format_indent_decrease
format_indent_increase
format_italic
format_list_bulleted
format_list_numbered
format_strikethrough
format_underlined
frame
fullscreen-exit
fullscreen
group
group1
hamburger
hard-drive
help-2
help
home
indented-list
info-2
info
insert_chart_outlined
insert_photo
label
layers
light
line
link-off
link
load-more
lock-locked
lock-open
lock
logo-facebook
logo-linkedin
logo-twitter
map
math-sum
minus
my-wells
night
notification-2
notification
nox
object-list
on-off-switch
palette
papers
paste
pause
pencil
pending-actions
person
phone
pin
place
play
plus
preview
privacy
pull-down
pull-left
pull-right
pull-up
record
rectangle
redo
reload
reset
return-1
returns
router
save
scale
screen
search
show-password
signal
slash
spinner
star-empty
star
step_back
step_forward
stop
sucess
sum
support
template-configuration
template
tenants
test-this
text-color
text
trash
undo
update-timer-2
update-timer
vertical-align-bottom
vertical-align-top
view-list
visibility-off
visibility-on
warning-critical
zoom_in
zoom_out
draft
drop
engine-1
engine-2
engine-3
fleet
fuel-tank
propeller-1
propeller-2
propeller-tunnel
shaft-with-cog
shaft
underwater-radar
vessel-front
vessel-tank
vessel-top-outline
vessel-top
logo-kongsberg-fill
logo-kongsberg
logo-pnext
logo-triton
Dynamic-Position
Fuelpump
LARS
Seismic
TowCon
acknowledge
alert-list
co-2
conn
dp
eco-co2
eco-nox
eco-sox
energy-efficiency
energy-recovery
fresh-water
fuel-pump
fuel
list
lng-gass
machinery
noxx
posrefs
power
propulsion-1
propulsion-2
safety
sox
system
tank
vessel-front-2
mixing
new-cargo
unload
voyage
voyages
cloud-and-moon
cloud-and-sun
currents-direction
currents
fog
force-1
force-10
force-11
force-12
force-2
force-3
force-4
force-5
force-6
force-7
force-8
force-9
moon
raining
snowflake
snowing
sun
sunset
temperature
thunder
waves-direction
waves
wind-direction
wind
loading
API
Properties
| Property | Description | Type | Default |
|---|---|---|---|
classes | The classes of the icon | string | - |
size | Set the size of the component | base body large medium small tiny xlarge xxlarge xxxlarge | defaultOptions.baseSize |
symbol | The string that determines the symbol | undefined analyse chart-area chart-bar chart-donut chart-gauge chart-line chart-pie chart-radar chart-scatter charts config donut gauge run-analysis table vessel-statistics baseline bus-switch equipment-diagram single-line-diagram threshold -nav-dots-vertical Login Logout access account-circle add-picture alarm align-arrow-middle align-bottom align-horizontal align-justify align-left align-right align-text-center align-text-left align-text-right align-top align-vertical allign-right allign-vertical angle-swap-horizontal angle-swap-vertical announcement app-store application-1 application apps-list area arrow-align-middle arrow-back arrow-down arrow-forward arrow-head arrow-left arrow-right arrow-up arrow_drop_down arrow_drop_up attachment average battery-charging bookmark border-color border-size border-type box brightness broadcast calendar cancel caret-down caret-left caret-right caret-up chat-buble check chevron-down chevron-left chevron-right chevron-up chevron-wide-right circle clock close cloud-download-2 cloud-download cloud-upload-2 cloud-upload cloud co2 cog color-border color-fill color-text compass configuration confirmation-number container copy cut dark dashboard-editor dashboard day-dusk day db-cloud db device-hub documents dots-horizontal dots-vertical double-chevron-up drag-item-1 drag-item dusk edit-redo edit-undo edit emblem expand external-page fast_forward fast_rewind feed file fill-color filter-1 filter-2 fingerprint flash folder-outlined folder format-itallic format-remove format-underline format_align_center format_align_justify format_align_left format_align_right format_bold format_clear format_indent_decrease format_indent_increase format_italic format_list_bulleted format_list_numbered format_strikethrough format_underlined frame fullscreen-exit fullscreen group group1 hamburger hard-drive help-2 help home indented-list info-2 info insert_chart_outlined insert_photo label layers light line link-off link load-more lock-locked lock-open lock logo-facebook logo-linkedin logo-twitter mail map math-sum minus my-wells nav-apps-list nav-dots-horizontal navigation-arrow night notification-2 notification nox object-list on-off-switch palette papers paste pause pencil pending-actions person phone pin place play plus preview print privacy pull-down pull-left pull-right pull-up record rectangle redo reload reset return-1 returns router save scale screen search share-1 share-2 show-password signal slash spinner star-empty star step_back step_forward stop sucess sum support template-configuration template tenants test-this text-color text trash undo update-timer-2 update-timer vertical-align-bottom vertical-align-top view-list visibility-off visibility-on warning-critical zoom_in zoom_out draft drop engine-1 engine-2 engine-3 fleet fuel-tank propeller-1 propeller-2 propeller-tunnel shaft-with-cog shaft underwater-radar vessel-front vessel-tank vessel-top-outline vessel-top logo-kongsberg-fill logo-kongsberg logo-pnext logo-triton Dynamic-Position Fuelpump LARS Seismic TowCon acknowledge alert-list co-2 conn dp eco-co2 eco-nox eco-sox energy-efficiency energy-recovery fresh-water fuel-pump fuel list lng-gass machinery navigation noxx posrefs power propulsion-1 propulsion-2 safety sox system tank vessel-front-2 mixing new-cargo unload voyage voyages cloud-and-moon cloud-and-sun currents-direction currents fog force-1 force-10 force-11 force-12 force-2 force-3 force-4 force-5 force-6 force-7 force-8 force-9 moon raining snowflake snowing sun sunset temperature thunder waves-direction waves wind-direction wind loading | 'circle' |