Using a container with icons assigned in CSS multiple times

Hey Community,
For an App I’m building I’m using a toggleButton as a darkmode switch. For this button I copied a piece of CSS from another App to a global CSS file in my App, to add icons to the left and right of the button.
The CSS is defined as:

/* 1st icon with child-selector */ div#darkmode_toggle_Container label:nth-child(1):after {background-image: url(data:image/png;base64, ... [long base64 code]
/* 2nd icon with child-selector */ div#darkmode_toggle_Container label:nth-child(3):after {background-image: url(data:image/png;base64, ... [long base64 code]

Now I want to use this button with those icons in two different layouts, so in both layouts I have a “darkmode_toggle_Container”, which both refer to the same element. Both containers are defined exactly the same, with exactly the same pixel space allocated to them. The icons, however, are only displayed on one of the pages, the other one has just the normal toggle button.

Is it generally not possible to use icons defined like this in multiple places? Does it work differently? Or is it more likely that I have made an error somewhere else?

In my opinion this should be solved at least one step earlier by providing toggles with icons instead of the hacky workarounds.

1 Like

Is there a way to provide toggles with icons or would that have to be implemented?

That is a feature request. However, I have just seen in styleguide that the OToggle object now support using icons instead of label by adding “useIconsAsLabel” attribute. not sure if that helps you now.

I have added it to our backlog

Hi @simon.helling, you can use the same element on multiple places … I see no problem, you just have to change the element id and adjust it in the css till @peter.ziewer has no other solution in Apps :smiley:.