From f3655a2e3f5d20dce192bdc09e1651f7ff653eb3 Mon Sep 17 00:00:00 2001
From: lscambo13 <ls.cambo13@gmail.com>
Date: Mon, 17 Mar 2025 06:36:01 -0700
Subject: [PATCH] Fix: Added a workaround for incompatible icons on WebOS

---
 README.md                          | 21 +++++++++++++++++----
 Theme/ElegantFin-theme-nightly.css | 19 ++++++++++---------
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index 07bf93c..7525011 100644
--- a/README.md
+++ b/README.md
@@ -86,7 +86,7 @@ https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef
   <summary>1️⃣ - <i>How do I check if I am using the latest version on ElegantFin?</i></summary>
 
 - To make sure that you are using the latest version of ElegantFin, check the version number at the bottom in the Dashboard screen. 
-- It should be something like ElegantFin v24.12.XX
+- It should be something like ElegantFin v25.03.XX
 </details>
 
 <details>
@@ -103,11 +103,24 @@ https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef
   <summary>3️⃣ - <i>Why do I notice visual bugs and inconsistencies on Jellyfin Media Player?</i></summary>
 
 - Currently JMP uses Qt 5.x which uses an outdated web engine, so many new CSS features do not work. Once they release a new version based on Qt 6.x, most issues should automatically be resolved. Until then, I advise using the web app instead.
-- Are you not using JMP and still facing issues? See the 4th point below.
 </details>
 
 <details>
-  <summary>4️⃣ - <i>How do I report bugs/issues?</i></summary>
+  <summary>4️⃣ - <i>All the icons on my LG TV seem to be broken. How to fix?</i></summary>
+
+- It seems that modern Material Icons which this theme uses are [not compatible on some WebOS TVs](https://github.com/lscambo13/ElegantFin/issues/39). There is a [huge similar thread](https://www.reddit.com/r/youtubetv/comments/e27go3/chinese_symbols_instead_of_icons_on_lg_tv/) about this.
+- This bug can be fixed by using the older icons, so I have implemented the following workaround to bring back older, supported icons.
+- Simply add the following code at the end in Custom CSS box and save, then refresh your apps and webpages:
+  
+  ```
+  :root{
+    --iconPack: 'Material Icons';
+  }
+  ```
+</details>
+
+<details>
+  <summary>5️⃣ - <i>How do I report bugs/issues?</i></summary>
 
 - First check [here](https://github.com/lscambo13/ElegantFin/issues?q=) whether a similar issue has been reported already. If it exists, upvote and comment there to let me know. 
 - Alternatively, create a new issue [here](https://github.com/lscambo13/ElegantFin/issues/new/choose).
@@ -115,7 +128,7 @@ https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef
 
 </details>
 <details>
-  <summary>5️⃣ - <i>When can I expect another update?</i></summary>
+  <summary>6️⃣ - <i>When can I expect another update?</i></summary>
 
 - 🤷
 </details>
diff --git a/Theme/ElegantFin-theme-nightly.css b/Theme/ElegantFin-theme-nightly.css
index c99cb78..7929583 100644
--- a/Theme/ElegantFin-theme-nightly.css
+++ b/Theme/ElegantFin-theme-nightly.css
@@ -1323,13 +1323,14 @@ div[data-role=controlgroup] a.ui-btn-active {
     color: #fff !important;
 }
 
-.guide-date-tab-button.emby-tab-button-active, .guide-date-tab-button:focus {
+.guide-date-tab-button.emby-tab-button-active,
+.guide-date-tab-button:focus {
     color: white;
 }
 
 #btnDeleteImage,
 .button-delete,
-.btnRevoke  {
+.btnRevoke {
     background: var(--btnDeleteColor);
     border: solid var(--btnDeleteBorderColor) var(--borderWidth);
 }
@@ -1936,7 +1937,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 #liveTvSuggestedPage,
-.liveTvContainer{
+.liveTvContainer {
     background-color: var(--tableBodyColor);
 }
 
@@ -1946,7 +1947,7 @@ div[data-role=controlgroup] a.ui-btn-active {
     margin-block: .5em !important;
 }
 
-.guideVerticalScroller{
+.guideVerticalScroller {
     padding: 0;
 }
 
@@ -2015,7 +2016,7 @@ table:not(.MuiTable-root.MuiTable-stickyHeader) {
     overflow: hidden;
 }
 
-.detailTableHeaderCell{
+.detailTableHeaderCell {
     vertical-align: middle;
 }
 
@@ -2026,7 +2027,7 @@ table:not(.MuiTable-root.MuiTable-stickyHeader) {
 
 #serverActivityPage .MuiPaper-elevation2,
 #serverActivityPage .MuiPaper-elevation2>.MuiBox-root,
-#serverActivityPage .MuiTableRow-root.MuiTableRow-head{
+#serverActivityPage .MuiTableRow-root.MuiTableRow-head {
     background-color: var(--tableBodyColor);
 }
 
@@ -2367,12 +2368,12 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
     min-width: 72px;
 }
 
-.MuiTabs-flexContainer>.MuiButtonBase-root.Mui-selected{
+.MuiTabs-flexContainer>.MuiButtonBase-root.Mui-selected {
     color: white;
     background-color: transparent !important;
 }
 
-.MuiToggleButtonGroup-grouped.Mui-selected{
+.MuiToggleButtonGroup-grouped.Mui-selected {
     color: white;
 }
 
@@ -2381,6 +2382,6 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
     background-color: transparent;
 }
 
-#viewPanel .ui-panel-inner{
+#viewPanel .ui-panel-inner {
     margin-top: 4em;
 }
\ No newline at end of file