A lightning:icon is a visual element that provides context and enhances usability. Icons can be used inside the body of another component or on their own.
Use the variant, size, or class attributes to customize the styling. The variant attribute changes the appearance of an icon. Accepted variants are warning and error. If you want to make additional changes to the color or styling of an icon, use the class attribute.
Visit https://lightningdesignsystem.com/icons to view the available icons.
Here is an example.
<aura:component> <lightning:icon iconName="action:approval" size="large" alternativeText="Indicates approval"/> </aura:component>
Use the alternativeText attribute to describe the icon. The description should indicate what happens when you click the button, for example 'Upload File', not what the icon looks like, 'Paperclip'.
Sometimes an icon is decorative and does not need a description. But icons can switch between being decorative or informational based on the screen size. If you choose not to include an alternativeText description, check smaller screens and windows to ensure that the icon is decorative on all formats.
Attribute Name | Attribute Type | Description | Required? |
---|---|---|---|
alternativeText | String | The alternative text used to describe the icon. This text should describe what happens when you click the button, for example 'Upload File', not what the icon looks like, 'Paperclip'. | |
body | Component[] | The body of the component. In markup, this is everything in the body of the tag. | |
class | String | A CSS class for the outer element, in addition to the component's base classes. | |
iconName | String | The Lightning Design System name of the icon. Names are written in the format '\utility:down\' where 'utility' is the category, and 'down' is the specific icon to be displayed. | Yes |
size | String | The size of the icon. Options include xx-small, x-small, small, medium, or large. This value defaults to medium. | |
variant | String | The variant changes the appearance of an icon. Accepted variants include warning and error. |