Community forum for knowledge and support

Updated 8 months ago

Troubleshooting icon display issues on buttons

At a glance

The community member is having an issue with adding icons to buttons on their website. When they use the is-icon combo class, no icon appears. When they try to paste an icon directly into the button, it appears beside the button instead of within it. Other community members suggest that the is-icon class is only for positioning and that the community member would need to manually add an icon from a style guide or icon library and then use the is-icon class to position it correctly. One community member also suggests that the issue may be because the button is actually a link block element rather than a button element, and that nesting elements within a button requires using a link block.

Useful resources

When I add the is-icon combo class to buttons on my site, no icon appears, and when I try to paste an icon into the button it doesn't appear within the button, but beside it.

E
M
5 comments

yeah unfortunately its not like figma components where there is already an icon stored there - its just for helping with positioning - you'd have to go to the style guide page or icons.relume.io and grab an icon and place it within the button and then use is-icon to get the spacing and positioning correct.

I wasn’t actually able to paste an icon in when I tried that, but I’ll give it another go

if that is the case, make sure that its not a button element (hand cursor) but a link block (link icon). In order to nest elements in a button, it'll need to be a link block.

Ah okay thank you!

Add a reply
Sign up and join the conversation on Slack