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

{% block page %}
<h1>{{ title }}</h1>
<p>Add icons to <a href="index.html">sidebar menus</a>.</p>

<div class="card card-block">
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a href="#usage" data-toggle="pill" class="nav-link active">Usage</a>
    </li>
    <li class="nav-item">
      <a href="#css" data-toggle="pill" class="nav-link">CSS</a>
    </li>
    <li class="nav-item">
      <a href="#sass" data-toggle="pill" class="nav-link">Sass</a>
    </li>
    <li class="nav-item">
      <a href="../demo/sidebar-menu-icons.html" target="_blank" class="nav-link">Demo</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="usage">
      {% include 'code/material-icons.html' %}

      <h3>Usage</h3>
      <blockquote>
        To add an icon to the sidebar menu button, add an element using the <code>.sidebar-menu-icon</code> base icon class within the <code>.sidebar-menu-button</code> element. Also, to use the <a href="https://design.google.com/icons/">Material icons</a> add the <code>.material-icons</code> class to the <code>.sidebar-menu-icon</code> element.
      </blockquote>

      {% include 'code/sidebar-menu/icons.html' %}
    </div>
    <div class="tab-pane" id="css">
      <div class="table-responsive">
        <table class="table table-sm">
          <thead>
            <tr>
              <th>CSS Class</th>
              <th>Description</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><code>.sidebar-menu-icon</code></td>
              <td>The sidebar menu icon</td>
            </tr>
            <tr>
              <td><code>.material-icons</code></td>
              <td>Required on <code>.sidebar-menu-icon</code> elements when using <a href="https://design.google.com/icons/">Material icons</a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="tab-pane" id="sass">
      <blockquote>
        You can customize sidebar menu icons with the following Sass variables.
      </blockquote>
      <div class="table-responsive">
        <table class="table table-sm">
          <thead>
            <tr>
              <th width="250">Sass variable</th>
              <th>Description</th>
              <th class="text-xs-center" width="200">Default value</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><code>$sm-icon-font-size</code></td>
              <td>Defines the base font size in <code>px</code> for sidebar menu icons</td>
              <td class="text-xs-center"><code>24px</code></td>
            </tr>
            <tr>
              <td><code>$sm-icon-margin</code></td>
              <td>Defines the margin for sidebar menu icons</td>
              <td class="text-xs-center"><code>$sm-spacing-x * 0.4</code></td>
            </tr>
          </tbody>
        </table>
      </div>

      <blockquote>
        <h3>See also</h3>
        Sidebar menu icons in the context of <a href="submenu.html#sass">sidebar submenus</a>.
      </blockquote>
    </div>
  </div>
</div>

{% endblock %}