'SVG Icon used in ToggleButton from MUI don't get highlight color once it's selected

I have in ToggleButtonGroup five SVG icons rendered, 4 of them are highlighted once are selected as it should be, they have the same color as describing text. But 1 icon don't change, don't react once it's selected. It's about

<StyledSideNavigationWrapper>
            <StyledToggleButtonGroup
                color="warning"
                value={alignment}
                exclusive
                onChange={handleAlignment}
            >
                <StyledToggleButton
                    aria-label={TrainDetailsTranslation}
                    onClick={() => handleGoToDetails()}
                    value={`/trains/${idTrain}`}
                >
                    <StyledDetailsIcon />
                    <StyledText>{TrainDetailsTranslation}</StyledText>
                </StyledToggleButton>
                <StyledToggleButton
                    aria-label={LinesTranslation}
                    onClick={() => handleGoToLines()}
                    value={`/lines`}
                >
                    <StyledLinesIcon />
                    <StyledText>{LinesTranslation}</StyledText>
                </StyledToggleButton>
                <StyledToggleButton
                    aria-label={WheelsTranslation}
                    onClick={() => handleGoToWheels()}
                    value={`/trains/${idTrain}/wheels`}
                >
                    <StyledWheelIcon />
                    <StyledText>{WheelsTranslation}</StyledText>
                </StyledToggleButton>
                <StyledToggleButton
                    aria-label={ServiceTranslation}
                    onClick={() => handleGoToService()}
                    value={`/trains/${idTrain}/service`}
                >
                    <StyledServiceIcon />
                    <StyledText>{ServiceTranslation}</StyledText>
                </StyledToggleButton>
                <StyledToggleButton
                    aria-label={AlertsTranslation}
                    onClick={() => handleGoToAlerts()}
                    value={`/trains/${idTrain}/alerts`}
                >
                    <StyledErrorIcon />
                    <StyledText>{AlertsTranslation}</StyledText>
                </StyledToggleButton>
            </StyledToggleButtonGroup>
        </StyledSideNavigationWrapper>

Marked icon should be in orange color. enter image description here

I guess it's connected to SVG file. In one working icone code is like:

<svg width="21" height="20" viewBox="0 0 21 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M12.28 13.3L18.28 19.3L20.39 17.14L14.39 11.14L12.28 13.3ZM16 8.1C15.61 8.1 15.19 8.05 14.86 7.91L3.46999 19.25L1.35999 17.14L8.76999 9.74L6.99999 7.96L6.27999 8.66L4.82999 7.25V10.11L4.12999 10.81L0.609985 7.25L1.30999 6.55H4.11999L2.71999 5.14L6.27999 1.58C6.55654 1.30195 6.88532 1.08131 7.24743 0.93075C7.60953 0.78019 7.99783 0.702682 8.38999 0.702682C8.78215 0.702682 9.17044 0.78019 9.53255 0.93075C9.89465 1.08131 10.2234 1.30195 10.5 1.58L8.38999 3.74L9.79999 5.14L9.08999 5.85L10.88 7.63L12.7 5.75C12.56 5.42 12.5 5 12.5 4.63C12.496 4.16832 12.5837 3.71045 12.7579 3.2829C12.9322 2.85535 13.1895 2.46662 13.515 2.13922C13.8406 1.81183 14.2278 1.55228 14.6544 1.37561C15.0809 1.19894 15.5383 1.10866 16 1.11C16.59 1.11 17.11 1.25 17.58 1.53L14.91 4.2L16.41 5.7L19.08 3.03C19.36 3.5 19.5 4 19.5 4.63C19.5 6.55 17.95 8.1 16 8.1Z" fill="currentColor"/>
</svg>

But one which is not working looks totally different. What should be changed there to make it work ?

<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="40" height="40" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_4495_107104" transform="scale(0.00195312)"/>
</pattern>
<image id="image0_4495_107104" width="512" height="512" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAABHNCSVQICAgIfAhkiAAAAAl

And here is very long code

Vk9uMQYN4uX4N7+d+df91BOg9f79e7XX6cDLwSt+GFUGz/Dwx76y6f1K6jAAAAAElFTkSuQmCC"/>
</defs>
</svg>

thanks a lot



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source