Repository: zulip/zulip-flutter (language: dart)

Issue:
Use icon for topic-list button in app bar
Our initial implementation of #1158, in #1500, uses the word "TOPICS" for the app-bar action/button leading to the topic-list page, following the design in Figma.

We want to change it to use a "list" icon instead. This is in order to let it occupy less space, especially in languages where the translation of "TOPICS" might be long.

### References
* Chat thread: [#mobile > Flutter beta: missing topic list @ 💬](https://chat.zulip.org/#narrow/channel/48-mobile/topic/Flutter.20beta.3A.20missing.20topic.20list/near/2181445)


Discussion hints:
Do we know which specific icon we want?

Current "TOPICS" button:

<img width="818" alt="Image" src="https://github.com/user-attachments/assets/6c404d0d-c6bf-4be8-ab30-d1e9f2c2405a" />

Could be replaced with, e.g.:

https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=8996-27909&m=dev

<img width="219" alt="Image" src="https://github.com/user-attachments/assets/e982b979-01ff-4a8d-abea-5b384e6a6a76" />

(are those two identical?)

Or e.g.:

<img width="795" alt="Image" src="https://github.com/user-attachments/assets/f57eaef0-a7d8-44b5-8f11-c69af8ec779e" />

cc @terpimost @alya 
https://github.com/zulip/zulip/pull/34890 is a Help Center PR that's written for the app before this change; we should update it after this change lands :)
> Do we know which specific icon we want?
> 
> Current "TOPICS" button:
> <img alt="Image" width="818" src="https://private-user-images.githubusercontent.com/22248748/455030123-6c404d0d-c6bf-4be8-ab30-d1e9f2c2405a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NTA3NTc2MjEsIm5iZiI6MTc1MDc1NzMyMSwicGF0aCI6Ii8yMjI0ODc0OC80NTUwMzAxMjMtNmM0MDRkMGQtYzZiZi00YmU4LWFiMzAtZDFlOWYyYzI0MDVhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTA2MjQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwNjI0VDA5Mjg0MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTc5YTAxOTgyNjExNGYxZjFiZWJkMzViMGI1MDkyM2Q4OTcwY2VkNjNlNTdjZDI5OGE2OWRmM2RlOTRiOTliMWQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.cN5fWX75rGCwR0xvEO526DUs89UWFfgj-OmbCFX8rTM">
> 
> Could be replaced with, e.g.:
> 
> https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=8996-27909&m=dev
> <img alt="Image" width="219" src="https://private-user-images.githubusercontent.com/22248748/455029829-e982b979-01ff-4a8d-abea-5b384e6a6a76.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NTA3NTc2MjEsIm5iZiI6MTc1MDc1NzMyMSwicGF0aCI6Ii8yMjI0ODc0OC80NTUwMjk4MjktZTk4MmI5NzktMDFmZi00YThkLWFiZWEtNWIzODRlNmE2YTc2LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTA2MjQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwNjI0VDA5Mjg0MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTE1OWI1N2Y4YmI4NjMzMzczMTZjOWIzNWJiNjQzZmExNDk3OTA3ODZhZTdhOTMwNTI0NWZmNDZkODE1MDRkOTkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.CV3cXhbtViLKoQNoAZpU68AEajmWJ95syVRKenlaDqs">
> 
> (are those two identical?)
> 
> Or e.g.:
> <img alt="Image" width="795" src="https://private-user-images.githubusercontent.com/22248748/455029968-f57eaef0-a7d8-44b5-8f11-c69af8ec779e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NTA3NTc2MjEsIm5iZiI6MTc1MDc1NzMyMSwicGF0aCI6Ii8yMjI0ODc0OC80NTUwMjk5NjgtZjU3ZWFlZjAtYTdkOC00NGI1LThmMTEtYzY5YWY4ZWM3NzllLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTA2MjQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwNjI0VDA5Mjg0MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTAxNzdjNGEwMDViMDNhYTA4MjcyMmMxNDU4YTcxNTYwMWEzOWIzZDc0MmI1ODk1ZDBlMmIyMWYyODgyMmU5NzAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.-15eW3GswZmL08ZnKJTAhJkiBqjNxKAyvclzJOydaSo">
> 
> cc [@terpimost](https://github.com/terpimost) [@alya](https://github.com/alya)

@chrisbobbe Judging from `assets/icons/topics.svg`, the first icon is the correct one.
#1625
@gnprice 
Could you assign this issue to me?
I went through a difficult time mentally earlier and couldn't reply sooner, but I'm all set now.

Pull request: msglist: Use icon for topic-list button in app bar
Our initial implementation of https://github.com/zulip/zulip-flutter/issues/1158, in https://github.com/zulip/zulip-flutter/pull/1500, uses the word "TOPICS" for the app-bar action/button leading to the topic-list page, following the design in Figma.

We want to change it to use a "list" icon instead. This is in order to let it occupy less space, especially in languages where the translation of "TOPICS" might be long.

| light | dark |
|----|----|
| ![Simulator Screenshot - iPhone 16 Pro - 2025-06-25 at 17 01 07](https://github.com/user-attachments/assets/a275f2b1-dadd-4175-94b1-f28b02fb0ca8) | ![Simulator Screenshot - iPhone 16 Pro - 2025-06-25 at 17 01 53](https://github.com/user-attachments/assets/8d9b7df9-b96b-4938-9403-a2f9ec019703) |
| ![Simulator Screenshot - iPhone 16 Pro - 2025-06-25 at 17 01 30](https://github.com/user-attachments/assets/f3172c28-e669-4e4f-b84c-d330893d2a5f) | ![Simulator Screenshot - iPhone 16 Pro - 2025-06-25 at 17 01 45](https://github.com/user-attachments/assets/15dacf95-a025-41be-8b1e-675163f09864) |

resolves #1532

Test command: flutter test test/widgets/message_list_test.dart test/widgets/topic_list_test.dart --reporter expanded 2>&1

Fix patch:
diff --git a/assets/l10n/app_de.arb b/assets/l10n/app_de.arb
index aa89465183..819b687ea4 100644
--- a/assets/l10n/app_de.arb
+++ b/assets/l10n/app_de.arb
@@ -427,9 +427,9 @@
       }
     }
   },
-  "topicsButtonLabel": "THEMEN",
-  "@topicsButtonLabel": {
-    "description": "Label for message list button leading to topic-list page. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)"
+  "topicsButtonTooltip": "Themen",
+  "@topicsButtonTooltip": {
+    "description": "Tooltip for button to navigate to topic-list page."
   },
   "markReadOnScrollSettingTitle": "Nachrichten beim Scrollen als gelesen markieren",
   "@markReadOnScrollSettingTitle": {
diff --git a/assets/l10n/app_en.arb b/assets/l10n/app_en.arb
index b4ad14149a..653f956596 100644
--- a/assets/l10n/app_en.arb
+++ b/assets/l10n/app_en.arb
@@ -853,9 +853,9 @@
   "@mainMenuMyProfile": {
     "description": "Label for main-menu button leading to the user's own profile."
   },
-  "topicsButtonLabel": "TOPICS",
-  "@topicsButtonLabel": {
-    "description": "Label for message list button leading to topic-list page. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)"
+  "topicsButtonTooltip": "Topics",
+  "@topicsButtonTooltip": {
+    "description": "Tooltip for button to navigate to topic-list page."
   },
   "channelFeedButtonTooltip": "Channel feed",
   "@channelFeedButtonTooltip": {
diff --git a/assets/l10n/app_it.arb b/assets/l10n/app_it.arb
index 6771c4368d..ad9ece2ce2 100644
--- a/assets/l10n/app_it.arb
+++ b/assets/l10n/app_it.arb
@@ -949,9 +949,9 @@
   "@mainMenuMyProfile": {
     "description": "Label for main-menu button leading to the user's own profile."
   },
-  "topicsButtonLabel": "ARGOMENTI",
-  "@topicsButtonLabel": {
-    "description": "Label for message list button leading to topic-list page. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)"
+  "topicsButtonTooltip": "Argomenti",
+  "@topicsButtonTooltip": {
+    "description": "Tooltip for button to navigate to topic-list page."
   },
   "reactedEmojiSelfUser": "Tu",
   "@reactedEmojiSelfUser": {
diff --git a/assets/l10n/app_pl.arb b/assets/l10n/app_pl.arb
index e35905b5ba..8aca7248a5 100644
--- a/assets/l10n/app_pl.arb
+++ b/assets/l10n/app_pl.arb
@@ -1061,9 +1061,9 @@
   "@composeBoxBannerButtonSave": {
     "description": "Label text for the 'Save' button in the compose-box banner when you are editing a message."
   },
-  "topicsButtonLabel": "WĄTKI",
-  "@topicsButtonLabel": {
-    "description": "Label for message list button leading to topic-list page. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)"
+  "topicsButtonTooltip": "Wątki",
+  "@topicsButtonTooltip": {
+    "description": "Tooltip for button to navigate to topic-list page."
   },
   "actionSheetOptionListOfTopics": "Lista wątków",
   "@actionSheetOptionListOfTopics": {
diff --git a/assets/l10n/app_ru.arb b/assets/l10n/app_ru.arb
index fd066813d2..a45e84a2f8 100644
--- a/assets/l10n/app_ru.arb
+++ b/assets/l10n/app_ru.arb
@@ -1065,9 +1065,9 @@
   "@actionSheetOptionListOfTopics": {
     "description": "Label for navigating to a channel's topic-list page."
   },
-  "topicsButtonLabel": "ТЕМЫ",
-  "@topicsButtonLabel": {
-    "description": "Label for message list button leading to topic-list page. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)"
+  "topicsButtonTooltip": "Темы",
+  "@topicsButtonTooltip": {
+    "description": "Tooltip for button to navigate to topic-list page."
   },
   "newDmSheetSearchHintEmpty": "Добавить пользователей",
   "@newDmSheetSearchHintEmpty": {
diff --git a/assets/l10n/app_sl.arb b/assets/l10n/app_sl.arb
index 6131411e54..8b0dfad5db 100644
--- a/assets/l10n/app_sl.arb
+++ b/assets/l10n/app_sl.arb
@@ -731,9 +731,9 @@
   "@mainMenuMyProfile": {
     "description": "Label for main-menu button leading to the user's own profile."
   },
-  "topicsButtonLabel": "TEME",
-  "@topicsButtonLabel": {
-    "description": "Label for message list button leading to topic-list page. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)"
+  "topicsButtonTooltip": "Teme",
+  "@topicsButtonTooltip": {
+    "description": "Tooltip for button to navigate to topic-list page."
   },
   "channelFeedButtonTooltip": "Sporočila kanala",
   "@channelFeedButtonTooltip": {
diff --git a/assets/l10n/app_uk.arb b/assets/l10n/app_uk.arb
index 6a6c217cd6..a83421c686 100644
--- a/assets/l10n/app_uk.arb
+++ b/assets/l10n/app_uk.arb
@@ -1031,9 +1031,9 @@
   "@editAlreadyInProgressTitle": {
     "description": "Error title when a message edit cannot be saved because there is another edit already in progress."
   },
-  "topicsButtonLabel": "ТЕМИ",
-  "@topicsButtonLabel": {
-    "description": "Label for message list button leading to topic-list page. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)"
+  "topicsButtonTooltip": "Теми",
+  "@topicsButtonTooltip": {
+    "description": "Tooltip for button to navigate to topic-list page."
   },
   "actionSheetOptionHideMutedMessage": "Сховати заглушене повідомлення",
   "@actionSheetOptionHideMutedMessage": {
diff --git a/assets/l10n/app_zh_Hans_CN.arb b/assets/l10n/app_zh_Hans_CN.arb
index 806f96eda9..e47d033f4b 100644
--- a/assets/l10n/app_zh_Hans_CN.arb
+++ b/assets/l10n/app_zh_Hans_CN.arb
@@ -1083,9 +1083,9 @@
   "@mainMenuMyProfile": {
     "description": "Label for main-menu button leading to the user's own profile."
   },
-  "topicsButtonLabel": "话题",
-  "@topicsButtonLabel": {
-    "description": "Label for message list button leading to topic-list page. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)"
+  "topicsButtonTooltip": "话题",
+  "@topicsButtonTooltip": {
+    "description": "Tooltip for button to navigate to topic-list page."
   },
   "notifSelfUser": "您",
   "@notifSelfUser": {
diff --git a/assets/l10n/app_zh_Hant_TW.arb b/assets/l10n/app_zh_Hant_TW.arb
index 651a3d15f8..7fe1f37b91 100644
--- a/assets/l10n/app_zh_Hant_TW.arb
+++ b/assets/l10n/app_zh_Hant_TW.arb
@@ -423,9 +423,9 @@
       }
     }
   },
-  "topicsButtonLabel": "話題",
-  "@topicsButtonLabel": {
-    "description": "Label for message list button leading to topic-list page. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)"
+  "topicsButtonTooltip": "話題",
+  "@topicsButtonTooltip": {
+    "description": "Tooltip for button to navigate to topic-list page."
   },
   "themeSettingLight": "淺色主題",
   "@themeSettingLight": {
diff --git a/lib/generated/l10n/zulip_localizations.dart b/lib/generated/l10n/zulip_localizations.dart
index bdd5d60bdb..db7bd64173 100644
--- a/lib/generated/l10n/zulip_localizations.dart
+++ b/lib/generated/l10n/zulip_localizations.dart
@@ -1293,11 +1293,11 @@ abstract class ZulipLocalizations {
   /// **'My profile'**
   String get mainMenuMyProfile;
 
-  /// Label for message list button leading to topic-list page. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)
+  /// Tooltip for button to navigate to topic-list page.
   ///
   /// In en, this message translates to:
-  /// **'TOPICS'**
-  String get topicsButtonLabel;
+  /// **'Topics'**
+  String get topicsButtonTooltip;
 
   /// Tooltip for button to navigate to a given channel's feed
   ///
diff --git a/lib/generated/l10n/zulip_localizations_ar.dart b/lib/generated/l10n/zulip_localizations_ar.dart
index 22e1f04fc4..e1b7e2cf52 100644
--- a/lib/generated/l10n/zulip_localizations_ar.dart
+++ b/lib/generated/l10n/zulip_localizations_ar.dart
@@ -699,7 +699,7 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
   String get mainMenuMyProfile => 'My profile';
 
   @override
-  String get topicsButtonLabel => 'TOPICS';
+  String get topicsButtonTooltip => 'Topics';
 
   @override
   String get channelFeedButtonTooltip => 'Channel feed';
diff --git a/lib/generated/l10n/zulip_localizations_de.dart b/lib/generated/l10n/zulip_localizations_de.dart
index 74e5402693..de313355d4 100644
--- a/lib/generated/l10n/zulip_localizations_de.dart
+++ b/lib/generated/l10n/zulip_localizations_de.dart
@@ -719,7 +719,7 @@ class ZulipLocalizationsDe extends ZulipLocalizations {
   String get mainMenuMyProfile => 'Mein Profil';
 
   @override
-  String get topicsButtonLabel => 'THEMEN';
+  String get topicsButtonTooltip => 'Themen';
 
   @override
   String get channelFeedButtonTooltip => 'Kanal-Feed';
diff --git a/lib/generated/l10n/zulip_localizations_en.dart b/lib/generated/l10n/zulip_localizations_en.dart
index cad9183a94..4a0d148c2b 100644
--- a/lib/generated/l10n/zulip_localizations_en.dart
+++ b/lib/generated/l10n/zulip_localizations_en.dart
@@ -699,7 +699,7 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
   String get mainMenuMyProfile => 'My profile';
 
   @override
-  String get topicsButtonLabel => 'TOPICS';
+  String get topicsButtonTooltip => 'Topics';
 
   @override
   String get channelFeedButtonTooltip => 'Channel feed';
diff --git a/lib/generated/l10n/zulip_localizations_it.dart b/lib/generated/l10n/zulip_localizations_it.dart
index 5f85cce756..5bb56b6f41 100644
--- a/lib/generated/l10n/zulip_localizations_it.dart
+++ b/lib/generated/l10n/zulip_localizations_it.dart
@@ -714,7 +714,7 @@ class ZulipLocalizationsIt extends ZulipLocalizations {
   String get mainMenuMyProfile => 'Il mio profilo';
 
   @override
-  String get topicsButtonLabel => 'ARGOMENTI';
+  String get topicsButtonTooltip => 'Argomenti';
 
   @override
   String get channelFeedButtonTooltip => 'Feed del canale';
diff --git a/lib/generated/l10n/zulip_localizations_ja.dart b/lib/generated/l10n/zulip_localizations_ja.dart
index b2eb5fc7b0..4c49121785 100644
--- a/lib/generated/l10n/zulip_localizations_ja.dart
+++ b/lib/generated/l10n/zulip_localizations_ja.dart
@@ -699,7 +699,7 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
   String get mainMenuMyProfile => 'My profile';
 
   @override
-  String get topicsButtonLabel => 'TOPICS';
+  String get topicsButtonTooltip => 'Topics';
 
   @override
   String get channelFeedButtonTooltip => 'Channel feed';
diff --git a/lib/generated/l10n/zulip_localizations_nb.dart b/lib/generated/l10n/zulip_localizations_nb.dart
index 8744729a26..c0353e1789 100644
--- a/lib/generated/l10n/zulip_localizations_nb.dart
+++ b/lib/generated/l10n/zulip_localizations_nb.dart
@@ -699,7 +699,7 @@ class ZulipLocalizationsNb extends ZulipLocalizations {
   String get mainMenuMyProfile => 'My profile';
 
   @override
-  String get topicsButtonLabel => 'TOPICS';
+  String get topicsButtonTooltip => 'Topics';
 
   @override
   String get channelFeedButtonTooltip => 'Channel feed';
diff --git a/lib/generated/l10n/zulip_localizations_pl.dart b/lib/generated/l10n/zulip_localizations_pl.dart
index 1471e2736e..92407f9783 100644
--- a/lib/generated/l10n/zulip_localizations_pl.dart
+++ b/lib/generated/l10n/zulip_localizations_pl.dart
@@ -709,7 +709,7 @@ class ZulipLocalizationsPl extends ZulipLocalizations {
   String get mainMenuMyProfile => 'Mój profil';
 
   @override
-  String get topicsButtonLabel => 'WĄTKI';
+  String get topicsButtonTooltip => 'Wątki';
 
   @override
   String get channelFeedButtonTooltip => 'Strumień kanału';
diff --git a/lib/generated/l10n/zulip_localizations_ru.dart b/lib/generated/l10n/zulip_localizations_ru.dart
index 20c6a54bb6..8d174186d1 100644
--- a/lib/generated/l10n/zulip_localizations_ru.dart
+++ b/lib/generated/l10n/zulip_localizations_ru.dart
@@ -713,7 +713,7 @@ class ZulipLocalizationsRu extends ZulipLocalizations {
   String get mainMenuMyProfile => 'Мой профиль';
 
   @override
-  String get topicsButtonLabel => 'ТЕМЫ';
+  String get topicsButtonTooltip => 'Темы';
 
   @override
   String get channelFeedButtonTooltip => 'Лента канала';
diff --git a/lib/generated/l10n/zulip_localizations_sk.dart b/lib/generated/l10n/zulip_localizations_sk.dart
index 24797fad32..b73d4bee18 100644
--- a/lib/generated/l10n/zulip_localizations_sk.dart
+++ b/lib/generated/l10n/zulip_localizations_sk.dart
@@ -701,7 +701,7 @@ class ZulipLocalizationsSk extends ZulipLocalizations {
   String get mainMenuMyProfile => 'Môj profil';
 
   @override
-  String get topicsButtonLabel => 'TOPICS';
+  String get topicsButtonTooltip => 'Topics';
 
   @override
   String get channelFeedButtonTooltip => 'Channel feed';
diff --git a/lib/generated/l10n/zulip_localizations_sl.dart b/lib/generated/l10n/zulip_localizations_sl.dart
index c298af9351..39de9af735 100644
--- a/lib/generated/l10n/zulip_localizations_sl.dart
+++ b/lib/generated/l10n/zulip_localizations_sl.dart
@@ -724,7 +724,7 @@ class ZulipLocalizationsSl extends ZulipLocalizations {
   String get mainMenuMyProfile => 'Moj profil';
 
   @override
-  String get topicsButtonLabel => 'TEME';
+  String get topicsButtonTooltip => 'Teme';
 
   @override
   String get channelFeedButtonTooltip => 'Sporočila kanala';
diff --git a/lib/generated/l10n/zulip_localizations_uk.dart b/lib/generated/l10n/zulip_localizations_uk.dart
index 82e07f3634..74edee1d1e 100644
--- a/lib/generated/l10n/zulip_localizations_uk.dart
+++ b/lib/generated/l10n/zulip_localizations_uk.dart
@@ -712,7 +712,7 @@ class ZulipLocalizationsUk extends ZulipLocalizations {
   String get mainMenuMyProfile => 'Мій профіль';
 
   @override
-  String get topicsButtonLabel => 'ТЕМИ';
+  String get topicsButtonTooltip => 'Теми';
 
   @override
   String get channelFeedButtonTooltip => 'Стрічка каналу';
diff --git a/lib/generated/l10n/zulip_localizations_zh.dart b/lib/generated/l10n/zulip_localizations_zh.dart
index a5ab16e499..d6b673fae4 100644
--- a/lib/generated/l10n/zulip_localizations_zh.dart
+++ b/lib/generated/l10n/zulip_localizations_zh.dart
@@ -699,7 +699,7 @@ class ZulipLocalizationsZh extends ZulipLocalizations {
   String get mainMenuMyProfile => 'My profile';
 
   @override
-  String get topicsButtonLabel => 'TOPICS';
+  String get topicsButtonTooltip => 'Topics';
 
   @override
   String get channelFeedButtonTooltip => 'Channel feed';
@@ -1534,7 +1534,7 @@ class ZulipLocalizationsZhHansCn extends ZulipLocalizationsZh {
   String get mainMenuMyProfile => '个人资料';
 
   @override
-  String get topicsButtonLabel => '话题';
+  String get topicsButtonTooltip => '话题';
 
   @override
   String get channelFeedButtonTooltip => '频道订阅';
@@ -2084,7 +2084,7 @@ class ZulipLocalizationsZhHantTw extends ZulipLocalizationsZh {
   String get channelsPageTitle => '頻道';
 
   @override
-  String get topicsButtonLabel => '話題';
+  String get topicsButtonTooltip => '話題';
 
   @override
   String get channelFeedButtonTooltip => '頻道饋給';
diff --git a/lib/widgets/message_list.dart b/lib/widgets/message_list.dart
index de890bfc6b..00fca21b16 100644
--- a/lib/widgets/message_list.dart
+++ b/lib/widgets/message_list.dart
@@ -459,24 +459,12 @@ class _TopicListButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final zulipLocalizations = ZulipLocalizations.of(context);
-    final designVariables = DesignVariables.of(context);
-    return GestureDetector(
-      onTap: () {
-        Navigator.of(context).push(TopicListPage.buildRoute(
-          context: context, streamId: streamId));
-      },
-      behavior: HitTestBehavior.opaque,
-      child: Padding(
-        padding: EdgeInsetsDirectional.fromSTEB(12, 8, 12, 8),
-        child: Center(child: Text(zulipLocalizations.topicsButtonLabel,
-          style: TextStyle(
-            color: designVariables.icon,
-            fontSize: 18,
-            height: 19 / 18,
-            // This is equivalent to css `all-small-caps`, see:
-            //   https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps#all-small-caps
-            fontFeatures: const [FontFeature.enable('c2sc'), FontFeature.enable('smcp')],
-          ).merge(weightVariableTextStyle(context, wght: 600))))));
+    return IconButton(
+      icon: const Icon(ZulipIcons.topics),
+      tooltip: zulipLocalizations.topicsButtonTooltip,
+      onPressed: () => Navigator.push(context,
+        TopicListPage.buildRoute(context: context,
+          streamId: streamId)));
   }
 }
 


Test patch:
diff --git a/test/widgets/message_list_test.dart b/test/widgets/message_list_test.dart
index 70d204a101..d068e12ed5 100644
--- a/test/widgets/message_list_test.dart
+++ b/test/widgets/message_list_test.dart
@@ -288,7 +288,7 @@ void main() {
       connection.prepare(json: GetStreamTopicsResult(topics: [
         eg.getStreamTopicsEntry(name: 'topic foo'),
       ]).toJson());
-      await tester.tap(find.text('TOPICS'));
+      await tester.tap(find.byIcon(ZulipIcons.topics));
       await tester.pump(); // tap the button
       await tester.pump(Duration.zero); // wait for request
       check(find.descendant(
@@ -323,7 +323,7 @@ void main() {
       connection.prepare(json: GetStreamTopicsResult(topics: [
         eg.getStreamTopicsEntry(name: 'topic foo'),
       ]).toJson());
-      await tester.tap(find.text('TOPICS'));
+      await tester.tap(find.byIcon(ZulipIcons.topics));
       await tester.pump(); // tap the button
       await tester.pump(Duration.zero); // wait for request
       check(find.descendant(
diff --git a/test/widgets/topic_list_test.dart b/test/widgets/topic_list_test.dart
index f87ddaf1ee..1cd9c4bb26 100644
--- a/test/widgets/topic_list_test.dart
+++ b/test/widgets/topic_list_test.dart
@@ -142,7 +142,7 @@ void main() {
     // Tap "TOPICS" button navigating to the topic-list page…
     connection.prepare(json: GetStreamTopicsResult(
       topics: [eg.getStreamTopicsEntry(name: 'topic A')]).toJson());
-    await tester.tap(find.text('TOPICS'));
+    await tester.tap(find.byIcon(ZulipIcons.topics));
     await tester.pump();
     await tester.pump(Duration.zero);
     check(find.text('topic A')).findsOne();
@@ -154,7 +154,7 @@ void main() {
     // … then back to the topic-list page, expecting to fetch again.
     connection.prepare(json: GetStreamTopicsResult(
       topics: [eg.getStreamTopicsEntry(name: 'topic B')]).toJson());
-    await tester.tap(find.text('TOPICS'));
+    await tester.tap(find.byIcon(ZulipIcons.topics));
     await tester.pump();
     await tester.pump(Duration.zero);
     check(find.text('topic A')).findsNothing();