Add autoMirroded attribute to some icons so that they render correctly on Rtl mode.

[bmarty]

This should fix the issues on icons reported here: element-hq/element-x-android#2865

There is maybe a way to add this attribute to the Figma source of truth (CC @amshakal), but waiting for it this should do the trick.

Here is a side by side comparison of the icons:

[codecov]

Codecov Report

Attention: Patch coverage is 85.71429% with 1 line in your changes missing coverage. Please review.

Project coverage is 98.21%. Comparing base (1ce4743) to head (e3e5f78).
Report is 20 commits behind head on main.

Files with missing lines	Patch %	Lines
.../android/compound/previews/CompoundIconsPreview.kt	85.71%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main      #85   +/-   ##
=======================================
  Coverage   98.21%   98.21%           
=======================================
  Files          23       23           
  Lines        2573     2576    +3     
  Branches       38       39    +1     
=======================================
+ Hits         2527     2530    +3     
  Misses         23       23           
  Partials       23       23           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[jmartinesp]

This icon looks kind of broken 😅 :

Other than that, great job, it's a nice workaround!

[bmarty]

This icon looks kind of broken 😅 :

Other than that, great job, it's a nice workaround!

I think it's fine and match what is expected by people using RTL mode. See this other icons:

There are still some work to do on the design side, since I cannot autoMirroded this ones for instance:

Also I am not sure if I can autoMirrored this ones with question mark:

I think I should, but maybe @IbraChan can help (sorry to ping you directly, but since you open element-hq/element-x-android#3510 I think that you want to help!)

[jmartinesp]

I'd say it still looks weird to me, also the check icon is not in the list of automirrored material icons.

In any case, it's not a blocker I think.

[bmarty]

The list of icons in your link is not exhaustive (there are extensions with more icons.). I have found https://developers.google.com/fonts/docs/material_icons#which_icons_should_be_mirrored_for_rtl which is interesting.

So it seems that's you're right about the check icon. I will revert the auto-mirroring on the checks, and add it to the question mark, like:
, and

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[IbraChan]

I believe that many icons, in fact, most of them, don’t need to be mirrored. Only those containing some kind of an arrow (left or right) should be mirrored. Additionally, mirroring some icons might make them look broken. For example, icons containing a check mark (as jmartinesp mentioned), and the Italic and Bold icons. Some icons, like the room (hashtag) icon, conventionally look the way they are regardless of the writing system. For icons that contain a question mark, the form of the question mark in the icons is common (and people don't find it strange) in systems that write from left to right, or at least the lanaguage i speak which is Arabic, with another mirrored version “؟”. However, the original form is common, and not mirroring it won’t make it look strange to the user.

To enhance testing, I have begun contributing to the application’s translation and aim to complete it shortly. ^^

[bmarty]

Thanks for the input @IbraChan . Let's merge the PR and see if we need to revisit later.
Note that all the icons are not used in the final application, so if a used icon is too strange in RTL in the final application we will change the icon.