Does anyone know of a way to replace the BaseWeb Select component's default TriangleDownIcon with another BaseWeb icon? (Our designers have asked to swap the triangle icon with a chevron.). I've looked through BaseWeb's Select documentation and, while I can see how to style the icon through overrides, I can't find how to swap the icon for another.
<Select
overrides={{
SelectArrow: {
style: ({ $theme }) => {
return {
outline: `${$theme.colors.warning600} solid`,
backgroundColor: $theme.colors.warning600,
};
},
},
}}
/>
For posterity, you can override the Select's default TriangleDownArrow
with your own BaseWeb icon by overriding the entire SelectArrow
property.
import ChevronDown from 'baseui/icon/chevron-down';
...
<Select
overrides={{
SelectArrow: () => <ChevronDown />,
}}
/>