chore: use vega icons in nav

apps/trading/components/navbar/navbar.tsx

@@ -20,6 +20,8 @@ import {
   NavigationBreakpoint,
   NavigationTrigger,
   NavigationContent,
+  VegaIconNames,
+  VegaIcon,
 } from '@vegaprotocol/ui-toolkit';
 
 import { Links, Routes } from '../../pages/client-router';
@@ -146,7 +148,7 @@ const NavExternalLink = ({
     <ExternalLink href={href}>
       <span className="flex items-center gap-2">
         <span>{children}</span>
-        <Icon name="arrow-top-right" size={3} />
+        <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
       </span>
     </ExternalLink>
   );

libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-arrow-down.tsx

@@ -0,0 +1,7 @@
+export const IconArrowDown = ({ size = 16 }: { size: number }) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16">
+      <path d="M8.53 12.3705L13.6252 7.27524L14.3748 8.02477L8 14.3995L1.62523 8.02477L2.37477 7.27524L7.47 12.3705V1.64999H8.53V12.3705Z" />
+    </svg>
+  );
+};

libs/ui-toolkit/src/components/icon/vega-icons/vega-icon-record.ts

@@ -16,6 +16,7 @@ import { IconChevronUp } from './svg-icons/icon-chevron-up';
 import { IconTrendUp } from './svg-icons/icon-trend-up';
 import { IconCross } from './svg-icons/icon-cross';
 import { IconKebab } from './svg-icons/icon-kebab';
+import { IconArrowDown } from './svg-icons/icon-arrow-down';
 
 export enum VegaIconNames {
   BREAKDOWN = 'breakdown',
@@ -32,6 +33,7 @@ export enum VegaIconNames {
   OPEN_EXTERNAL = 'open-external',
   QUESTION_MARK = 'question-mark',
   ARROW_RIGHT = 'arrow-right',
+  ARROW_DOWN = 'arrow-down',
   CHEVRON_UP = 'chevron-up',
   TREND_UP = 'trend-up',
   CROSS = 'cross',
@@ -56,6 +58,7 @@ export const VegaIconNameMap: Record<
   forum: IconForum,
   'open-external': IconOpenExternal,
   'arrow-right': IconArrowRight,
+  'arrow-down': IconArrowDown,
   'chevron-up': IconChevronUp,
   'trend-up': IconTrendUp,
   cross: IconCross,

libs/ui-toolkit/src/components/navigation/navigation.tsx

@@ -5,7 +5,7 @@ import { useContext } from 'react';
 import { useRef } from 'react';
 import { VegaLogo } from '../vega-logo';
 import * as NavigationMenu from '@radix-ui/react-navigation-menu';
-import { Icon } from '../icon';
+import { Icon, VegaIcon, VegaIconNames } from '../icon';
 import { Drawer } from '../drawer';
 import { NavLink } from 'react-router-dom';
 import type {
@@ -152,8 +152,8 @@ export const NavigationTrigger = ({
       {...props}
     >
       <span>{children}</span>
-      <span className="rotate-90 group-data-open/drawer:hidden">
-        <Icon name="arrow-right" size={3} />
+      <span className="flex items-center group-data-open/drawer:hidden">
+        <VegaIcon name={VegaIconNames.ARROW_DOWN} />
       </span>
       <div
         aria-hidden="true"