How to add an icon to a Button in OS11

I have had this same problem ever since I started OutSystems and yet there is no progress towards solving this. I have also seen many times this question come up and no resolution.

I need to add an icon to a button. A button in OutSystems is an <input> of type="submit" with its value the text that will appear on the Button.

Please note I cannot use a link in this case. I already in the past have used a link with an icon enclosed which I style as Button. In this case I cannot use a link because I have several forms on one page; for example one for addresses one for contact numbers etc, on each form there is a save button. If I use a link then ALL the forms on the page are validated and then I get "required!" message on forms for which I did not click the "save". If I use a Button widget this works correctly, only the form on which the Save Button was clicked is validated. I tried adding type="submitted" attribute to the links but it does not help. So I am stuck with absolutely having to use the Button widget, and I absolutely have to add an icon.

Unfortunately I cannot analyze OutSystems code behind the scenes to see how I can get the same behaviour on a link as on a Button, but there obviously is a difference.

All posts I read regarding this issue did not one offer a solution, but they are old and I am wondering if perhaps in OS11 OutSystems has provided a solution for this.

Solution

Hi Elize,

First, are you trying to use an "OutSystems" Icon (Fontawesome) or an ICO/PNG/etc?

Notice that the INPUT of type submit does not accept images (this is not an OutSystems problem).
If you want to add a Fontawesome icon (that is in fact text, not image),  you can try to use this kind of approach:

1. Give some space in the Label of the button

2. Add a div with a specific class (e.g.: myclass) around the button

3. Apply some CSS (e.g):


div.myclass:after {
   font-family: FontAwesome;
   content: "\f004";
   font-size: 13px;
   position: absolute;
   right: 11px;
   top: 0px;
   color: white;
   pointer-events: none;
}

 

It is not simple "adding an icon", but it works.

Hope this helps.

Solution

Guys,

In reactive web you just place an icon widget left or right from the text  inside a button. Then you set the size of the icon.

Regards,

Daniel


Nice, Daniel. 

Didn't try this on React. Only traditional Web (where you have to do it yourself). 

Good to know.

Cheers 

Hi Eduardo,


Thank you for the ideas, I managed to get it working using this method. I just needed to style the CSS according to my situation, the icon ended up in the top right corner of the screen (see screenshot below), but I changed CSS slightly and now it works perfectly.



The CSS for my situation

div.ButtonAdd::after {
   font-family: FontAwesome;
   content: "\f067";
   font-size: 13px;
   position: relative;
   left: -25px;
   top: 0px;
   color: var(--color-primary);
   pointer-events: none;
}


and the perfect result: