[Component] Custom Icons give console error and do not allow tooltips.

I am trying to load icons from React-Icons, and when i use <Icon as={MdPeople} /> for example I get the following error in console: (I tried it with <Box /> with the same result)

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `Context.Consumer`.
    in MdPeople (created by Context.Consumer)
    in Styled(div) (created by Icon)
    in Icon (at PartnerIcon.tsx:20)
    in Tooltip (at PartnerIcon.tsx:14)
    ...

My componnet looks like so:

import React from 'react'
import { Team } from 'types/Team'
import { MdPeople } from 'react-icons/md'
import { Tooltip, Icon } from '@chakra-ui/core'

type Props = {
  team: Team
}

export const PartnerIcon = ({ team }: Props) => {
  // use user to determine if this should be rendered.

  return (
    <Tooltip
      label={`Partner ${team.name}`}
      aria-label="Partner"
      placement="top"
      hasArrow
    >
      <Icon color="white" as={MdPeople} /> // tried this with <Box as... /> with the same result.
    </Tooltip>
  )
}

On top of this error, It does not show a tooltip when I hover over the icon. - I want to point out that the tooltip works fine when used with a normal icon.

Not exactly sure how to debug this.

Oh also, if you wrap a <Tooltip> element around this example you can see that the tooltip does not render: https://chakra-ui.com/icon#adding-custom-icons

[luizcieslak]

I’m facing the same issue. While react-icons doesn’t support forwardRef, a quick solution would be to add the icon as a child:

<Tooltip isOpen label="hello">
  <Box size="32px" color="green.400">
    <MdSettings />
  </Box>
</Tooltip>

[segunadebayo]

This issue is happening because react-icons doesn’t use forwardRef and tooltip can’t work correctly without ref placed in the icon.

See here: https://github.com/react-icons/react-icons/blob/f95cf84f7beff3638be8bb12a51d00338da97100/packages/react-icons/src/iconBase.tsx#L30

@with-heart I’ll suggest we open an issue or PR in react-icons repo to get this fixed.

I believe it works well if you use any icon from @chakra-ui/icons

Thanks guys.