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, see tabler-icons.io.
Basic usage
This example shows icon usage in its simplest form, as a standalone visual element with a default icon name.
Style Outline / Filled
This example demonstrates how the lines option changes visual separation inside the wje-icon component.
Custom
This example focuses on using a custom icon outside the default set, which is useful for brand or project-specific iconography.
When to use
Use wje-icon to improve readability, scannability, and contextual understanding of content.
When not to use
Do not replace structured interactive data with media-only presentation when precision is needed.
Accessibility
Provide alt text, maintain readable contrast, and include text equivalents for icon-only controls.
Best Practices
- Compress media and use lazy loading in larger collections.
- Keep information priority consistent across cards/lists.
- Avoid duplicating the same meaning in icon and text without added value.
Attributes and Properties
filled
| Description | Controls how filled behaves in the component. |
| Attribute | filled |
| Type | any |
| Default | - |
label
| Description | Sets the user-visible or accessible label text. |
| Attribute | label |
| Type | any |
| Default | - |
name
| Description | Sets the field name used when submitting form data. |
| Attribute | name |
| Type | any |
| Default | - |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
svg | The SVG part of the icon. |
CSS Custom Properties
| Name | Description |
|---|---|
--wje-icon-size | The size of the icon element. |
--wje-icon-width | The width of the icon element. |
--wje-icon-height | The height of the icon element. |
Slots
No slots available for this component.