Allow for customisation of icon size on select options

Nobody has claimed this yet.

### Summary
Allow for the size of icons in select options to be customised.

### 💬 Description
The issue with icons in select options at the moment is you can change the size of the SVG you slot in, but the spacing around the icon, e.g. between the icon and label, does not change at all. So you can have a larger icon but it would end up being very close to or overlapping the option label or the sides of the option.

You can see this in this [StackBlitz](https://stackblitz.com/edit/dkj425er?file=src%2Fapp.tsx&hideExplorer=1).

The issue is that the icon is wrapped in a div which has a set width of 16x16px, and when you change the size of the SVG inside, that parent div stays the same size so it does not push the label or sides of the option at all.

This ticket is to make the spacing around the icon respond to the size of the icon so that different icon sizes can be used.

### 💰 Use value
This allows for icons of different shapes and sizes to be used in select options. E.g. one customer was trying to use flags with a width of 24px.

### 🚨 Urgency (low, medium or high)
I would say this is low urgency. This was raised on behalf of a customer but they have managed to find a workaround by targeting the shadow DOM. Also, as discussed with designers, the icons on select options are going to be changed to 24x24px (for consistency with icons in other components) - see ticket #4217. This means the icons would become the right size by default for the customer's needs anyway with that change, but it would still be good to implement this ticket in case other teams want different sizes.

Start with the linked StackBlitz entry point, src/app.tsx, to reproduce the select-option icon sizing issue. Trace the select-option implementation and its fixed 16x16px icon wrapper, then verify that surrounding spacing responds to different SVG sizes, including the 24px-wide flag example.

Written by the indexing model from the issue text.