CSS - Material Icons change

[BGman 4]

Can someone point me to where in the filesystem I can change Menu icon? Having too many issues trying to find exactly where to make the change.
I'm using Home videos & photos with folders.


 

 

Edited September 26, 2022 by BGman

[Happy2Play 8358]

Take a look at the cardbuilder.js.  But will look at possible css solution later.  Believe @chef has a topic around here also but was navdrawer icons

[chef 3750]

Yeah, those icons are part of the material design pack.

You can look here: https://materializecss.com/icons.html

 

For a list of common icons found in material design.

 

Then you would change the inner html of the <i> tag to change to icon.

 

Take a look in the navbar markup for md-icons.

 

 

I did do a write up somewhere on the fourm that showed how to change the icons to material design svgs.

It is slightly more difficult to do, but you use the custom css.

 

 

[BGman 4]

Hey @chef @Happy2Play thanks for the responses.. I'm wrapping my head around what you said right now.
I just wanted to respond to let you both know I got it.. and on it. 

[BGman 4]

@chef @Happy2Play
I've found the icon:

homevideos:""

 

But materialize doesn't reference their icons like this. Materialize uses:

<i class="material-icons">icon_name</i>

Or codepoint

ea29

let character = "\uea29";

So, is their a different icon set being used for web app navdrawer icons?


 

 

 

[chef 3750]

You could try changing the html for the icon code and see if that will work.

But remember any changes you make to the physical html file will be over written when emby updates.

 

The other option is to target the icon and change it in custom css.

Hide it, then use a pseudo (:after) element with the icon html in the content variable to write the html in place.

 

[roaku 797]

1 hour ago, BGman said:

@chef @Happy2Play
I've found the icon:

homevideos:""

 

But materialize doesn't reference their icons like this. Materialize uses:

<i class="material-icons">icon_name</i>

Or codepoint

ea29

let character = "\uea29";

So, is their a different icon set being used for web app navdrawer icons?


 

 

 

'e412' is the codepoint for the camera icon. The '&#x' is just a prefix for the hexadecimal format.

You can search here to find the icon you want and get the codepoint by clicking on it.

https://fonts.google.com/icons?icon.query=camera&icon.style=Filled&icon.set=Material+Icons

For example, search for 'camera' to find the icon Emby is using for 'homevideos'. It's the first result, named 'photo_camera' with codepoint 'e412'.

Edited September 26, 2022 by roaku

[BGman 4]

46 minutes ago, chef said:

You could try changing the html for the icon code and see if that will work.

But remember any changes you make to the physical html file will be over written when emby updates.

I would really like to change the html like you suggest because it would only be changed at this one location in the web app.
Also, I update manually.. so I would take heed when updating.

But I can't locate the exact html! Theres no html template file or templating system that I can locate. 

<div data-action="custom" class="navDrawerListItemImageContainer listItemImageContainer itemAction 
listItemImageContainer-square defaultCardBackground defaultCardBackground0" style="aspect-ratio:1">

<i class="navDrawerListItemIcon listItemIcon md-icon autortl"></i>

</div>

 

[chef 3750]

you can try this.

 

 

 

There it is....

 

Get the xpath, or figure out the target  yourself if you know.

 

Figure out your css... it will be something like this, but not exactly because your target will be different:

 :root /*Mess with these values to position the icon properly*/
 {
     --iconColor: rgba(0, 0, 0, 0.5) !important;
     --iconWidth: 24px;
     --iconHeight: 24px;
     --iconTop: 2px;
 }

/*Subtitles*/
     body > div.mainDrawer > div:nth-child(3) > div > button:nth-child(4) > div > div.listItemImageContainer.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i {        
        visibility: hidden;
    }
    
    body > div.mainDrawer > div:nth-child(3) > div > button:nth-child(4) > div > div.listItemImageContainer.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i:before {
        
        height: var(--iconHeight);
        content: '<i class="navdrawerListItemIcon listItemIcon md-icon autortl">NEW_ICON_HEX</i>';        
        visibility: visible;
        position: absolute;
        display: block;
        width: var(--iconWidth);
        margin-left: -2px;
        top: var(--iconTop);
    }

 

