How to Change Ribbon 'Expand' Button Icon?

[Bluemoondragon07]

Hi. I’m programming a css theme and I just want to change this icon. I’m still a beginner in writing css, but I’ve tried display: lucide-menu, background: lucide-menu', and content: lucide-menu`.

 .sidebar-toggle-button {
    display: none;
    background: lucide-menu;
}

I can’t seem to find a variable in the code that defines the sidebar icons, either.

I’ve seen other themes utilize different icons, so I know it is possible. I also know that I could just set the background to an online svg, but I want to know if it is possible to use lucide icons, since they’re already in Obsidian. Thanks in advance.

[macrospect]

I’m not totally sure, but you might be able to use the Icon Swapper plug-in.

[holroy]

Do you want to change both icons, or just one of them ? Like the one on the left which you’ve marked out in your image?

For the one on the left the DOM elements are shown in this image:

<div class="sidebar-toggle-button mod-left" aria-label="" aria-label-position="right">
  <div class="clickable-icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="24"
         height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" 
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round" 
         class="svg-icon sidebar-left"><path ... /path>
    </svg>
  </div>
</div>

For hiding the other icon I think I would use:

.sidebar-toggle-button.mod-left svg {
  display: none
}

Regarding how to show the icon I’m not sure, but I reckon doing some magic to the .sidebar-toggle-button.mod-left div.clickable-icon::before should do the trick. Maybe put something like background-image: url(...) in there.

Don’t know (or have the time to find) how they’re used elsewhere in obsidian already.

[Bluemoondragon07]

Thank you so much. I will try this out.
Yeah, I was mainly trying to find the exact spot in the CSS where the icon source is defined, but it must just be in the HTML itself. This is a close solution, though.
I also wanted to know if the lucide icons could just be declared without using url(). I know that ultimately, it doesn’t make that much of a difference, since you get the same result, but since all the lucide icons are in Obsidian already I wanted to see if it was possible.

[Bluemoondragon07]

Thanks, I did not know about this plug-in. I was looking for a way to change the icons in a CSS snippet or theme, though.