CSS to change collapse icon with a custom SVG

Custom CSS & Theme Design
,
1

While working on my theme (Nier theme) I was looking to change the SVG logo for the dropdown icon. :
image
here is the base obsidian svg arrow.

So after a lot of tweaking, I finally found a solution that works (but is probably clunky).
So i am open to better alternative.

/*custom collapse SVG icon */

.collapse-icon.is-collapsed svg.svg-icon {
  display: none;
  position: relative;
}

.collapse-icon svg.svg-icon {
  display: none;
  position: relative;
}

.collapse-icon::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml,%3Csvg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="367.705" height="234.894" viewBox="0 0 367.705 234.894"%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %2348463d; %7D %3C/style%3E%3C/defs%3E%3Cpath class="cls-1" d="M0,117.447l90.7,90.7,272.151-90.7L90.7,26.747Zm105.983,0a17.3,17.3,0,1,1-17.3-17.3A17.3,17.3,0,0,1,105.983,117.447Z"/%3E%3Crect class="cls-1" x="340.658" y="207.848" width="27.046" height="27.046" transform="translate(132.81 575.553) rotate(-90)"/%3E%3Crect class="cls-1" x="340.658" width="27.046" height="27.046" transform="translate(340.658 367.705) rotate(-90)"/%3E%3C/svg%3E');

  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  vertical-align: middle;
  transform: rotate(calc(var(--direction) * 1 * 90deg));
}

  

.collapse-icon::before {
  rotate: 90;
  background-position: 0% 50%;
}

.collapse-icon.is-collapsed::before {
  transform: rotate(0);
  background-position: 25% 105%;
}

.markdown-preview-view {
  position: relative;
}

 /* Adjust the position of the collapse indicator */

.markdown-preview-view .collapse-icon {
  position: relative;
  top: 27px;  /* Adjust this value to move vertically */
  left: 0px; /* Adjust this value to move horizontally */
  cursor: var(--cursor);
}

here is the result :
image

2

btw the second part of the code is to fix the icon for the header.

3

here is a better result that i got :

/*custom collapse SVG icon */
.collapse-icon.is-collapsed svg.svg-icon {
  display: none;
  position: relative;
}

.collapse-icon svg.svg-icon {
  display: none;
  position: relative;
}


.collapse-icon::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml,%3Csvg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="367.705" height="234.894" viewBox="0 0 367.705 234.894"%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %2348463d; %7D %3C/style%3E%3C/defs%3E%3Cpath class="cls-1" d="M0,117.447l90.7,90.7,272.151-90.7L90.7,26.747Zm105.983,0a17.3,17.3,0,1,1-17.3-17.3A17.3,17.3,0,0,1,105.983,117.447Z"/%3E%3Crect class="cls-1" x="340.658" y="207.848" width="27.046" height="27.046" transform="translate(132.81 575.553) rotate(-90)"/%3E%3Crect class="cls-1" x="340.658" width="27.046" height="27.046" transform="translate(340.658 367.705) rotate(-90)"/%3E%3C/svg%3E');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  vertical-align: middle;
  transform: rotate(calc(var(--direction) * 1 * 90deg));
}

.collapse-icon::before {
  rotate: 90;
  background-position: 0% 50%;
}
.collapse-icon.is-collapsed::before {
  transform: rotate(0);
  background-position: 25% 105%;
}


.markdown-source-view.mod-cm6 .cm-fold-indicator .collapse-indicator {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  height: 100%;
  cursor: var(--cursor);
  padding-inline-end: 5px;
}

.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
    position: relative;
}
.markdown-preview-view .collapse-indicator {
  position: absolute;
  top: 0;
  right: 10;
  height: 100%;
  cursor: var(--cursor);
  padding-right: 5px;
}
4

final version. it whas a pain to fix :

/*custom collapse SVG icon */
.collapse-icon.is-collapsed svg.svg-icon {
  display: none;
  position: relative;
}

.collapse-icon svg.svg-icon {
  display: none;
  position: relative;
}


.collapse-icon::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml,%3Csvg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="367.705" height="234.894" viewBox="0 0 367.705 234.894"%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %2348463d; %7D %3C/style%3E%3C/defs%3E%3Cpath class="cls-1" d="M0,117.447l90.7,90.7,272.151-90.7L90.7,26.747Zm105.983,0a17.3,17.3,0,1,1-17.3-17.3A17.3,17.3,0,0,1,105.983,117.447Z"/%3E%3Crect class="cls-1" x="340.658" y="207.848" width="27.046" height="27.046" transform="translate(132.81 575.553) rotate(-90)"/%3E%3Crect class="cls-1" x="340.658" width="27.046" height="27.046" transform="translate(340.658 367.705) rotate(-90)"/%3E%3C/svg%3E');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  vertical-align: middle;
  transform: rotate(calc(var(--direction) * 1 * 90deg));
}

.collapse-icon::before {
  rotate: 90;
  background-position: 0% 50%;
}
.collapse-icon.is-collapsed::before {
  transform: rotate(0);
  background-position: 25% 105%;
}


.markdown-source-view.mod-cm6 .cm-fold-indicator .collapse-indicator {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  height: 100%;
  cursor: var(--cursor);
  padding-inline-end: 5px;
}

.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
    position: relative;
}
.markdown-preview-view .collapse-indicator {
  position: absolute;
  top: 0;
  right: 10;
  height: 100%;
  cursor: var(--cursor);
  padding-right: 5px;
  transform: translateX(-20%);
}


.markdown-preview-view ul > li,
.markdown-preview-view ol > li,
.markdown-source-view ul > li,
.markdown-source-view ol > li {
    position: relative;
}


.markdown-preview-view ul > li > .collapse-indicator,
.markdown-preview-view ol > li > .collapse-indicator,
.markdown-source-view ul > li > .collapse-indicator,
.markdown-source-view ol > li > .collapse-indicator {
    position: absolute;
    top: 13px;
    left: 0px; 
    transform: translateY(-50%);
    cursor: var(--cursor);
}


.markdown-preview-view ul > li.is-collapsed > .collapse-indicator,
.markdown-preview-view ol > li.is-collapsed > .collapse-indicator,
.markdown-source-view ul > li.is-collapsed > .collapse-indicator,
.markdown-source-view ol > li.is-collapsed > .collapse-indicator {
    top: 50%;
    transform: translateY(-50%);
}