How style endIcon of styled-component button?

Question

Here is my simple styled button

import styled from 'styled-components';
import Button from '@material-ui/core/Button';
import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';

const MyButton = styled(Button)`
  font-size: 11px;
`;

<MyButton
     variant="outlined"
     color="primary"
     size="small"
     disableElevation
     endIcon={<ArrowForwardIosIcon />}
>
     CLICK ME
</MyButton>

So how do I change endIcon size. I can change it in Chrome dev tool but have no idea what to add to MyButton definition. Assume it should be something like this in styled button definition:

  &.MuiButtonendIcon {
    color: green;
    font-size: 15px;
  }

Answer 1

you can style the individual endIcon by targeting the svg element and setting its font-size property like this

const MyButton = styled(Button)`
  & .MuiButton-endIcon svg {
    font-size: 20px;
    color: green;
  }
`;

Answer 2

I solved it this way:

 const MyButton = styled(Button)`
  *:first-of-type svg{
    font-size: 50px;
    color: green;
  }
`;