I'm not saying this is perfect css because it isn't tested, but it may help you see what you'd want to do.

It's maybe close to this.

 

 

EDIT: Sorry don't use XPATH!!!

Use "Copy Selector".

My bad!!

Edited September 26, 2022 by chef

[BGman 4]

I've literally replace every occurrence of &#xE412 with &#xEA29 in every code file!
obviously did hard refersh
restarted server

And yet, the camera icon remains. 

[chef 3750]

Just now, BGman said:

I've literally replace every occurrence of &#xE412 with &#xEA29 in every code file!
obviously did hard refersh
restarted server

And yet, the camera icon remains. 

Clear browsing data?

 

[BGman 4]

7 minutes ago, chef said:

you can try this.

EDIT: Sorry don't use XPATH!!!

Use "Copy Selector".

My bad!!

Yea I used copy selector.. thats the code block I put above already.

[chef 3750]

It's probably styled in the JavaScript.

I don't think the navbar is a template of any kind, so you may have to read through "dashboard-ui" folder to find the navbar JavaScript.

But, I would maybe try using custom css.

[BGman 4]

8 minutes ago, chef said:

It's probably styled in the JavaScript.

I don't think the navbar is a template of any kind, so you may have to read through "dashboard-ui" folder to find the navbar JavaScript.

But, I would maybe try using custom css.

Even if styled in js.. I changed all occurrences.. in all files.
And yes cleared browser.. AND used entirely diff browser.

This must be in db somewhere

Edited September 26, 2022 by BGman

[chef 3750]

Well, we can use css masks to change the icon if you want.

this changes the Camera icon to a Home icon....

 

 :root
                {
                    --iconColor: rgba(0, 0, 0, 0.5) !important;
                    --iconWidth: 24px;
                    --iconHeight: 24px;
                    --iconTop: 2px;
                }
body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-docked.drawer-open > div > div:nth-child(6) > div > div:nth-child(3) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i {
visibility:hidden;
content: '';
}

body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-docked.drawer-open > div > div:nth-child(6) > div > div:nth-child(3) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i:before {
        visibility: visible;
        position: absolute;
        content:"";
 height: var(--iconHeight);
                    content: '';
                    background-color: var(--iconColor);
                    visibility: visible;
                    position: absolute;
                    display: block;
                    width: var(--iconWidth);
                    margin-left: -2px;
                    top: var(--iconTop);
mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M12,3L20,9V21H15V14H9V21H4V9L12,3Z' /></svg>");
        -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M12,3L20,9V21H15V14H9V21H4V9L12,3Z' /></svg>");

}

 

[BGman 4]

3 minutes ago, chef said:

Well, we can use css masks to change the icon if you want.

this changes the Camera icon to a Home icon....

 

 :root
                {
                    --iconColor: rgba(0, 0, 0, 0.5) !important;
                    --iconWidth: 24px;
                    --iconHeight: 24px;
                    --iconTop: 2px;
                }
body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-docked.drawer-open > div > div:nth-child(6) > div > div:nth-child(3) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i {
visibility:hidden;
content: '';
}

body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-docked.drawer-open > div > div:nth-child(6) > div > div:nth-child(3) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i:before {
        visibility: visible;
        position: absolute;
        content:"";
 height: var(--iconHeight);
                    content: '';
                    background-color: var(--iconColor);
                    visibility: visible;
                    position: absolute;
                    display: block;
                    width: var(--iconWidth);
                    margin-left: -2px;
                    top: var(--iconTop);
mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M12,3L20,9V21H15V14H9V21H4V9L12,3Z' /></svg>");
        -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M12,3L20,9V21H15V14H9V21H4V9L12,3Z' /></svg>");

}

 

