icons: Add matchTextDirection to directional icons #2015

yash-agarwa-l · 2025-12-03T10:23:35Z

This enables automatic mirroring for directional icons (like arrows and send buttons) in RTL languages.

Previously, icons like chevron_right and send would always point to the right, even in RTL layouts where the flow of the application is right-to-left. This updates the icon generation script to set matchTextDirection: true for these specific icons, ensuring they flip correctly.

This addresses the fourth RTL issue identified by @gnprice in this comment, and fixes #1907.

Changes

Updated tools/icons/build-icon-font.js to add matchTextDirection: true for arrow_right, chevron_right, and send.
Updated lib/widgets/icons.dart with the regenerated code.

Send Button

State	LTR	RTL
Before Send
After Send

Thumbs Up Button (Small Arrow)

State	LTR	RTL
Before ` > `
` > `

More Button (…)

State	LTR	RTL
Before More
After More

chrisbobbe · 2025-12-04T20:05:54Z

(Oops, I didn't mean to close this—accidentally clicked the wrong button.)

chrisbobbe · 2025-12-04T20:08:14Z

Thanks, this looks great!

This looks like a good approach, except I would maybe make a data file for the names of the directional icons. I've pushed two commits with some suggested changes, including that one, so here is the new version of your PR branch:

34d82b0 icons: Add matchTextDirection to directional icons
e295420 icons [nfc]: Refactor named-param generation in build-icon-font
df664c1 icons [nfc]: Put directional-icons data in its own JSON file

Please pull those changes, and if they look good, please squash them into your commit and push the result to the PR.

chrisbobbe · 2025-12-04T20:13:39Z

Ah, and also: there are some other icons with arrows that should probably get the same treatment:

arrow_left_right
(Hmm, maybe just that one—I'd thought there was another, but I guess not.)

And others that aren't arrows but also look like they should flip because they represent text in a directional layout:

message_feed
topics

chrisbobbe · 2025-12-04T20:15:45Z

Could you also add to the instructional comment "To add a new icon […]" in lib/widgets/icons.dart that developers should consider whether the icon is directional, and update that data if so? There's a Material doc you can link to to help the developer make the decision.

yash-agarwa-l · 2025-12-04T22:59:08Z

Thanks for the refactor commits, @chrisbobbe! I've pulled them in and squashed everything into a single commit.

I also updated directional_icons.json to include message_feed, topics, and arrow_left_right.

I am a bit unsure about arrow_left_right, though—since it depicts a concept (two-way exchange) rather than a specific UI direction, I wonder if it usually stays static? I’ve included it for now to be safe, but I'm happy to remove it if you prefer.

chrisbobbe · 2025-12-08T21:58:35Z

Thanks! LGTM; marking for Greg's review.

gnprice

Thanks @yash-agarwa-l and @chrisbobbe! Comments below.

I think a good solution for both of these comments would be to treat this file as JS, not JSON: just rename it to a .js name, and use require instead of fs.readFileSync. (The file can still consist of just an array of strings.) Then take the opportunity to add code comments.

gnprice · 2025-12-12T02:10:29Z

tools/icons/build-icon-font.js

+
+  // Icons that should flip horizontally in RTL layout.
+  const directionalIconsFile = path.join(srcDir, 'directional_icons.json');
+  const directionalIcons = fs.readFileSync(directionalIconsFile);


Huh, does this decode the JSON?

… I think it doesn't, and in fact that has a visible effect: the icon topic gets mirrored, even though it's not in the list, because topics is in the list and its name contains the name "topic". The .includes call below is checking for string inclusion.

Oop, thanks for the catch!

gnprice · 2025-12-12T02:17:25Z

assets/icons/directional_icons.json

+[
+  "arrow_right",
+  "chevron_right",
+  "send",
+  "arrow_left_right",
+  "message_feed",
+  "topics"


I think JSON is actually not a good choice for how to encode this. In general, JSON is a bad format to use for any sort of configuration file, or anything else that's going to be maintained over time by humans. (OTOH it's great for transferring data — the job it was designed for.)

The absolutely fatal problem with JSON as a config-file format is that it doesn't permit comments. Here, for example, I'd want to record the reasoning from #2015 (comment) as to why these particular icons are included.

yash-agarwa-l · 2025-12-12T18:30:52Z

Thanks! I've switched to a JS file and updated the import logic.

gnprice

Thanks for the revision! Just nits now. Some below, and two in the commit message:

Add matchTextDirection to directional icons

Should have a prefix: icons:.

Fixes #1907

This is a sentence, so should end with a period.

We also update the documentation within the generation script to
instruct future contributors on how to handle new directional icons.

Hmm, this doesn't seem quite true — there's no new documentation within the script. Instead the new docs are in other places (which are more relevant anyway).

Can just delete this paragraph. In general it's expected that a commit will add documentation where it's needed 🙂

gnprice · 2025-12-12T20:57:55Z

assets/icons/directional_icons.js

@@ -0,0 +1,10 @@
+//List of icons that should flip horizontally in RTL layout.


nit: space between // and text

Suggested change

//List of icons that should flip horizontally in RTL layout.

// List of icons that should flip horizontally in RTL layout.

gnprice · 2025-12-12T20:59:58Z

assets/icons/directional_icons.js

+  "send",
+  "arrow_left_right",
+  "message_feed",
+  "topics"


nit: trailing comma for each element of a list, if the closing ] (or ) etc.) isn't on the same line

