I sometimes get in a bit of a muddle around which is the best position for an icon within a button i.e. left of the text or right of it. I was wondering if there is an easy way to determine the best positioning, or if perhaps I should just always place the icon on one particular side?
See these examples I've prepared.
This one seems more obviously comfortable on the left
Left Aligned (feels weird):
In this instance it feels odd to have it before the text, like the arrow is instructional and should follow the text
So maybe this way around works better for that sort of use case. But it feels inconsistent to be changing alignments and also means design more variations which is more work to create and maintain dev-wise as well
I know the text is different in each and I'm not concerned with that, it was just the examples I had to hand from the project I am working on
Should I evaluate each on a case-by-case basis or perhaps just stick with one alignment e.g. left, and run with it?