Search code examples
cssreactjsmaterial-uistyled-components

How style endIcon of styled-component button?

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;
  }
Solution

  • 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: 50px;
    color: green;
  }
`;