--- title: Sidebar menu icons slug: sidebar-menu/icons path: ../ --- {% extends "layouts/default.html" %} {% block page %}

{{ title }}

Add icons to sidebar menus.

{% include 'code/material-icons.html' %}

Usage

To add an icon to the sidebar menu button, add an element using the .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.
{% include 'code/sidebar-menu/icons.html' %}
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.
{% endblock %}