Feature Request: Add slot to render Icon next to FlagButton

[spicattutti]

Heya, props for the lib.

I would like an arrow/chevron to be shown so that it is clearer to the user that the flag is actually a button revealing a dropwdown.

I sketched a solution where the consumer can set a renderIcon prop, which is of shape

(isFlagsMenuOpened: boolean) => React.ReactNode 

But it would need a little thinking and tweaking on the button styles, because the Icon enlarges the button area, which looks weird depending on the size of the Icon. This is how it looks for a (dummy-)Icon:

const renderIcon: MuiTelInputProps['renderIcon'] = (isFlagsMenuOpened) => {
  return (
    <div
      style={{
        paddingLeft: '0.5rem'
      }}
    >
      <div
        style={{
          transition: `transform 0.1s ease-out`,
          transform: `rotate(90deg) scaleX(${isFlagsMenuOpened ? -1 : 1})`
        }}
      >
        <span
          style={{
            fontSize: '0.8rem'
          }}
        >
          &gt;
        </span>
      </div>
    </div>
  )
}

@viclafouch Do you see a better way to achieve the desired behavior?

Shall I raise a PR so that the first solution can be discussed?

[albertus-andito]

I was about to open an issue for this. Thank you.

After using and deploying this component. I have found that a lot of people don't realise that the country code box is a button for a dropdown. It resulted in them to just use the default country code.

[drod3763]

I was looking for an issue just like this. Would love to use this library but I would like the option to add a chevron next to the flag.