[PR #4552] [MERGED] Replace some SVG icons with material-symbols #4285

Closed
opened 2026-04-25 00:19:08 +02:00 by adam · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/advplyr/audiobookshelf/pull/4552
Author: @Toby222
Created: 8/1/2025
Status: Merged
Merged: 8/13/2025
Merged by: @advplyr

Base: masterHead: master


📝 Commits (3)

  • 5ef632a Replace some SVG icons with material-symbols
  • 6365c02 Update explicit material symbols icon to fill
  • 751371a Update ReadIcon svg with material-symbols

📊 Changes

5 files changed (+14 additions, -78 deletions)

View changed files

📝 client/components/app/BookShelfToolbar.vue (+4 -15)
📝 client/components/app/SideRail.vue (+4 -15)
📝 client/components/stats/PreviewIcons.vue (+2 -6)
📝 client/components/ui/ReadIconBtn.vue (+3 -7)
📝 client/components/widgets/ExplicitIndicator.vue (+1 -35)

📄 Description

Brief summary

Follow-up to #4162 :⁾
Replaces some embedded SVG icons with their Material Symbols equivalents

Which issue is fixed?

Inconsistency in icons

In-depth Description

Did a search for svg in the codebase and picked at the low-hanging fruit of SVGs right next to material icons, then replaced the svgs with icon equivalents.

How have you tested this?

Ran with npm run prod and compared with non-dev server.

Screenshots

Before:
side bar before
explicit indicator before
stats page before

After:
side bar after
explicit indicator after
stats page after


🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/advplyr/audiobookshelf/pull/4552 **Author:** [@Toby222](https://github.com/Toby222) **Created:** 8/1/2025 **Status:** ✅ Merged **Merged:** 8/13/2025 **Merged by:** [@advplyr](https://github.com/advplyr) **Base:** `master` ← **Head:** `master` --- ### 📝 Commits (3) - [`5ef632a`](https://github.com/advplyr/audiobookshelf/commit/5ef632a7eb7e89753259a205a7d02e3a54cf5745) Replace some SVG icons with material-symbols - [`6365c02`](https://github.com/advplyr/audiobookshelf/commit/6365c0287564bac20f71119662f0c440c7734be3) Update explicit material symbols icon to fill - [`751371a`](https://github.com/advplyr/audiobookshelf/commit/751371abb89b98aa0811e196dc43dd937588422b) Update ReadIcon svg with material-symbols ### 📊 Changes **5 files changed** (+14 additions, -78 deletions) <details> <summary>View changed files</summary> 📝 `client/components/app/BookShelfToolbar.vue` (+4 -15) 📝 `client/components/app/SideRail.vue` (+4 -15) 📝 `client/components/stats/PreviewIcons.vue` (+2 -6) 📝 `client/components/ui/ReadIconBtn.vue` (+3 -7) 📝 `client/components/widgets/ExplicitIndicator.vue` (+1 -35) </details> ### 📄 Description ## Brief summary Follow-up to #4162 :⁾ Replaces some embedded SVG icons with their Material Symbols equivalents ## Which issue is fixed? Inconsistency in icons ## In-depth Description Did a search for `svg` in the codebase and picked at the low-hanging fruit of SVGs right next to material icons, then replaced the svgs with icon equivalents. ## How have you tested this? Ran with `npm run prod` and compared with non-dev server. ## Screenshots Before: <img width="121" height="831" alt="side bar before" src="https://github.com/user-attachments/assets/7a6b8ef8-db85-4d67-a594-c924637a9419" /> <img width="153" height="61" alt="explicit indicator before" src="https://github.com/user-attachments/assets/7b67a51d-bcdd-4a1b-a500-21245d35f2b2" /> <img width="1128" height="126" alt="stats page before" src="https://github.com/user-attachments/assets/c6be3f0d-d60c-4faa-8da3-2a7534d4df94" /> After: <img width="123" height="834" alt="side bar after" src="https://github.com/user-attachments/assets/52876d17-58f3-473a-a411-012ac543d30e" /> <img width="136" height="57" alt="explicit indicator after" src="https://github.com/user-attachments/assets/53c37bf0-b1b3-47ec-9efb-5532e744ab56" /> <img width="1075" height="168" alt="stats page after" src="https://github.com/user-attachments/assets/6030cd46-87bd-4fd0-9078-7e5788e60780" /> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
adam added the pull-request label 2026-04-25 00:19:08 +02:00
adam closed this issue 2026-04-25 00:19:08 +02:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/audiobookshelf#4285