Use CSS

1. Add customCss to your theme config(docs), e.g.:

   {
     // ...
     presets: [
       [
         'classic',
         /** @type {import('@docusaurus/preset-classic').Options} */
         ({
           // ...
           theme: {
             customCss: require.resolve('./src/css/custom.css'),
           }
         })
       ]
     ]
   }
   

2. Add overrides to ./src/css/custom.css:
   • E.g.: In order for icons not to add tons of empty space, change layouting to be left-to-right (rather than the default center-heavy).

     /* Override non-category links to be horizonally compact */
     li > a.menu__link {
       justify-content: flex-start;
     }
     

3. Add icon to item:
   • Add sidebar_class_name: item1 to front matter of the item's sidebar link.
     • NOTE: This class name will be added to item1's sidebar li element.
   • Add class to css file, e.g.:

     .item1 a::before {
       padding-right: 0.5rem;
       content: url(../img/myImage.svg);
     }
     

4. Add icon to section: a bit more annoying
   • Add "className": "section1" to _category_.json
   • NOTE: The way the sidebar items are setup, makes it difficult to get the section icon to show up in the right place, without the right-hand caret icon to also end up getting moved.
   • Idea: The best way is currently probably very similar: add it to my-section-class::before, but add transform to move it off to the right and center it vertically with a bit of fiddly-diddling.

Result

In this example, Installation has no icon, while Item1 does: