CSS: Pinned sidebar materials icon change

[Beenzino 2]

Hi all, I am trying to change the icons on the sidebar, since I've got several movies and tv shows library and customising their icons would help in terms of identification and aesthetics.

I found this with inspect elements, and found out that changing that highlighted box into the desired name of icon (e.g. New_releases) works, the question now is how do I write a custom CSS code for this.

I've read through this post and the generous solution written by @Happy2Play, but I don't think it works anymore.

I know nothing about coding, I tried adapting the codes in that post into something like this, which did not work (wasn't expecting it to work since I'm terrible at coding):

body > div.mainDrawer.focuscontainer-y.padded-bottom-page.emby-scroller.scrollY.scrollFrameY.hiddenScrollY-hover.scrollY-mini.drawer-docked.drawer-open.mainDrawer-mini > div > div:nth-child(3) > div > button:nth-child(1) > div > div.navDrawerListItemImageContainer.listItemImageContainer.listItemImageContainer-backdrop > i {

    content: "new_releases";

}

 

Thanks all.

[Luke 42077]

Hi, what are you trying to change?

[Beenzino 2]

15 minutes ago, Luke said:

Hi, what are you trying to change?

Hello, just the icons on the sidebar. Basically what was done in the post I referenced, but I don't think that solution works anymore.

[Beenzino 2]

*Update:

@LukeHi, found a solution. I copied the JS path I found in inspect elements, pasted it in ChatGPT, asked it to write a custom css code to modify this element and change it to a material icon, it gave me this:

body > div.mainDrawer.focuscontainer-y.padded-bottom-page.emby-scroller.scrollY.scrollFrameY.hiddenScrollY-hover.scrollY-mini.drawer-docked.drawer-open.mainDrawer-mini > div > div:nth-child(3) > div > button:nth-child(5) > div > div.navDrawerListItemImageContainer.listItemImageContainer.listItemImageContainer-backdrop > i.navDrawerListItemIcon.listItemIcon.md-icon.autortl { 
  visibility: hidden;
  content: ""; 
}


body > div.mainDrawer.focuscontainer-y.padded-bottom-page.emby-scroller.scrollY.scrollFrameY.hiddenScrollY-hover.scrollY-mini.drawer-docked.drawer-open.mainDrawer-mini > div > div:nth-child(3) > div > button:nth-child(5) > div > div.navDrawerListItemImageContainer.listItemImageContainer.listItemImageContainer-backdrop > i.navDrawerListItemIcon.listItemIcon.md-icon.autortl::before {
  visibility: visible; 
  position: absolute; 
  font-family: 'Material Icons Round';
  content: "flutter_dash"; 
}

Worked (very similar to the solution @Happy2Playposted, but pathing is a bit different, probably why it didn't work when I tried). Damn technology has advanced.

 

Extra query: Emby does have the materials icon font locally, though some icons I'd like is in the newer materials symbol font pack. I tried:

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');

Didn't work, checked Networks tab in inspect, font didn't load. Tried the same @import with another text font, worked and imported. I wonder why is that, probably a licensing issue? But either way I''m happy with what I have right now as well. Sharing my experience here if it helps anyone.