Just tried it... still the camera remains (yes cleared cache and history)

[chef 3750]

But, if you want to actually find the icon, it is in navdrawercontent.js starting on line 220. 

[BGman 4]

13 minutes ago, chef said:

Well, we can use css masks to change the icon if you want.

this changes the Camera icon to a Home icon....

 

 :root
                {
                    --iconColor: rgba(0, 0, 0, 0.5) !important;
                    --iconWidth: 24px;
                    --iconHeight: 24px;
                    --iconTop: 2px;
                }
body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-docked.drawer-open > div > div:nth-child(6) > div > div:nth-child(3) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i {
visibility:hidden;
content: '';
}

body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-docked.drawer-open > div > div:nth-child(6) > div > div:nth-child(3) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i:before {
        visibility: visible;
        position: absolute;
        content:"";
 height: var(--iconHeight);
                    content: '';
                    background-color: var(--iconColor);
                    visibility: visible;
                    position: absolute;
                    display: block;
                    width: var(--iconWidth);
                    margin-left: -2px;
                    top: var(--iconTop);
mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M12,3L20,9V21H15V14H9V21H4V9L12,3Z' /></svg>");
        -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M12,3L20,9V21H15V14H9V21H4V9L12,3Z' /></svg>");

}

 

I just noticed.. this works on the backend / admin dashboard.. does nothing on frontend

[chef 3750]

15 minutes ago, BGman said:

I just noticed.. this works on the backend / admin dashboard.. does nothing on frontend

Cool. 

We can change the icon in the web app, but unfortunately changes won't show on any of the other clients.

 

[BGman 4]

1 minute ago, chef said:

Cool. 

We can change the icon in the web app, but unfortunately changes won't show on any of the other clients.

 

Yes I know.. this is only for web app.
Unfortunately, your solution works on backend.. not frontend. Frontend is what I'm after.
 

[BGman 4]

@chef @Happy2Play @roaku
Thank you guys for the help!!! I got it working.. It appears hard refresh does nothing. I had to actually logout AND clear history and cache.. just to see this new icon smh!
I didn't go the css method, I changed the icon in filesystem.

But all of the pointers that you guys proposed helped me to learn.. and I thank you for that aswell!

[chef 3750]

55 minutes ago, BGman said:

@chef @Happy2Play @roaku
Thank you guys for the help!!! I got it working.. It appears hard refresh does nothing. I had to actually logout AND clear history and cache.. just to see this new icon smh!
I didn't go the css method, I changed the icon in filesystem.

But all of the pointers that you guys proposed helped me to learn.. and I thank you for that aswell!

Just remember that you'll have to make those changes again once the server updates. 

[Happy2Play 8358]

Finally internet is back up.

@BGman  Not sure what you are calling backend/frontend.  

CSS or edit server files only affects the local web client and has no affect on the online app or any other client.  So only browser connections directly via WANIP or DDNS address.

Easiest route here is script editing the js with every update, but this affects all icon not just one. 

From the browser console it can be impossible to see the code for the icon in some cases as the hex code does not appear as you have seen.

    <i class="navDrawerListItemIcon listItemIcon md-icon autortl"></i>

You can target [data-id=xxxxxxxxxxxxx] which is parentid for Home Screen items.  So if you have 5 libraries with this icon you can target 5 libraries with css differently.

Library example you need your library parentid

[data-type="home"] [data-id="f1ffda17fff72a19997ec7e667bb8d3c"] button  i {
visibility:hidden;
content: '';
}

[data-type="home"] [data-id="f1ffda17fff72a19997ec7e667bb8d3c"] button  i:before {
        visibility: visible;
        position: absolute;
        content:"\EA29";
}

But navdrawer is a little more difficult as you have two navdrawers using relatively the same code (Dashboard and everywhere else), so editing the third library on Home nav edits Playback on Dashboard nav.

