use key icon instead of browser icon

static/browser.svg

@@ -1 +0,0 @@
-<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 48 48" height="48px" version="1.1" viewBox="0 0 48 48" width="48px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Expanded"><g><g><path d="M43,44H5c-2.757,0-5-2.243-5-5V11c0-2.757,2.243-5,5-5h38c2.757,0,5,2.243,5,5v28C48,41.757,45.757,44,43,44z M5,8     c-1.654,0-3,1.346-3,3v28c0,1.654,1.346,3,3,3h38c1.654,0,3-1.346,3-3V11c0-1.654-1.346-3-3-3H5z"/></g><g><path d="M47,18H1c-0.553,0-1-0.448-1-1s0.447-1,1-1h46c0.553,0,1,0.448,1,1S47.553,18,47,18z"/></g><g><circle cx="8" cy="12" r="2"/></g><g><circle cx="14" cy="12" r="2"/></g><g><circle cx="20" cy="12" r="2"/></g></g></g></svg>

static/key.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgb(154, 160, 172)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-key"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"></path></svg>

templates/menu.html

@@ -18,7 +18,7 @@
   <li class="nav-item">
     <a href="{{ url_for('dashboard.api_key') }}"
        class="nav-link {{ 'active' if active_page == 'api_key' }}">
-      <i><img src="/static/browser.svg"></i>
+      <i><img src="/static/key.svg"></i>
       API Key
     </a>
   </li>