You are here:
Icon Lightning Web Component ReadMe (Managed Package)
For the managed package runtime, this page contains an Icon LWC ReadMe for each Vlocity release.
This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.
Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20
The Icon Lightning Web Component renders an SVG icon.
Available c-icon Attributes
Attribute |
Value |
Type |
Required |
Description |
|---|---|---|---|---|
alternative-text |
string |
Adds alternative text for the icon. For best practice, if icon is part of a button or is clickable, text should describe what action is taken, such as 'Upload File', and not what the icon is, such as "Paperclip". |
||
baseurl |
URL |
string |
Overrides the defined url for the SVG resource. |
|
bg-color |
Accepts name, rgb and hex values |
string |
Adds a background color to the icon. |
|
color |
Accepts name, rgb and hex values |
string |
Sets the color of the icon. |
|
extraclass |
string |
Adds a class to the parent of the input element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'. |
||
icon-name |
(For example, utility:info) |
string |
yes |
Sets which icon to use. |
iconposition |
left, right (Default: left) |
string |
Sets the position of the icon. |
|
imgsrc |
string |
Sets the icon image from the image URL. |
||
size |
xx-small, x-small, small, medium, large (Default: small) |
string |
Sets the size of the icon. |
|
theme |
slds, nds (Default: slds) |
string |
Sets the theme for the icon. |
|
variant |
inverse, warning, error , success, light, default (Default: default) |
string |
Changes the appearance of action,custom, standard and utility icons. The inverse variant adds a white fill on a dark background. |
Example c-icon Component
<c-icon
theme="slds"
icon-name="utility:add"
size="small"
extraclass="slds-icon-text-default"
></c-icon>Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20
The Icon Lightning Web Component renders an SVG icon.
Available c-icon Attributes
Attribute |
Value |
Type |
Required |
Description |
|---|---|---|---|---|
alternative-text |
string |
Adds alternative text for the icon. For best practice, if icon is part of a button or is clickable, text should describe what action is taken, such as 'Upload File', and not what the icon is, such as "Paperclip". |
||
baseurl |
URL |
string |
Overrides the defined url for the SVG resource. |
|
bg-color |
Accepts name, rgb and hex values |
string |
Adds a background color to the icon. |
|
color |
Accepts name, rgb and hex values |
string |
Sets the color of the icon. |
|
extraclass |
string |
Adds a class to the parent of the input element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'. |
||
icon-name |
(For example, utility:info) |
string |
yes |
Sets which icon to use. |
iconposition |
left, right (Default: left) |
string |
Sets the position of the icon. |
|
size |
xx-small, x-small, small, medium, large (Default: small) |
string |
Sets the size of the icon. |
|
theme |
slds, nds (Default: slds) |
string |
Sets the theme for the icon. |
|
variant |
inverse, warning, error , success, light, default (Default: default) |
string |
Changes the appearance of action,custom, standard and utility icons. The inverse variant adds a white fill on a dark background. |
Example c-icon Component
<c-icon
theme="slds"
icon-name="utility:add"
size="small"
extraclass="slds-icon-text-default"
></c-icon>Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19
The Icon Lightning Web Component renders an SVG icon.
Available c-icon Attributes
Attribute |
Value |
Type |
Required |
Description |
|---|---|---|---|---|
icon-name |
(For example, utility:info) |
string |
yes |
Sets which icon to use. |
theme |
slds, nds (Default: slds) |
string |
Sets the theme for the icon. |
|
baseurl |
URL |
string |
Overrides the defined url for the SVG resource. |
|
extraclass |
string |
Adds a class to the parent of the input element. To add multiple classes, use a space to separate each class, such as `classone classtwo'. |
||
size |
xx-small, x-small, small, medium, large (Default: small) |
string |
Sets the size of the icon. |
|
color |
Accepts name, rgb and hex values |
string |
Sets the color of the icon. |
|
bg-color |
Accepts name, rgb and hex values |
string |
Adds a background color to the icon. |
|
iconposition |
left, right (Default: left) |
string |
Sets the position of the icon. |
|
variant |
inverse, warning, error , success, light, default (Default: default) |
string |
Changes the appearance of action,custom, standard and utility icons. The inverse variant adds a white fill on a dark background. |
|
alternative-text |
string |
Adds alternative text for the icon. For best practice, if icon is part of a button or is clickable, text should describe what action is taken, such as `Upload File', and not what the icon is, such as ``Paperclip''. |
