# new Icon(config)
Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the 3 following methods:
Create the Web Component and call its init method:
const myIconField = document.createElement("a-icon").init(config)
Or use the shorthand for it:
const myIconField = createIconField({
value: "fas fa-check",
height: "32px"
})
myIconField.render()
myIconField.getValue() // fas fa-check
myIconField.setValue("fas fa-circle")
myIconField.getValue() // fas fa-circle
Or directly declare the config inside a container component:
const myPanel = createPanel({
title: "My panel",
items: [
{
type: "icon",
value: "fas fa-check",
width: "32px"
height: "32px",
hideCode: true
}
]
})
myPanel.render()
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
config |
object
|
||
value |
string
|
<optional> |
Initial icon value |
label |
string
|
<optional> |
Field label |
labelWidth |
string
|
<optional> |
A number (in pixels) or any valid CSS value |
labelPosition |
string
|
<optional> |
"left" (default) | "right" | "top" | "bottom" |
labelFontSize |
string
|
<optional> |
Any valid CSS value |
labelFontWeight |
string
|
<optional> |
Any valid CSS value |
labelColor |
string
|
<optional> |
Any valid CSS value |
icons |
Array.<string>
|
<optional> |
Optional array of icon classes to use. Ex: ["fas fa-check", "fas fa-user"] |
iconColor |
string
|
<optional> |
Icon color. Ex: "#ffffff" |
iconBackground |
string
|
Icon background. Ex: "#00aaee" |
|
iconSize |
string
|
<optional> |
Icon size. Ex: "16px" |
iconAlign |
string
|
<optional> |
Ex: "center" |
iconPadding |
string
|
<optional> |
Ex: "3px" |
hideCode |
boolean
|
<optional> |
Set to true to hide the Font Awesome code |
display |
string
|
<optional> |
|
width |
number
|
string
|
<optional> |
A number (in pixels) or any valid CSS value |
minWidth |
string
|
<optional> |
A number (in pixels) or any valid CSS value |
height |
number
|
string
|
<optional> |
A number (in pixels) or any valid CSS value |
padding |
number
|
string
|
<optional> |
A number (in pixels) or any valid CSS value |
margin |
number
|
string
|
<optional> |
A number (in pixels) or any valid CSS value |
border |
string
|
<optional> |
|
borderStyle |
string
|
<optional> |
|
borderWidth |
number
|
string
|
<optional> |
A number (in pixels) or any valid CSS value |
borderColor |
string
|
<optional> |
|
borderRadius |
string
|
<optional> |
|
boxShadow |
string
|
<optional> |
|
readOnly |
boolean
|
<optional> |
|
record |
object
|
<optional> |
The record to bind the field to. This will automatically update the record when the field value changes, and the field will listen to database changes on the record. |
this
Generated markup
<a-icon class="a-icon">
<label class="field-label"></label>
<div class="field-icon-container">
<div class="field-icon-palette"></div>
<div class="field-icon-input"></div>
</div>
</a-icon
Methods
# setFieldWidth(width)
Set the icon selector field width
Parameters:
| Name | Type | Description |
|---|---|---|
width |
*
|
this
# setLabelPosition(position)
Set label position
Parameters:
| Name | Type | Description |
|---|---|---|
position |
string
|
"left" (default) | "right" | "top" | "bottom" |
this
# setValue(icon, rawUpdateopt)
Set the fieldl value
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
icon |
string
|
Font Awesome icon code like "fas fa-check" |
|
rawUpdate |
boolean
|
<optional> |
If true, it doesn't update the associated record and doesn't trigger "change" event |
this