Live Demo
<ba-icon name="paper-plane"></ba-icon>Guidelines
Shapes and symbols can mean different things to different people. Commonly recognisable icons are rare and the same icon can have a different meaning depending on the app or website used. Adding text next to the icons can remove the ambiguity and clarify the meaning
Further Reading:
Accessibility
Before implementing a design ensure that it meets colour contrast requirements.
Active user interface components and meaningful non text graphics should be distinguishable by people with visual impairments. The minimum contrast for such components is 3:1.
In most scenarios it's preferable to have visible text next to the icon. Alternative text can be used as a last resort when there isn't space for visible text next to the icon.
Further reading:
In high contrast mode the icons colour reverts to a combination of current text and canvas colours
Code
Properties & Attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
alt |
alt |
Defines the visually hidden text and the svg title | string | undefined |
undefined |
name(required) |
name |
Name of the icon to be shown | string |
undefined |
size |
size |
Size of the icon | "16" | "24" | "32" | "48" | "64" | undefined |
'32' |
A page with all the icons can be found here Iconography.
Slots
| Slot | Description | Permitted elements |
|---|---|---|
| Unnamed slot | Elements will render in the body of the component | None |
Permitted ARIA roles
None
Parent components
ba-icon can be slotted into:
Usage
Basic usage
Most scenarios will only require the name and a size
<ba-icon name="add" size="24"></ba-icon>
Adding alternative text
If there isn't space to put the text next to the icon - the alt attribute can set some visually hidden text for assistive technology to read to the user
<button>
<ba-icon name="close" alt="Close modal"></ba-icon>
</button>