Expand my Community achievements bar.

Display an Icon on a form button

Avatar

Level 1

What is the recommended way to display an Icon on a button in an Adaptive From instead of the usual text?

I've checked the button component's  widget.jsp and while there is a <span class="iconButton-icon"></span> being rendered, I don't see anything that appears to allow specifying an icon to display. Ideally I'd like to use the built-in icons already provided by aem.

6 Replies

Avatar

Level 5

I am not an expert so this may not be the most elegant way of doing it: a simple solution is just to place an image object over the button object. I tried and it works

Avatar

Employee Advisor

@William_van_Deventer  You can use the image component or text component and embed the image using source edit.

Avatar

Employee Advisor

@William_van_Deventer Have you tried the style editor to add inline css?

Avatar

Level 10

Late, but anyone trying to find an option , try overriding button.scss and add before annotations to place an icon say remix icon and use style system to choose and set for buttons.