React Component Button Icon Component disappears on added Padding-CodePudding

I am trying to create a button (React Component), animated where a circle appears with another react component inside as the SVG. As soon as I add the padding to the SVG Component it gets hidden for some reason. I have tried searching but got no results on this case.

The code I am using to create this is:

<Button variant="cornered" color="quaternary" href="#">
    <ArrowUp className="hidden scale-75 rounded-full bg-white fill-tertiary-400" />
    Request a demo
</Button>

Initial state is the following:

When background color added through tailwinds bg-white

Adding a p-3 tailwind value hides the SVG?

Now I could solve the problem by adding a rounded div as background in this case but it's not the way I want to solve the problem. Is it possible to add the padding without making the SVG component disappear?

CodePudding user response：

The p-3 class adds .75rem of padding all the way around the element. That doesn't leave room for the SVG, which is either shrunk or shifted.