refactor: icon to icons for navbar (#15643)

* initial commit

* remove code

superset-frontend/src/common/components/index.tsx

@@ -181,11 +181,14 @@ export const StyledSubMenu = styled(AntdMenu.SubMenu)`
   & > .ant-menu-submenu-title {
     padding: 0 ${({ theme }) => theme.gridUnit * 6}px 0
       ${({ theme }) => theme.gridUnit * 3}px !important;
-    svg {
+    span[role='img'] {
       position: absolute;
-      top: ${({ theme }) => theme.gridUnit * 4 + 7}px;
-      right: ${({ theme }) => theme.gridUnit}px;
-      width: ${({ theme }) => theme.gridUnit * 6}px;
+      right: ${({ theme }) => -theme.gridUnit + -2}px;
+      top: ${({ theme }) => theme.gridUnit * 5.25}px;
+      svg {
+        font-size: ${({ theme }) => theme.gridUnit * 6}px;
+        color: ${({ theme }) => theme.colors.grayscale.base};
+      }
     }
     & > span {
       position: relative;

superset-frontend/src/components/Menu/LanguagePicker.tsx

@@ -19,7 +19,7 @@
 import React from 'react';
 import { MainNav as Menu } from 'src/common/components';
 import { styled } from '@superset-ui/core';
-import Icon from 'src/components/Icon';
+import Icons from 'src/components/Icons';
 
 const { SubMenu } = Menu;
 
@@ -66,7 +66,7 @@ export default function LanguagePicker(props: LanguagePickerProps) {
           <StyledFlag className={`flag ${languages[locale].flag}`} />
         </div>
       }
-      icon={<Icon name="triangle-down" />}
+      icon={<Icons.TriangleDown />}
       {...rest}
     >
       {Object.keys(languages).map(langKey => (

superset-frontend/src/components/Menu/Menu.tsx

@@ -24,7 +24,7 @@ import { getUrlParam } from 'src/utils/urlUtils';
 import { MainNav as DropdownMenu, MenuMode } from 'src/common/components';
 import { Link } from 'react-router-dom';
 import { Row, Col, Grid } from 'antd';
-import Icon from 'src/components/Icon';
+import Icons from 'src/components/Icons';
 import RightMenu from './MenuRight';
 import { Languages } from './LanguagePicker';
 import { URL_PARAMS } from '../../constants';
@@ -189,7 +189,11 @@ export function Menu({
       );
     }
     return (
-      <SubMenu key={index} title={label} icon={<Icon name="triangle-down" />}>
+      <SubMenu
+        key={index}
+        title={label}
+        icon={showMenu === 'inline' ? <></> : <Icons.TriangleDown />}
+      >
         {childs?.map((child: MenuObjectChildProps | string, index1: number) => {
           if (typeof child === 'string' && child === '-') {
             return <DropdownMenu.Divider key={`$${index1}`} />;

superset-frontend/src/components/Menu/MenuRight.tsx

@@ -20,7 +20,7 @@ import React from 'react';
 import { MainNav as Menu } from 'src/common/components';
 import { t, styled, css, SupersetTheme } from '@superset-ui/core';
 import { Link } from 'react-router-dom';
-import Icon from 'src/components/Icon';
+import Icons from 'src/components/Icons';
 import LanguagePicker from './LanguagePicker';
 import { NavBarProps, MenuObjectProps } from './Menu';
 
@@ -92,7 +92,7 @@ const RightMenu = ({
           title={
             <StyledI data-test="new-dropdown-icon" className="fa fa-plus" />
           }
-          icon={<Icon name="triangle-down" />}
+          icon={<Icons.TriangleDown />}
         >
           {dropdownItems.map(menu => (
             <Menu.Item key={menu.label}>
@@ -107,7 +107,7 @@ const RightMenu = ({
           ))}
         </SubMenu>
       )}
-      <SubMenu title="Settings" icon={<Icon name="triangle-down" />}>
+      <SubMenu title="Settings" icon={<Icons.TriangleDown iconSize="xl" />}>
         {settings.map((section, index) => [
           <Menu.ItemGroup key={`${section.label}`} title={section.label}>
             {section.childs?.map(child => {