0

I'm using the lightning-button-icon inside the SLDS button.(Reason : to Change the button color).

enter image description here

button icon is in grey color variant="container" how to change the forward button color to white.

<button class="slds-button slds-button_neutral" style=" border: none;background-color: #04844B;color: white;">Next
<lightning-button-icon icon-name="utility:forward"  variant="container" alternative-text="Settings" title="Settings"></lightning-button-icon>
</button>
Improve this question
2
  • Try inverse variant
    – Eric
    Commented Jun 3, 2020 at 7:04
  • inverse variant adding border in Icon
    – SFDC_Beginner
    Commented Jun 3, 2020 at 7:11

1 Answer 1

Reset to default
2

You can also use the other simple way by embedding icon in the lightning-button

<lightning-button variant="success" label="Next" title="Next" icon-name="utility:forward" icon-position="right" class="slds-m-left_x-small"></lightning-button>

More information : https://developer.salesforce.com/docs/component-library/bundle/lightning-button/example

                                 OR

In your case : Use variant="bare-inverse" in lightning-button-icon

<button class="slds-button slds-button_neutral" style=" border: none;background-color: #04844B;color: white;">Next
<lightning-button-icon icon-name="utility:forward"  variant="bare-inverse" alternative-text="Settings" title="Settings"></lightning-button-icon>
</button>
Improve this answer
3
  • I want to have some custom color in this button
    – SFDC_Beginner
    Commented Jun 3, 2020 at 7:10
  • Please see the updated answer then
    – Avi Rai
    Commented Jun 3, 2020 at 7:16
  • Thanks, It's working as expect. :)
    – SFDC_Beginner
    Commented Jun 3, 2020 at 7:21

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .