diff --git a/assets/js/src/sidebar.js b/assets/js/src/sidebar.js
index eb3c148de5..c455f7997b 100644
--- a/assets/js/src/sidebar.js
+++ b/assets/js/src/sidebar.js
@@ -1,13 +1,9 @@
 function toggleMenuItem(event) {
   const section = event.currentTarget.parentElement;
-  const icon = section.querySelector(".icon");
+  const icons = event.currentTarget.querySelectorAll(".icon-svg");
   const subsection = section.querySelector("ul");
   subsection.classList.toggle("hidden");
-  if (subsection.classList.contains("hidden")) {
-    icon.setAttribute("data-icon", "expand_more");
-  } else {
-    icon.setAttribute("data-icon", "expand_less");
-  }
+  icons.forEach(i => i.classList.toggle('hidden'))
 }
 
 const sectiontree = document.querySelector("#sectiontree");
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
index 8fce923c7a..0a45f38f09 100644
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@@ -45,8 +45,15 @@
 <li>
   {{/* See event handler in assets/js/src/sidebar.js */}}
   <button class="rounded px-4 sidebar-hover w-full flex items-center justify-between">
-    <span class="py-2 truncate flex items-center gap-2">{{ markdownify .entry.sectiontitle }}</span>
-    <span class="icon" data-icon="{{ cond $expanded "expand_less" "expand_more"}}"></span>
+    <span class="py-2 truncate flex items-center gap-2">
+      {{ markdownify .entry.sectiontitle }}
+    </span>
+    <span class="icon-svg {{ if $expanded }}hidden{{ end }}">
+      {{ partial "icon" "expand_more" }}
+    </span>
+    <span class="icon-svg {{ if not $expanded }}hidden{{ end }}">
+      {{ partial "icon" "expand_less" }}
+    </span>
   </button>
   <ul class="{{if not $expanded}}hidden {{end}}ml-3 md:ml-[21px]">
     {{ range .entry.section }}