How do I make it scale the icon when I hover over the text in framer motion and material ui

Question

When I hover the text it just scales the icon when i hover it it does not work.

<ListItem sx={{ fontSize: '14px' }}>
    <motion.div style={{ display: 'flex', alignItems: 'center' }}>
      <Link href='/Blog' style={{ marginRight: '4px' }}>Blog</Link>
    <motion.div whileHover={{ scale: 1.2 }} style={{ marginLeft: '4px' }}>
      <CallMadeIcon sx={{ fontSize: '18px' }} />
      </motion.div>
    </motion.div>
</ListItem>

Is there any solution I'm running out of ideas

Answer 1

You need to use variants attribute which is propagated through children like this:

<ListItem sx={{ fontSize: '14px' }}>
  <motion.div
    style={{ display: 'flex', alignItems: 'center' }}
    whileHover={'hovered'}
  >
    <Link href="/Blog" style={{ marginRight: '4px' }}>
      Blog
    </Link>
    <motion.div
      variants={{ hovered: { scale: 1.2 } }}
      style={{ marginLeft: '4px' }}
    >
      <CallMadeIcon sx={{ fontSize: '18px' }} />
    </motion.div>
  </motion.div>
</ListItem>

You can take a look at this StackBlitz for a live working example of your sample code.