Change toggle icon that looks like this: |<

[calicoder77]

Good day, I got this code and looking how to change the toggle icon that looks like this |< to one that Font Awesome free offers. I took a look at the issues here and none of the solutions work for me. Any ideas? Thanks a million!

<script setup>
import { Sidebarmenu } from 'vue-sidebar-menu'
import 'vue-sidebar-menu/dist/vue-sidebar-menu.css'
import '@fontawesome/fontawesome-free/css/all.css'
</script>

<style>
.v-sidebar-menu .vsm--toggle-btn {
    justify-content: left;
}
</style>

<template>
    <sidebar-menu :menu="menu" />
    <div>Test Page</div>
</template>

[yaminncco]

You can use slot

<sidebar-menu>
  <template v-slot:toggle-icon>toggle-icon</template>
</sidebar-menu>

[calicoder77]

Hi @yaminncco that also doesn't work. The current icon |< is always present. Is there no way to switch it out for another icon to show?

[yaminncco]

I need more details on why the slot doesn't work, or a minimal reproduction.

[calicoder77]

I was able to hide the default icon with:

.vsm--toggle-btn_default {
    display: none;
}

To add another icon, you can do this:

.vsm--toggle-btn::after {
    font: var(--fa-font-solid);
    content: ' \****'; <-- insert unicode for icon here
}