Changing BaseWeb's Select TriangleDownIcon to another BaseWeb Icon

Question

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,
          };
        },
      },
    }}
  />

Answer 1

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 />,
    }}
  />