Change the color specification of svg.

Create a nested structure.

src/client/js/components/Navbar/PersonalDropdown.jsx

@@ -85,13 +85,13 @@ const PersonalDropdown = (props) => {
   /* eslint-disable react/prop-types */
   const DrawerIcon = props => (
     <>
-      <div id={props.id} className="px-2 personal-dropdown svg"><SidebarDrawerIcon /></div>
+      <div id={props.id} className="px-2 sidebar-drawer-icon"><SidebarDrawerIcon /></div>
       <UncontrolledTooltip placement="bottom" fade={false} target={props.id}>Drawer</UncontrolledTooltip>
     </>
   );
   const DockIcon = props => (
     <>
-      <div id={props.id} className="px-2 personal-dropdown svg"><SidebarDockIcon /></div>
+      <div id={props.id} className="px-2 sidebar-dock-icon"><SidebarDockIcon /></div>
       <UncontrolledTooltip placement="bottom" fade={false} target={props.id}>Dock</UncontrolledTooltip>
     </>
   );

src/client/styles/scss/theme/_apply-colors.scss

@@ -79,6 +79,13 @@ pre:not(.hljs):not(.CodeMirror-line) {
   color: $color-global;
 }
 
+.grw-personal-dropdown {
+  .sidebar-dock-icon,
+  .sidebar-drawer-icon {
+    fill: $color-global;
+  }
+}
+
 .dropdown-item {
   color: $color-global;
   &.active,
@@ -88,10 +95,6 @@ pre:not(.hljs):not(.CodeMirror-line) {
   }
 }
 
-.svg.personal-dropdown {
-  fill: $color-global;
-}
-
 // Form
 .form-control {
   @include form-control-focus();