What is a better approach for designing buttons for the web? Should the icon come before the text or after? Personally I think it really depends on the context of area but just wondered what would be a more 'standard' approach?
I personally think the one on the left looks better.
We read English from Left→Right so it only makes sense to me that you see a green button with a check and then the "explanation" (Submit).
If the page is in a language such as Arabic or Hebrew where they read from Right to Left, then you should probably place the icon on the other side.
I read this R-L, therefore I see the ✅ (check) first.
Most of the time the icons accompanied by text are perceived as a bulleted text, so its location to the left is visually more familiar.
Image from Bullets in Excel
This bulleted perception increases when the icons accompany a text list as in a drop-down menu.
In these menus, the icons on the right usually have a different meaning than the text such as an alert or a detail of the item itself:
Always speaking perceptively, the icon is an image and the text a description of this image, and this is usually in this order, beyond the language: image + description
As in the photographs, the caption always goes after the image:
More answers at ux.stackexchange same question
If it's anything but Hebrew the icon left then text. This follows the natural way people will see the visual language of the button. In cases like submit, next and back the position of the icon can help reinforce the visual language and better describe the button. In these cases context will dictate the position.
Let me know if this isn't clear.
From development perspective, the one on the left is a better choice. Assuming "submit" is live text, font size can be scaled up or down by site visitor using their browser settings. By keeping decorative element on the left, button text can be visually anchored to it, irrespective of font size. Having decorative element on the right will lead to all sorts of issues when text scales up or down, such as text too far away from the checkmark or overlapping it. This can be resolved, but with unnecessarily large amount of coding, and should be avoided in the first place.