I am trying to style Coveo's new Atomic React Wrapper using Shadow Dom. It doesn't appear they exposed the atomic-icon's svg elements as a part for both submit-button and clear-button. I was able to modify their colors by changing some of the variables.
atomic-search-box::part(clear-button){ width: 50px; height: 50px; }
This will affect the background of the svg but not the icon itself. Here is the rendered html of clear-button.
<button class="btn-text-transparent w-8 h-8 mr-1.5 text-neutral-dark ripple-parent ripple-relative" part="clear-button" aria-label="Clear"><atomic-icon class="w-3 h-3 hydrated ripple-relative" innerhtml="<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="m18 2-1.8-2-7.1 7.1-7.1-7.1-2 2 7.1 7.1-7.1 7.1 2 1.8 7.1-6.9 7.1 6.9 1.8-1.8-6.9-7.1z"></path></svg>"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="m18 2-1.8-2-7.1 7.1-7.1-7.1-2 2 7.1 7.1-7.1 7.1 2 1.8 7.1-6.9 7.1 6.9 1.8-1.8-6.9-7.1z"></path></svg></atomic-icon></button>it looks like height and width are pulled from .w-3 .h-3 classes on the atomic-icon.
.h-3 {
height: 0.75rem;
}
Can I override those classes somehow or how would you increase the size of these elements?
At the time when you asked your question, there was indeed no easy way to edit those components. However, within the last weeks, the clear-icon and submit-icon shadow parts have been released: https://docs.coveo.com/en/atomic/latest/reference/components/atomic-search-box/ I hope this helps!