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.
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