Change story icon

The best approach to change the icon of a story in the sidebar

  1. Create the svg for the desired icon and place in /public folder

  2. Get id of the story you want to change its icon by inspecting the element of the sidebar story item, or by copying the path of the story from the url address

  3. Add the following css in manager-head.html

<style>
 
  #getting-started-installation--installation,
  #getting-started-usage--usage,
  #getting-started-customization--customization,
  #blocks-introduction--introduction,
  #getting-started-overview--overview {
    padding-top: 6px;
  }

  #getting-started-installation--installation svg,
  #getting-started-usage--usage svg,
  #getting-started-customization--customization svg,
  #blocks-introduction--introduction svg,
  #getting-started-overview--overview svg {
    opacity: 0;
    display: none;
  }

  #getting-started-installation--installation::before,
  #getting-started-usage--usage::before,
  #getting-started-customization--customization::before,
  #blocks-introduction--introduction::before,
  #getting-started-overview--overview::before {
    position: relative;
    content: url("/doc-icon.svg");
    top: 1px;
    margin-right: 5px;
  }
</style>

Last updated