--- title: Sidebar menu icons slug: sidebar-menu/icons path: ../ --- {% extends "layouts/default.html" %} {% block page %}
Add icons to sidebar menus.
To add an icon to the sidebar menu button, add an element using the{% include 'code/sidebar-menu/icons.html' %}.sidebar-menu-icon
base icon class within the.sidebar-menu-button
element. Also, to use the Material icons add the.material-icons
class to the.sidebar-menu-icon
element.
CSS Class | Description |
---|---|
.sidebar-menu-icon |
The sidebar menu icon |
.material-icons |
Required on .sidebar-menu-icon elements when using Material icons |
You can customize sidebar menu icons with the following Sass variables.
Sass variable | Description | Default value |
---|---|---|
$sm-icon-font-size |
Defines the base font size in px for sidebar menu icons |
24px |
$sm-icon-margin |
Defines the margin for sidebar menu icons | $sm-spacing-x * 0.4 |
See also
Sidebar menu icons in the context of sidebar submenus.