Can I have both icon and text in the lightning button icon?
I need to display a button which will display a text along with an icon. I tried similar to below code
But its displaying button with only text inside it. Is there any way to add both text and icon inside the button?
You just need to specify the label as well as the lightning button icon-name in the button.
Answer (1)
In Salesforce Lightning, you can have both an icon and text in a button using the lightning-button component. This can be achieved by using the icon-name attribute to specify the icon and placing the text content within the button tags. Additionally, you may need to use CSS to align the icon and text properly.
Here’s an example of how to create a button with both an icon and text:
In this example:
- The variant="brand" attribute styles the button.
- The icon-name="utility:add" attribute specifies the icon to be used.
- The label="New Record" attribute provides the text that will appear on the button.
If you need more control over the positioning of the icon and the text, you can use the lightning-button-icon component along with custom styling. Here’s how you can do it:
In this example:
The lightning-button-icon component is used to display the icon.
The text "New Record" is placed in a span element next to the icon.
Custom CSS is used to align the icon and text horizontally and add some spacing between them.
This approach gives you more flexibility in styling and positioning the icon and text within the button.