Replace keyboard shortcut icon

Use svg instead

client/src/app/menu/menu.component.html

@@ -59,11 +59,13 @@
               <div class="dropdown-divider"></div>
 
               <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" (click)="openHotkeysCheatSheet()">
-                <i class="icon icon-shortcuts" aria-hidden="true"></i> <ng-container i18n>Keyboard shortcuts</ng-container>
+                <my-global-icon iconName="command" aria-hidden="true"></my-global-icon>
+                <ng-container i18n>Keyboard shortcuts</ng-container>
               </a>
 
               <a ngbDropdownItem ngbDropdownToggle (click)="logout($event)" class="dropdown-item" href="#">
-                <my-global-icon iconName="sign-out" aria-hidden="true"></my-global-icon> <ng-container i18n>Log out</ng-container>
+                <my-global-icon iconName="sign-out" aria-hidden="true"></my-global-icon>
+                <ng-container i18n>Log out</ng-container>
               </a>
             </div>
           </div>

client/src/app/menu/menu.component.scss

@@ -352,20 +352,6 @@ menu {
   color: #6c757d;
 }
 
-.icon {
-  @include disable-outline;
-  @include icon($menu-link-icon-size);
-  opacity: 0.8;
-
-  &.icon-shortcuts  {
-    position: relative;
-    top: -1px;
-    margin-right: 10px;
-
-    background-image: url('../../assets/images/misc/keyboard.png');
-  }
-}
-
 input[type=checkbox]{
   position: absolute;
   visibility: hidden;

client/src/app/modal/quick-settings-modal.component.scss

@@ -19,21 +19,6 @@
   }
 }
 
-.icon {
-  @include disable-outline;
-  @include icon(22px);
-  opacity: 0.6;
-  margin-left: -1px;
-
-  &.icon-shortcuts  {
-    position: relative;
-    top: -1px;
-    margin-right: 4px;
-
-    background-image: url('../../assets/images/misc/keyboard.png');
-  }
-}
-
 .quick-settings-title {
   @include in-content-small-title;
-}
+}

client/src/app/shared/shared-icons/global-icon.component.ts

@@ -62,6 +62,7 @@ const icons = {
   'sensitive': require('!!raw-loader?!../../../assets/images/feather/eye.svg').default,
   'unsensitive': require('!!raw-loader?!../../../assets/images/feather/eye-off.svg').default,
   'refresh': require('!!raw-loader?!../../../assets/images/feather/refresh-cw.svg').default,
+  'command': require('!!raw-loader?!../../../assets/images/feather/command.svg').default,
   'go': require('!!raw-loader?!../../../assets/images/feather/arrow-up-right.svg').default,
   'cross': require('!!raw-loader?!../../../assets/images/feather/x.svg').default,
   'tick': require('!!raw-loader?!../../../assets/images/feather/check.svg').default,

client/src/assets/images/feather/command.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-command"><path d="M18 3a3 3 0 00-3 3v12a3 3 0 003 3 3 3 0 003-3 3 3 0 00-3-3H6a3 3 0 00-3 3 3 3 0 003 3 3 3 0 003-3V6a3 3 0 00-3-3 3 3 0 00-3 3 3 3 0 003 3h12a3 3 0 003-3 3 3 0 00-3-3z"/></svg>