Replace keyboard shortcut icon

Use svg instead

4 files changed, 6 insertions, 32 deletions

diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index ada53d844..a5985a301 100644
--- a/client/src/app/menu/menu.component.html
+++ b/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>
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index c27f8f8c4..3ca4e47a1 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/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;
diff --git a/client/src/app/modal/quick-settings-modal.component.scss b/client/src/app/modal/quick-settings-modal.component.scss
index afc8460d0..b0e256744 100644
--- a/client/src/app/modal/quick-settings-modal.component.scss
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/client/src/app/shared/shared-icons/global-icon.component.ts b/client/src/app/shared/shared-icons/global-icon.component.ts
index ab71bc3e7..f3c1fe59b 100644
--- a/client/src/app/shared/shared-icons/global-icon.component.ts
+++ b/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,