Button Icon Color

[diggeddy]

Description

Add Icon color options for Buttons

[SchneiderSam]

Yes please. This would be a great thing, especially for the Accordion Block/ Tab Block.

[franciscogaray]

+1 https://generate.support/topic/button-icon/#post-28261

How do you change the icon color on a button that is different from the text button color?
https://postimg.cc/DJcH6fpb

[franciscogaray]

+1 https://generate.support/topic/button-icon/#post-28585

Hi Francisco – Please upvote this feature from me too. Anytime you can move CSS like this to the editor makes sense – especially when using Global Styles.

To link the color to the GP color palette, give this CSS a whirl. The variable color can be linked to whatever palette color desired, and it now has more global styling capabilities.

/* CSS to change the fill color */
.custom-color > .gb-icon > svg > path { 
  fill: var(--primary-accent); /* Replace 'primary-accent' with your desired palette color */
}

/* CSS for hover effect */
.custom-color:hover > .gb-icon > svg > path { 
  fill: var(--secondary-accent); /* Replace 'secondary-accent' with your desired palette color */
}

Thanks,
David