1

Trying to change the icon color to red, Icon color is not changing. when i use fill It just filling the color in middle as below.

enter image description here

<button class="slds-button slds-button_icon" title="Add New" onclick={handleAddNewObject} style=fill:red>                                                                           
<span class="slds-icon_container slds-icon_container_circle slds-icon-action-new">
<svg class="slds-icon lds-button__icon  slds-icon_x-small"
aria-hidden="true">
<use style=fill:red xlink:href="/apexpages/slds/latest/assets/icons/action-sprite/svg/symbols.svg#new"></use>
</svg>
</span>
</button>

Note: The Color will be dynamic for each user, It has been configured in custom Object.s

Is there any way we can change the action icon color?

1
  • 1
    The fill you'rve implemented is the fill of the svg. In this case, the svg is the plus symbol, so it's working exactly as you've implemented it. Have you tried adding some css to the span that includes the slds-icon_container_circle? That sounds like a better place to change the colour.
    – Nick C
    Mar 8, 2021 at 23:33

1 Answer 1

1

As Nick cook said, You are filling the color in svg.

Remove the style=fill:red from svg and add background: red in span as below

<button class="slds-button slds-button_icon" title="Add New" onclick={handleAddNewObject}>                                                                           
<span class="slds-icon_container slds-icon_container_circle slds-icon-action-new" style=background: red>
<svg class="slds-icon lds-button__icon  slds-icon_x-small"
aria-hidden="true">
<use xlink:href="/apexpages/slds/latest/assets/icons/action-sprite/svg/symbols.svg#new"></use>
</svg>
</span>
</button>

You must log in to answer this question.

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