How to add a Badge for an Icon in Ant Design?

Question

I'm using the Icon and Badge from Ant Design. I want to add the Badge for the Icon:

          <VscBell
            size={30}
            style={{ marginRight: '10px', float: 'right' }}
          >
            <Badge count={5}>
              <a href="#" className="head-example" />
            </Badge>
          </VscBell>

I have import 'antd/dist/antd.css'; imported and the Badge works without the Icon. The Icon is from reacticons and it is displayed properly. I want to add the Badge to the top right of the Icon. But it does not show at all when included in the Icon.

Answer 1

Put them both in a View Tag (if you are react-native) or div and then take this styles to the badge:

position: absolute;
right: 0px;
top: 0px;

Something like this:

 <div> <VscBell size={30} style={{ marginRight: '10px', float: 'right' }} > </VscBell> <Badge count={5} style={{ position: 'absolute', right: 0, top: 0 }}> <a href="#" className="head-example" /> </Badge> </div>