[Bug Report] Inconsistency with left/right icons in rtl/ltr when used within buttons and without buttons

[ibrahimBeladi]

Environment

Vuetify Version: 2.2.19
Vue Version: 2.6.11
Browsers: Waterfox 56.3
OS: Linux x86_64

Steps to reproduce

Use left/right in icon within buttons and without.

Expected Behavior

Consistency with left/right icons in rtl/ltr when used within buttons and without buttons

Actual Behavior

Inconsistency.

Reproduction Link

https://codepen.io/ibrahimbeladi/pen/ZEGVVVe?editors=1000

Other comments

Related to (but not duplicate of) #10619, #8461, and #9211.
I suggested before to add 'end' and 'start' props in addition to (or in place of) left/right;
See #10619 (comment) and #10619 (comment)

[johnleider]

This is a documentation related issue as v-icon's left and right properties only apply margin inside of v-btn.

[ibrahimBeladi]

The margins are applied to the opposite side in rtl. And the documentation change does not fix this issue as the margins are applied even if it isn't inside a button.

[ibrahimBeladi]

I just updated the codepen, and made it a bit sophisticated.

As you can see for the buttons it looks great in both LTR and RTL because it is direction-oriented; in other words, left and right are the implementations of start and end respectively. In other words, left is left in LTR and right in RTL

While in the examples without a button they look ugly and move closer to the text leaving a padding to the start of the line, and that's due the fact they are truly left and right. In other words, left is left in both LTR and RTL since it is direction-agnostic.

The direction-oriented behavior of icons in buttons is great, but it is super confusing for people writing i18n direction-agnostic websites for both LTR and RTL languages.

---

Side note: I have always mentioned introducing start and end to avoid the aforementioned problem and to reduce the miscommunication in the community.