icons: Add matchTextDirection to directional icons

[yash-agarwa-l]

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]

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

[chrisbobbe]

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]

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]

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]

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]

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]

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.

[chrisbobbe]

Oop, thanks for the catch!

[gnprice]

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]

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