Changing icon color independently of callout-color

I know you can can change callout colors and even title text color using CSS, but is there a way to change the icon color as well? My current CSS snippet is

.callout[data-callout="source"] {
    --callout-icon: bookmark-minus;
    --callout-color: 129, 222, 186;
    --callout-title-color: #e0bb79;
}

Thanks!

You could try adding in the second & .callout-icon .svg-icon section. That takes care if it on my end.

.callout[data-callout="source"] {
    --callout-icon: bookmark-minus;
    --callout-color: 129, 222, 186;
    --callout-title-color: #e0bb79;

    & .callout-icon .svg-icon {
        color: salmon;
    }
}

The non-nested version if it’s clearer:

.callout[data-callout="source"] {
    --callout-icon: bookmark-minus;
    --callout-color: 129, 222, 186;
    --callout-title-color: #e0bb79;
}
.callout[data-callout="source"] .callout-icon .svg-icon {
    color: salmon;
}

Perfect. Thank you kindly!

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.