How to change path color in svg when working with Material-UI?

Question

React

The page has an icon wrapped in a SvgIcon wrapper. The icon is a shape with an outline. I need to make it so that when interacting with the icon (hover), the color of only one path changes, and not the entire icon.

Now it is. Icon:

export function FavouritesIcon(props) {
  return (
    <SvgIcon {...props}>
      <g>
        <path d='M23.9374 9.06931C23.7803 8.5622 23.3492 8.20203 22.8393 8.15407L15.9122 7.49773L13.1731 0.807668C12.9711 0.317373 12.5112 0 12.0001 0C11.489 0 11.0291 0.317373 10.8271 0.808815L8.08796 7.49773L1.15981 8.15407C0.650769 8.20318 0.220827 8.5622 0.0628036 9.06931C-0.0952201 9.57642 0.0507184 10.1326 0.435798 10.4833L5.67182 15.275L4.12784 22.3721C4.01486 22.8939 4.20896 23.4333 4.62388 23.7463C4.84691 23.9144 5.10784 24 5.37097 24C5.59785 24 5.82289 23.9362 6.02486 23.8101L12.0001 20.0836L17.9731 23.8101C18.4102 24.0845 18.9612 24.0594 19.3752 23.7463C19.7903 23.4323 19.9842 22.8927 19.8713 22.3721L18.3273 15.275L23.5633 10.4842C23.9484 10.1326 24.0954 9.57738 23.9374 9.06931V9.06931Z' />
        <path d='M5.3717 24C5.10876 24 4.84764 23.9144 4.6248 23.7463C4.20969 23.4323 4.01577 22.8927 4.12875 22.3721L5.67274 15.275L0.436524 10.4833C0.0516271 10.1326 -0.0954101 9.57738 0.0626138 9.06931C0.220638 8.5622 0.65058 8.20318 1.15963 8.15407L8.08777 7.49773L10.8269 0.808815C11.0289 0.317373 11.4889 0 11.9999 0C12.511 0 12.971 0.317373 13.1729 0.807668L15.9121 7.49773L22.8391 8.15407C23.3493 8.20203 23.7792 8.5622 23.9372 9.06931C24.0952 9.57642 23.9491 10.1326 23.5642 10.4833L18.328 15.274L19.872 22.3709C19.9852 22.8927 19.7911 23.4323 19.3761 23.7453C18.9621 24.0583 18.4101 24.0824 17.9741 23.8089L11.9999 20.0836L6.02577 23.811C5.8238 23.9362 5.59876 24 5.3717 24V24ZM11.9999 18.4787C12.227 18.4787 12.4518 18.5424 12.654 18.6675L18.2921 22.1863L16.8349 15.4879C16.7309 15.0111 16.886 14.5134 17.2391 14.1909L22.1832 9.66623L15.642 9.04638C15.171 9.00148 14.766 8.69251 14.582 8.23967L11.9999 1.92736L9.41477 8.24063C9.23276 8.69041 8.82772 8.99938 8.35786 9.04428L1.81571 9.66412L6.75968 14.1887C7.11381 14.5122 7.26872 15.009 7.1638 15.4869L5.70771 22.1852L11.3459 18.6675C11.5478 18.5424 11.7729 18.4787 11.9999 18.4787V18.4787ZM8.03486 7.62709C8.03486 7.62709 8.03486 7.62823 8.03376 7.62919L8.03486 7.62709ZM15.963 7.62403L15.9641 7.62613C15.9641 7.62499 15.9641 7.62499 15.963 7.62403Z' />
      </g>
    </SvgIcon>
  );
}

...icon imported:

<Icons.FavouritesIcon className={classes.icon} />

styles:

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
    '& > *': {
      margin: theme.spacing(0.4),
      width: theme.spacing(120),
      height: theme.spacing(14)
    }
  },

  icon: {
    color: 'rgba(255, 193, 7, 1)',
    '&:hover': {
      '& g': {
        color: '#68e35d'
      }
    }
  }
}));

