Coveo Atomic Search Interface Styling - Atomic-Icon - Shadow Dom

Question

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=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 18 18&quot;><path d=&quot;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&quot;></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?

Answer 1

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!