Suggested change

"topics"

"topics",

(Like comments, this is another thing that's useful for a file which is being maintained over time by humans, but is disallowed by JSON because it doesn't fit with JSON's quite different purpose which is transmitting data between machines.)

gnprice · 2025-12-12T21:13:18Z

assets/icons/directional_icons.js

+  "arrow_left_right",
+  "message_feed",
+  "topics"
+]


Since we're writing this in full-on JS syntax now, let's include things like semicolons so that it's in normal preferred JS formatting:

Suggested change

]

];

Fixes zulip#1907. We update the icon generation script to automatically set matchTextDirection: true for icons that imply directionality (arrow_right, chevron_right, send). This ensures these icons flip correctly in RTL locales.

yash-agarwa-l · 2025-12-13T03:42:43Z

Thank You, I've made the changes and and pushed the revision.

chrisbobbe mentioned this pull request Dec 4, 2025

action_sheet: Use directional border radius for reaction buttons #2010

Merged

chrisbobbe closed this Dec 4, 2025

chrisbobbe reopened this Dec 4, 2025

yash-agarwa-l force-pushed the fix-rtl-icon branch 2 times, most recently from ede8007 to a66a0d1 Compare December 4, 2025 22:42

yash-agarwa-l force-pushed the fix-rtl-icon branch from a66a0d1 to 8f3279e Compare December 4, 2025 23:10

chrisbobbe requested a review from gnprice December 8, 2025 21:58

chrisbobbe assigned gnprice Dec 8, 2025

chrisbobbe added the integration review Added by maintainers when PR may be ready for integration label Dec 8, 2025

gnprice reviewed Dec 12, 2025

View reviewed changes

yash-agarwa-l force-pushed the fix-rtl-icon branch 2 times, most recently from 5147ad5 to 7796c01 Compare December 12, 2025 18:30

gnprice reviewed Dec 12, 2025

View reviewed changes

icons: Add matchTextDirection to directional icons

48f73c2

Fixes zulip#1907. We update the icon generation script to automatically set matchTextDirection: true for icons that imply directionality (arrow_right, chevron_right, send). This ensures these icons flip correctly in RTL locales.

yash-agarwa-l force-pushed the fix-rtl-icon branch from 7796c01 to 48f73c2 Compare December 13, 2025 02:49

		@@ -0,0 +1,10 @@
		//List of icons that should flip horizontally in RTL layout.

	//List of icons that should flip horizontally in RTL layout.
	// List of icons that should flip horizontally in RTL layout.

icons: Add matchTextDirection to directional icons #2015

Are you sure you want to change the base?

icons: Add matchTextDirection to directional icons #2015

Uh oh!

Conversation

yash-agarwa-l commented Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Uh oh!

chrisbobbe commented Dec 4, 2025

Uh oh!

chrisbobbe commented Dec 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chrisbobbe commented Dec 4, 2025

Uh oh!

chrisbobbe commented Dec 4, 2025

Uh oh!

yash-agarwa-l commented Dec 4, 2025

Uh oh!

chrisbobbe commented Dec 8, 2025

Uh oh!

gnprice left a comment

Choose a reason for hiding this comment

Uh oh!

gnprice Dec 12, 2025

Choose a reason for hiding this comment

Uh oh!

chrisbobbe Dec 12, 2025

Choose a reason for hiding this comment

Uh oh!

gnprice Dec 12, 2025

Choose a reason for hiding this comment

Uh oh!

yash-agarwa-l commented Dec 12, 2025

Uh oh!

gnprice left a comment

Choose a reason for hiding this comment

Uh oh!

gnprice Dec 12, 2025

Choose a reason for hiding this comment

Uh oh!

gnprice Dec 12, 2025

Choose a reason for hiding this comment

Uh oh!

gnprice Dec 12, 2025

Choose a reason for hiding this comment

Uh oh!

yash-agarwa-l commented Dec 13, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

yash-agarwa-l commented Dec 3, 2025 •

edited

Loading

chrisbobbe commented Dec 4, 2025 •

edited

Loading