Since it is not possible to use prefixes like here:

<svg id='VK_icon' viewBox='0 0 52 52' fill='none' xmlns='http://www.w3.org/2000/svg'>
  <g class='changeSVG'>
    <path d='M52 0H0V52H52V0Z' fill='var(--color-svg_1)' />
    <path d='M13.4708 15.8249C14.717 18.9024 16.2965 21.8041 18.3767 24.4089C18.6526 24.7556 19.0003 25.0637 19.3667 25.3147C19.9019 25.6822 20.4068 25.553 20.6244 24.9409C20.8545 24.2985 21.0657 22.9966 21.0783 22.322C21.1126 20.5593 21.0731 19.4042 20.9784 17.6437C20.917 16.5161 20.5162 15.526 18.8576 15.2272C18.3454 15.1345 18.2978 14.7129 18.6269 14.2924C19.312 13.4167 20.2663 13.2772 21.3012 13.222C22.9785 13.1314 24.662 13.2053 26.3413 13.222C27.0254 13.2282 27.7135 13.2834 28.3872 13.4302C29.2659 13.6218 29.7365 14.2382 29.8813 15.096C29.9562 15.5385 29.9948 15.9934 29.9843 16.4411C29.9406 18.3651 29.8479 20.2881 29.826 22.2111C29.8167 22.9659 29.8718 23.7395 30.0332 24.4745C30.2592 25.4989 30.9567 25.7561 31.6699 25.0159C32.5757 24.0759 33.3743 23.018 34.1238 21.9436C35.4856 19.9894 36.5027 17.8447 37.3784 15.6334C37.8312 14.4924 38.178 14.2446 39.4054 14.2415C41.7125 14.2362 44.0197 14.2342 46.3268 14.2415C46.736 14.2435 47.1639 14.2821 47.5501 14.405C48.1769 14.6049 48.4257 15.1161 48.2789 15.7647C47.9364 17.2848 47.1149 18.5768 46.2352 19.8189C44.8234 21.8116 43.344 23.7565 41.899 25.7262C41.7147 25.9771 41.5523 26.2447 41.4013 26.5164C40.8609 27.493 40.8984 28.0406 41.6865 28.8537C42.9411 30.1478 44.2842 31.3586 45.4991 32.6881C46.3821 33.6553 47.1993 34.7047 47.8989 35.8094C48.7839 37.2065 48.2373 38.5225 46.584 38.7567C45.544 38.9036 40.4635 38.7579 40.2009 38.7567C38.835 38.7506 37.6377 38.2768 36.6735 37.3492C35.6012 36.3164 34.6267 35.1836 33.597 34.106C33.2868 33.7812 32.9556 33.4699 32.5986 33.1981C31.7563 32.5557 30.9296 32.6984 30.5361 33.6875C30.1998 34.5371 29.9093 36.7682 29.8957 36.9587C29.825 37.955 29.1909 38.5901 28.0748 38.6515C24.8525 38.8265 21.7301 38.4673 18.8213 36.9087C16.3559 35.5886 14.3872 33.7218 12.6818 31.5449C9.97278 28.0871 7.83302 24.2863 5.87948 20.3738C5.77964 20.1738 3.80099 15.9634 3.74782 15.7645C3.57107 15.0986 3.73595 14.4625 4.29859 14.2435C4.64934 14.1071 11.173 14.2431 11.2815 14.2489C12.3225 14.3053 13.0323 14.7444 13.4708 15.8249Z' fill='var(--color-svg_2)' />
  </g>
</svg>

.changeSVG {
    --color-svg_1: #9CA5B2;
    --color-svg_2: #FCFAF9;
}

.changeSVG:hover {
    --color-svg_1: #3A4B65;
}

... I do not understand the resolution of the situation.

Answer 1

assign an id to a specific path and style that specific id