Icon
This component provides a simple way to display icons from a set of SVG images, while allowing various customization options. WebJET Elements uses the Tabler icon set. For a list of all available icons, visit tabler-icons.io.
Basic Usage
Custom
Attributes and Properties
color
| Description | Icon color from the application color palette The default options are "primary", "secondary", "complete", "success", "warning", "danger", "light", and "dark". For more information, go to: theming. |
| Attribute | color |
| Type | "danger" "dark" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "light" ｜ "complete" ｜ "warning" ｜ string ｜ undefined |
| Default | undefined |
name (deprecated)
| Description | Specifies the name of the icon to display from the set of the included SVG icon collection. Deprecated |
| Attribute | name |
| Type | string ｜ undefined |
| Default | undefined |
name (deprecated)
| Description | Specifies the name of the icon to display from the set of the included SVG icon collection. Deprecated |
| Attribute | name |
| Type | string ｜ undefined |
| Default | undefined |
size
| Description | Set to "small" for a smaller icon, or to "large" for a larger icon. By default, the size is unset. |
| Attribute | size |
| Type | "large" ｜ "small" ｜ string & Record<never, never> ｜ undefined |
| Default | undefined |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
| Name | Description |
|---|---|
--wj-icon-height | Defines the height of the icon |
--wj-icon-size | Defines the size of the icon |
--wj-icon-width | Defines the width of the icon |
Slots
No slots available for this component.