Appearance

Icon ​

The Icon component allows you to use any icon of our collection.

INFO

The Icon component can receive a staticPath prop with a different path for your icons and it's not limited to the staticPath option that is configured in the library installation anymore.

Basic usage ​

By default, the Icon component will render the mj-leaf icon if no name prop is provided.

vue
<Icon />

Size ​

The Icon component supports the following sizes:

Small ​

vue
<Icon name="calendar" size="small" />

Dense ​

vue
<Icon name="calendar" size="dense" />

Standard ​

vue
<Icon name="calendar" size="standard" />

Large ​

vue
<Icon name="calendar" size="large" />

Collection ​

action-dots
activity
alert-bell
archive
arrow-down
arrow-left
arrow-right
arrow-up
badge-discount
badge-seller-elite
badge-seller-power
badge-seller-verified
book-customer
building-office
bulk-add
calendar-reschedule
calendar
caret-down
caret-up
change-log
check
chevron-down
chevron-left
chevron-right
chevron-up
circle-check
circle-close
circle-dollar
circle-empty
circle-info
circle-partial
circle-percent
circle-question-mark
circle-status
circle-warning
clipboard-checkmark
clipboard-inventory
close
combine
compass
contact
contract
copy
credit-card
credit-profile
dashboard
document-accept
document-invoice
document-recieved
document-sent
document-view
document
dolly
download
edit
ellipsis
envelope-open
envelope
equals
export
figma
file-csv
file
filter-funnel
filter-line
flag
folder
folder-bar-graph
folder-orders
font-bold
font-clear-format
font-italic
font-underline
gear
github
globe
graph-bar-chart
graph-line-chart
graph-pie-chart
hazard
hazard-outline
headset-agent
headset-mic
heart-filled
heart-outline
help-question-mark
hide
history
image
import
keyboard-return
license-approved
license-certificate
lightbulb
link-add
link-unlink
link
list-bulleted
list-items
list-numbered
loading-big
loading-empty
loading-small
location
lock-unlock
lock
logo-facebook
logo-instagram
logo-linkedin
logo-ll
logo-metrc
logo-plaid
logo-x
logo-youtube
logout
medical
megaphone-sound
megaphone
menu
message-dispute
message-reply
message
minus
mj-leaf
money
note-add
note
open-in-new
paperclip
paper-plane
performance
phone
plus
preview
print
product-menu-manage
product-menu-search
product-menu
queue-add
queue
recent
refresh
register
reply
report-download
sample
save
scale-law
scale-weight
search
seed-cycle
share
shop-bag-browse
shop-bag-reorder
shop-bag
shop-basket
shop-cart-add
shop-cart
show
sign-dollar
sign-percent
sort
split
star-filled
star-outline
storefront
submit
swap-horizontal
swap-vertical
tag-star
tag
test-results
ticket-star
ticket
tool-dropper
tool-wrench
transfer
trashcan
truck
upload
user-add
user-admin
user-check
user
view-card
view-detailed
view-list
warehouse
working

Static Path ​

By default, the Icon component will use the staticPath option inject by the library to find the spreadsheet.

You can change the base path of this icons passing the staticPath prop to the component itself. This will override the path used by it.

TIP

If nor the icon or the library staticPath is defined, it'll default to /static base path.

vue
<Icon name="star" static-path="/icons" />

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.