Answers.Body: <p>You were almost there with it. You need to specify a path to an SVG. It can be one of the ones that exists within <a href="https://github.com/craftcms/cms/tree/develop/src/icons" rel="nofollow noreferrer">Craft's icon directory</a>.</p>
  
  <p>So your nav item would look like this:</p>
  
  <pre class="lang-php prettyprint-override"><code>Event::on(
      Cp::class,
      Cp::EVENT_REGISTER_CP_NAV_ITEMS,
      function(RegisterCpNavItemsEvent $event) {
          $event-&gt;navItems[] = [
              'url' =&gt; 'contact-enquiries',
              'label' =&gt; 'Contact Enquiries',
              'icon' =&gt; '@app/icons/envelope.svg',
          ];
      }
  );
  </code></pre>
  
  <p>And this is how it will show in the CP nav:</p>
  
  <p><a href="https://i.sstatic.net/S9mhL.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/S9mhL.png" alt="enter image description here"></a></p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-12-03T19:09:12.340Z
Answers.Text: Ah, excellent, thank you
Answers.UserDisplayName: MattRogowski
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-12-02T23:08:19.747Z
Answers.LastActivityDate: 2019-12-02T23:08:19.747Z
Answers.UserDisplayName: nfourtythree
Body: <p>When adding a navigation item, there is the option to specify an icon, but it seems to have to be a path to an SVG. I can see that Craft has its own icon library, and it has an icon I want to use.</p>
  
  <p>I want to use the "mail" icon, so I tried this HTML:</p>
  
  <p><code>'icon' =&gt; '&lt;span data-icon="mail"&gt;&lt;/span&gt;',</code></p>
  
  <p>this is inside my registration of the navigation item:</p>
  
  <pre><code>Event::on(
      Cp::class,
      Cp::EVENT_REGISTER_CP_NAV_ITEMS,
      function(RegisterCpNavItemsEvent $event) {
          $event-&gt;navItems[] = [
              'url' =&gt; 'contact-enquiries',
              'label' =&gt; 'Contact Enquiries',
              'icon' =&gt; '&lt;span data-icon="mail"&gt;&lt;/span&gt;',
          ];
      }
  );
  </code></pre>
  
  <p>However, it doesn't show the icon.</p>
  
  <p>I can't see anywhere in the docs that explain how to use these icons in your own navigation items, so is there a way to do it? It'd be a lot easier than having to include an SVG that doesn't match the other icons.</p>
  
Tags: <plugin-development><modules><plugin-navigation>
Title: Use sidebar nav icons in modules and plugins
ThreadText: # Use sidebar nav icons in modules and plugins
  
  (Asked by: username_0 on 2019-11-30)
  
  When adding a navigation item, there is the option to specify an icon, but it seems to have to be a path to an SVG. I can see that Craft has its own icon library, and it has an icon I want to use.
  
  I want to use the "mail" icon, so I tried this HTML:
  
  `'icon' => '<span data-icon="mail"></span>',`
  
  this is inside my registration of the navigation item:
  
  ```
  Event::on(
      Cp::class,
      Cp::EVENT_REGISTER_CP_NAV_ITEMS,
      function(RegisterCpNavItemsEvent $event) {
          $event->navItems[] = [
              'url' => 'contact-enquiries',
              'label' => 'Contact Enquiries',
              'icon' => '<span data-icon="mail"></span>',
          ];
      }
  );
  
  ```
  
  However, it doesn't show the icon.
  
  I can't see anywhere in the docs that explain how to use these icons in your own navigation items, so is there a way to do it? It'd be a lot easier than having to include an SVG that doesn't match the other icons.
  
  **Tags:** plugin-development, modules, plugin-navigation
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2019-12-02. Score: 4 | Accepted answer
  
  You were almost there with it. You need to specify a path to an SVG. It can be one of the ones that exists within [Craft's icon directory](https://github.com/craftcms/cms/tree/develop/src/icons).
  
  So your nav item would look like this:
  
  ```php
  Event::on(
      Cp::class,
      Cp::EVENT_REGISTER_CP_NAV_ITEMS,
      function(RegisterCpNavItemsEvent $event) {
          $event->navItems[] = [
              'url' => 'contact-enquiries',
              'label' => 'Contact Enquiries',
              'icon' => '@app/icons/envelope.svg',
          ];
      }
  );
  
  ```
  
  And this is how it will show in the CP nav:
  
  [![enter image description here](https://i.sstatic.net/S9mhL.png)](https://i.sstatic.net/S9mhL.png)
  
  > **Comments:**
  > **username_0**: Ah, excellent, thank you  
  
  ---
  
  