How to change SVG icon color on select in ToggleButton

Question

I have in my project 4 ButtonGroup from MUI, where each of them have SVG Icon and children as name of button. Although background of button and name works once selected, but SVG icon remains all the time the same color. How to make it work and SVG Icon will also change color on select ?

Below is the example how it's built:

 <StyledToggleButtonGroup
                            color="warning"
                            value={alignment}
                            exclusive
                            onChange={handleAlignment}
                        >
                            <StyledToggleButton
                                aria-label={DetailsTranslation}
                                onClick={() => handleGoToDetails()}
                                value={Routes.TrainsDetails.path}
                                aria-pressed="true"
                            >
                                <StyledDetailsIcon />
                                {DetailsTranslation}
                            </StyledToggleButton>
                            <StyledToggleButton
                                aria-label={LinesTranslation}
                                onClick={() => handleGoToLines()}
                                value={Routes.TrainsDetailsLines.path}
                            >
                                <StyledLinesIcon />
                                {LinesTranslation}
                            </StyledToggleButton>
                            <StyledToggleButton
                                aria-label={WheelsTranslation}
                                onClick={() => handleGoToWheels()}
                                value={Routes.TrainsDetailsWheels.path}
                            >
                                <StyledWheelIcon />
                                {WheelsTranslation}
                            </StyledToggleButton>
                            <StyledToggleButton
                                aria-label={ServiceTranslation}
                                onClick={() => handleGoToService()}
                                value={Routes.TrainsDetailsService.path}
                            >
                                <StyledServiceIcon />
                                {ServiceTranslation}
                            </StyledToggleButton>
                        </StyledToggleButtonGroup>
                    </TrainsDetailsToolbarWrapper>

and the styles for first button:

 export const StyledToggleButton = styled(ToggleButton)`
        font-size: 1.6rem;
        font-weight: bold;
        font-family: Poppins;
        margin: 0.5rem;
        padding: 0.5rem 1rem 0.5rem 1.5rem;
        border-radius: 0.4rem;
        border: none;
    `;
    export const StyledDetailsIcon = styled(MenuIcon)`
        margin-right: 1.3rem;
    `;

this is definition of MenuIcon, of of the used icons

/// <reference types="react" />
/// <reference types="react-dom" />

declare module '*.svg' {
  import * as React from 'react';

  export const ReactComponent: React.FunctionComponent<
    React.SVGProps<SVGSVGElement> & { title?: string }
  >;

  const src: string;
  export default src;
}

declare module '*.bmp' {
  const src: string;
  export default src;
}

declare module '*.gif' {
  const src: string;
  export default src;
}

declare module '*.jpg' {
  const src: string;
  export default src;
}

declare module '*.jpeg' {
  const src: string;
  export default src;
}

declare module '*.png' {
  const src: string;
  export default src;
}

declare module '*.webp' {
  const src: string;
  export default src;
}

Answer 1

See the list of component states and their associated class names here.

const StyledToggleButton = styled(ToggleButton)`
  &.Mui-selected {
    color: red;
    background-color: pink;
    /* Put your styles to apply in selected state here */
  }
`;