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;
    `;

CodePudding user response：

There's