Replacing Icons in the left menu

[aVe2000 13]

hello together,

i am new with emby and i try to optimize my experience with emby. I added all my libraries. Now i have many libs in the left menu with the same icons, e.g. music and audiobooks. Both have headphones as icons. Also Series and recorded series have the same icon. I'd like to change this via css. Therefore i had a long chat with chatgpt. After 20 iterations or so we came to a kind of solution (please ignore the graphics, its not final, first i wanted to get it working).

Here is my code:

/* Removes the old icon and sets a new icon only for the "Musik" library */
div[title="Musik"] i.navDrawerListItemIcon.listItemIcon.md-icon.autortl {
    background-image: none !important; /* Removes the old background image */
    display: none !important; /* Hides the old icon */
}

/* Adds a new icon for the "Musik" library and positions it */
div[title="Musik"]::before {
    content: url('http://nas/music-note-icon.png');
    display: inline-block;
    /*background-image: url('http://nas/music-note-icon.png');*/
    background-size: contain;
    width: 24px; /* Adjust the size of the icon as needed */
    height: 24px; /* Adjust the size of the icon as needed */
    margin-right: 8px; /* Optional: Adjust the spacing to the text */
    position: absolute; /* Sets the position to absolute */
    left: 0; /* Positions the icon exactly */
}

/* Corrects the text padding */
div[title="Musik"] {
    display: flex;
    align-items: center; /* Vertically centers text and icon */
    padding-left: 32px; /* Adjusts the text padding */
}

/* Ensures the new icon remains visible on hover */
div[title="Musik"]:hover::before {
    /*content: url('http://nas/music-note-icon.png');*/
    background-image: url('http://nas/music-note-icon.png') !important;
    background-size: contain;
}

The image is stored at my nas so the url represents a local image.

So, as i said, its kind of working. But its not nice. Here are the screenshots of the normal and hovered version:

You can see, the background only changes for the icon, not the text anymore. And the images position changed a bit (maybe 5 Pixels up) while hovered.

Is this the right way and could someone support me here? Thank you very much in advance.

Kind regards.

Edited October 19, 2024 by aVe2000

[Happy2Play 9780]

You are better off with google font material icons instead of actual images, but just a matter of if there is a font icon you want exists.

Using the same concept from that post "title=xxxxxxxxxxxxxxxx" will be specific to your setup as you have already shown above.

div[title="Music - emby metadata"] i.navDrawerListItemIcon.listItemIcon.md-icon.autortl {
visibility:hidden;
content: '';
}

div[title="Music - emby metadata"] i.navDrawerListItemIcon.listItemIcon.md-icon.autortl:before {
        visibility: visible;
        position: absolute;
        content: "music_note";
        color: red;
}

 

But using your image.

Just have to change TITLE to your setup and obviously content path.

div[title="Music - emby metadata"] i.navDrawerListItemIcon.listItemIcon.md-icon.autortl {
visibility:hidden;
content: '';
}

div[title="Music - emby metadata"] i.navDrawerListItemIcon.listItemIcon.md-icon.autortl:before {
    visibility: visible;
    content: url(/web/Custom_Images/music-note-icon.png);
    left: 5px;
    position: relative;
}

Note I used a custom folder I place in /system/dashboard-ui folder with every update so custom images are contained with the server.  But some installs/platforms are a little harder to get to that location.

And resizing icon to 20x20 instead of 24x24

Edited October 20, 2024 by Happy2Play

[aVe2000 13]

Hello Happy2Play,

you really are amazing, especially regarding your helpfulness. Thank you very much. And of course: its working and i am nearly happy now.