Icon not being responsive

I am adding a sign up with google button on my page, I am overlaying a icon over a button, but the icon looks fine through a desktop page, but through a mobile phone the icon will overlap the text on the button. How can I fix this?


This is happening because a button is not a container element, so if the icon is overlapping the button, it has no way of knowing what the boundaries of the button’s text are.

The solution here would be to use a group element with a background color and border radius instead of a button element. That will allow you to create a group that looks exactly like a button. From there, you can place a text element and an icon element inside of the group, and arrange them as you’d like. With this setup, the icon and text will respect each other’s boundaries and not overlap.

1 Like