Navdrawer example

body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-open > div > div:nth-child(3) > div > div:nth-child(3) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i {
visibility:hidden;
content: '';
}

body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-open > div > div:nth-child(3) > div > div:nth-child(3) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i:before {
        visibility: visible;
        position: absolute;
        content:"\EA29";
}

But you can sort of work around it if you do not dock navdrawer adding a :not().

body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-open:not(.drawer-docked) > div > div:nth-child(3) > div > div:nth-child(3) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i {
visibility:hidden;
content: '';
}

body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-open:not(.drawer-docked) > div > div:nth-child(3) > div > div:nth-child(3) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i:before {
        visibility: visible;
        position: absolute;
        content:"\EA29";
}

This will change a little in 4.8+ with the changes to the navdrawer options.

Edited September 26, 2022 by Happy2Play

[chef 3750]

55 minutes ago, Happy2Play said:

Finally internet is back up.

@BGman  Not sure what you are calling backend/frontend.  

CSS or edit server files only affects the local web client and has no affect on the online app or any other client.  So only browser connections directly via WANIP or DDNS address.

Easiest route here is script editing the js with every update, but this affects all icon not just one. 

From the browser console it can be impossible to see the code for the icon in some cases as the hex code does not appear as you have seen.

    <i class="navDrawerListItemIcon listItemIcon md-icon autortl"></i>

You can target [data-id=xxxxxxxxxxxxx] which is parentid for Home Screen items.  So if you have 5 libraries with this icon you can target 5 libraries with css differently.

Library example you need your library parentid

[data-type="home"] [data-id="f1ffda17fff72a19997ec7e667bb8d3c"] button  i {
visibility:hidden;
content: '';
}

[data-type="home"] [data-id="f1ffda17fff72a19997ec7e667bb8d3c"] button  i:before {
        visibility: visible;
        position: absolute;
        content:"\EA29";
}

But navdrawer is a little more difficult as you have two navdrawers using relatively the same code (Dashboard and everywhere else), so editing the third library on Home nav edits Playback on Dashboard nav.

Navdrawer example

body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-open > div > div:nth-child(3) > div > div:nth-child(3) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i {
visibility:hidden;
content: '';
}

body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-open > div > div:nth-child(3) > div > div:nth-child(3) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i:before {
        visibility: visible;
        position: absolute;
        content:"\EA29";
}

But you can sort of work around it if you do not dock navdrawer adding a :not().

body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-open:not(.drawer-docked) > div > div:nth-child(3) > div > div:nth-child(3) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i {
visibility:hidden;
content: '';
}

body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-open:not(.drawer-docked) > div > div:nth-child(3) > div > div:nth-child(3) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i:before {
        visibility: visible;
        position: absolute;
        content:"\EA29";
}

This will change a little in 4.8+ with the changes to the navdrawer options.

This is brilliant!

That is what I was trying to figure out earlier this afternoon but was failing at.

So you can change the icon using the content variable, but not by adding the entire element, but by simply injecting the code for the new icon. 

I love this! 

 

Nice! 

[Happy2Play 8358]

34 minutes ago, chef said:

This is brilliant!

That is what I was trying to figure out earlier this afternoon but was failing at.

So you can change the icon using the content variable, but not by adding the entire element, but by simply injecting the code for the new icon. 

I love this! 

 

Nice! 

Google was my friend.  But I would assume the font files contain all the material icon values.  So knowing the code or icon name will work in content.

[data-type="home"] [data-id="f1ffda17fff72a19997ec7e667bb8d3c"] button  i {
visibility:hidden;
content: '';
}

[data-type="home"] [data-id="f1ffda17fff72a19997ec7e667bb8d3c"] button  i:before {
        visibility: visible;
        position: absolute;
        content:"sports_football";
}

Edited September 27, 2022 by Happy2Play