starred/audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2026-07-26 06:28:43 +02:00
Code Issues 454 Packages Projects Releases 10 Wiki Activity

[PR #1529] [MERGED] Replace Material icons with symbols #1609

New Issue
Closed
opened 2026-04-24 23:59:41 +02:00 by adam · 0 comments
adam commented 2026-04-24 23:59:41 +02:00
Owner
Copy Link
Copy Source

📋 Pull Request Information

Original PR: https://github.com/advplyr/audiobookshelf-app/pull/1529
Author: @nichwall
Created: 3/31/2025
Status: ✅ Merged
Merged: 4/6/2025
Merged by: @advplyr

Base: master ← Head: replace_icons_with_symbols

📝 Commits (8)

  • 6e0f67b Add woff2 fonts
  • 8cf757c Replace all material-icons with material-symbols
  • 71f6f53 Fix: app bar alignment
  • e119672 Fix: icon sizing and alignment issues
  • 0862aec Fix: fill for icons in side drawer
  • ff626a3 Fix sizing for bookshelf toolbar
  • b1c4ceb Replace: seek forward 10 seconds
  • 1b0843d Update Year in review icons, update some icons to be larger, fix read more/less, audio player use keyboard arrow down

📊 Changes

67 files changed (+263 additions, -265 deletions)

View changed files

📝 assets/fonts.css (+9 -33)
📝 components/app/Appbar.vue (+8 -6)
📝 components/app/AudioPlayer.vue (+14 -14)
📝 components/app/SideDrawer.vue (+3 -3)
📝 components/cards/LazyBookCard.vue (+5 -5)
📝 components/cards/LazyListBookCard.vue (+1 -1)
📝 components/cards/NarratorSearchCard.vue (+2 -2)
📝 components/cards/TagSearchCard.vue (+2 -2)
📝 components/connection/ServerConnectForm.vue (+6 -6)
📝 components/covers/PreviewCover.vue (+2 -2)
📝 components/home/BookshelfNavBar.vue (+5 -4)
📝 components/home/BookshelfToolbar.vue (+5 -5)
📝 components/modals/AutoSleepTimerRewindLengthModal.vue (+8 -5)
📝 components/modals/BookmarksModal.vue (+2 -2)
📝 components/modals/CustomHeadersModal.vue (+1 -1)
📝 components/modals/Dialog.vue (+1 -1)
📝 components/modals/FilterModal.vue (+2 -2)
📝 components/modals/Modal.vue (+2 -2)
📝 components/modals/OrderModal.vue (+1 -1)
📝 components/modals/PlaybackSpeedModal.vue (+3 -3)

...and 47 more files

📄 Description

Brief summary

Replace Material Icons with Material Symbols, similar to https://github.com/advplyr/audiobookshelf/pull/3138 and https://github.com/advplyr/audiobookshelf/pull/3291.

Which issue is fixed?

Fixes symbol definitions not existing for https://github.com/advplyr/audiobookshelf-app/pull/1526/files

In-depth Description

This PR replaces all instances of material-icons with material-symbols and updates alignment and sizing for the new symbol definitions. Some symbols look a little different due to using the rounded version.

I opted to only use WOFF2, similar to the web client. Additional reading is here.

How have you tested this?

Tested in a web browser (really just the settings page), and on a Pixel 6a.

Screenshots

The main differences in symbols are below: Seeking uses larger text, the expandable sections use a solid arrow, and the side menu has more rounded symbols.

seeking
expandable
image

🔄 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-app/pull/1529 **Author:** [@nichwall](https://github.com/nichwall) **Created:** 3/31/2025 **Status:** ✅ Merged **Merged:** 4/6/2025 **Merged by:** [@advplyr](https://github.com/advplyr) **Base:** `master` ← **Head:** `replace_icons_with_symbols` --- ### 📝 Commits (8) - [`6e0f67b`](https://github.com/advplyr/audiobookshelf-app/commit/6e0f67b19c1f93a33bee9950bbefb78a848fe86d) Add woff2 fonts - [`8cf757c`](https://github.com/advplyr/audiobookshelf-app/commit/8cf757c080ef72de29b7c179c1ff12ebcc3e6748) Replace all material-icons with material-symbols - [`71f6f53`](https://github.com/advplyr/audiobookshelf-app/commit/71f6f531111ee6b945114e0cb0e3a51c6b66beff) Fix: app bar alignment - [`e119672`](https://github.com/advplyr/audiobookshelf-app/commit/e1196723365db321fca96181a7b6f4b79c33c875) Fix: icon sizing and alignment issues - [`0862aec`](https://github.com/advplyr/audiobookshelf-app/commit/0862aecfc94e6064394e9a09ff7dd20128845a1c) Fix: fill for icons in side drawer - [`ff626a3`](https://github.com/advplyr/audiobookshelf-app/commit/ff626a36098b08432cb307f65be1958f9f1809aa) Fix sizing for bookshelf toolbar - [`b1c4ceb`](https://github.com/advplyr/audiobookshelf-app/commit/b1c4ceb40a4366693293eea2de0ab6a6cf0919ae) Replace: seek forward 10 seconds - [`1b0843d`](https://github.com/advplyr/audiobookshelf-app/commit/1b0843d12e5b78f2290aa43d533fe0c833dc2947) Update Year in review icons, update some icons to be larger, fix read more/less, audio player use keyboard arrow down ### 📊 Changes **67 files changed** (+263 additions, -265 deletions) <details> <summary>View changed files</summary> 📝 `assets/fonts.css` (+9 -33) 📝 `components/app/Appbar.vue` (+8 -6) 📝 `components/app/AudioPlayer.vue` (+14 -14) 📝 `components/app/SideDrawer.vue` (+3 -3) 📝 `components/cards/LazyBookCard.vue` (+5 -5) 📝 `components/cards/LazyListBookCard.vue` (+1 -1) 📝 `components/cards/NarratorSearchCard.vue` (+2 -2) 📝 `components/cards/TagSearchCard.vue` (+2 -2) 📝 `components/connection/ServerConnectForm.vue` (+6 -6) 📝 `components/covers/PreviewCover.vue` (+2 -2) 📝 `components/home/BookshelfNavBar.vue` (+5 -4) 📝 `components/home/BookshelfToolbar.vue` (+5 -5) 📝 `components/modals/AutoSleepTimerRewindLengthModal.vue` (+8 -5) 📝 `components/modals/BookmarksModal.vue` (+2 -2) 📝 `components/modals/CustomHeadersModal.vue` (+1 -1) 📝 `components/modals/Dialog.vue` (+1 -1) 📝 `components/modals/FilterModal.vue` (+2 -2) 📝 `components/modals/Modal.vue` (+2 -2) 📝 `components/modals/OrderModal.vue` (+1 -1) 📝 `components/modals/PlaybackSpeedModal.vue` (+3 -3) _...and 47 more files_ </details> ### 📄 Description <!-- For Work In Progress Pull Requests, please use the Draft PR feature, see https://github.blog/2019-02-14-introducing-draft-pull-requests/ for further details. If you do not follow this template, the PR may be closed without review. Please ensure all checks pass. If you are a new contributor, the workflows will need to be manually approved before they run. --> ## Brief summary Replace Material Icons with Material Symbols, similar to https://github.com/advplyr/audiobookshelf/pull/3138 and https://github.com/advplyr/audiobookshelf/pull/3291. ## Which issue is fixed? Fixes symbol definitions not existing for https://github.com/advplyr/audiobookshelf-app/pull/1526/files ## In-depth Description This PR replaces all instances of `material-icons` with `material-symbols` and updates alignment and sizing for the new symbol definitions. Some symbols look a little different due to using the rounded version. I opted to only use WOFF2, similar to the web client. Additional reading is [here](https://stackoverflow.com/questions/36105194/are-eot-ttf-and-svg-still-necessary-in-the-font-face-declaration/36110385#36110385). ## How have you tested this? Tested in a web browser (really just the settings page), and on a Pixel 6a. ## Screenshots The main differences in symbols are below: Seeking uses larger text, the expandable sections use a solid arrow, and the side menu has more rounded symbols. ![seeking](https://github.com/user-attachments/assets/5e743c2a-6eb0-401d-a9ad-9ed13ae43ff3) ![expandable](https://github.com/user-attachments/assets/03e0b86c-4526-4c92-90dd-9adad6dcbcc0) ![image](https://github.com/user-attachments/assets/014a992f-d7f2-460b-af20-64afdbcf7b25) --- <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-24 23:59:41 +02:00
adam closed this issue 2026-04-24 23:59:41 +02:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
android
android auto
backlog
bug
enhancement
ereader
help wanted
iOS
progress sync
pull-request
Mirrored from GitHub Pull Request
 sleep timer
unable to reproduce
waiting
No labels pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
adam (Adam Melkus)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/audiobookshelf-app#1609