How can I change the Toolpad Dashboard Menu Icon &? /

This is my code:

import * as React from 'react';
import ...... <all> etc..

const NAVIGATION: Navigation = [
  {
    title: 'Dashboard',
    icon: <DashboardOutlinedIcon />,
  },
  {
    segment: 'orders',
    title: 'Orders',
    icon: <LocalGroceryStoreOutlinedIcon />,
  },
];

const flocktheme = createTheme({
   cssVariables: {
    colorSchemeSelector: 'data-toolpad-color-scheme',
  },
  colorSchemes: { light: true, dark: true },
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 600,
      lg: 1200,
      xl: 1536,
    },
  }, 
});

export default function DashboardLayoutBranding() {


  const router = useDemoRouter('/dashboard');


  return (
    <AppProvider
      navigation={NAVIGATION}
      branding={{
        logo: <img src=".png" alt="Breed Flocks logo" />,
        title: 'Flocks',
        homeUrl: '/',
      }}
      router={router}
      theme={flocktheme}
      session={session}
    >
      <DashboardLayout defaultSidebarCollapsed>
        <PageContainer breadcrumbs={[]}>
          <Outlet />
        </PageContainer>
      </DashboardLayout>
    </AppProvider>
  );
}

Can I use the <AppProvider to change the default Menu Icon to another icon of my choice? How can I add something like this in my code:

const getMenuIcon = React.useCallback(

  return (
      <div>
        <IconButton
          aria-label={`${isExpanded ? collapseMenuActionText : expandMenuActionText} navigation menu`}
          onClick={toggleNavigationExpanded}
        >
          {isExpanded ? <GridGoldenratioOutlinedIcon/> : <SegmentOutlinedIcon/>}
        </IconButton>
      </div>
  );
},
[toggleNavigationExpanded],

);