Updated according to feedback:

packages/grafana-data/src/types/panel.ts

@@ -188,6 +188,11 @@ export interface PanelOptionsEditorConfig<TOptions, TSettings = any, TValue = an
 export interface PanelMenuItem {
   type?: 'submenu' | 'divider' | 'group';
   text: string;
+  /** A React element or IconName that will be displayed before the title */
+  prefix?: React.ReactElement | IconName;
+  /**
+   * @deprecated Use `prefix` instead. This property will be removed in a future release.
+   */
   iconClassName?: IconName;
   onClick?: (event: React.MouseEvent) => void;
   shortcut?: string;

packages/grafana-data/src/types/pluginExtensions.ts

@@ -28,7 +28,12 @@ export type PluginExtensionLink = PluginExtensionBase & {
   type: PluginExtensionTypes.link;
   path?: string;
   onClick?: (event?: React.MouseEvent) => void;
+  /**
+   * @deprecated Use `prefix` instead. This property will be removed in a future release.
+   */
   icon?: IconName;
+  /** A React element or IconName that will be displayed before the title */
+  prefix?: React.ReactElement | IconName;
   category?: string;
   openInNewTab?: boolean;
 };
@@ -106,7 +111,12 @@ export type PluginAddedLinksConfigureFunc<Context extends object> = (context: Re
       description: string;
       path: string;
       onClick: (event: React.MouseEvent | undefined, helpers: PluginExtensionEventHelpers<Context>) => void;
+      /**
+       * @deprecated Use `prefix` instead. This property will be removed in a future release.
+       */
       icon: IconName;
+      /** A React element or IconName that will be displayed before the title */
+      prefix: React.ReactElement | IconName;
       category: string;
       openInNewTab: boolean;
     }>
@@ -135,7 +145,9 @@ export type PluginExtensionAddedLinkConfig<Context extends object = object> = Pl
   // (Optional) A function that can be used to configure the extension dynamically based on the extension point's context
   configure?: PluginAddedLinksConfigureFunc<Context>;
 
-  // (Optional) A icon that can be displayed in the ui for the extension option.
+  /**
+   * @deprecated Use `prefix` instead. This property will be removed in a future release.
+   */
   icon?: IconName;
 
   // (Optional) A category to be used when grouping the options in the ui
@@ -144,6 +156,9 @@ export type PluginExtensionAddedLinkConfig<Context extends object = object> = Pl
   // (Optional) If true, opens the link in a new tab (renders with target="_blank")
   // (Important: this is not guaranteed, depends on the extension point if it implements it.)
   openInNewTab?: boolean;
+
+  // (Optional) A React element or IconName that will be displayed before the title
+  prefix?: React.ReactElement | IconName;
 };
 
 export type PluginExtensionExposedComponentConfig<Props = {}> = PluginExtensionConfigBase & {

packages/grafana-ui/src/components/Menu/MenuItem.tsx

@@ -2,15 +2,15 @@ import { css, cx } from '@emotion/css';
 import { ReactElement, useCallback, useState, useRef, useImperativeHandle, CSSProperties, AriaRole } from 'react';
 import * as React from 'react';
 
-import { GrafanaTheme2, LinkTarget } from '@grafana/data';
+import { GrafanaTheme2, IconName, isIconName, LinkTarget } from '@grafana/data';
 import { t } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
 import { getFocusStyles, getInternalRadius } from '../../themes/mixins';
-import { IconName } from '../../types/icon';
 import { Icon } from '../Icon/Icon';
 import { Stack } from '../Layout/Stack/Stack';
 
+import { MenuItemPrefix } from './MenuItemPrefix';
 import { SubMenu } from './SubMenu';
 
 /** @internal */
@@ -28,8 +28,12 @@ export interface MenuItemProps<T = unknown> {
   ariaChecked?: boolean;
   /** Target of the menu item (i.e. new window)  */
   target?: LinkTarget;
-  /** Icon of the menu item */
+  /**
+   * @deprecated Use `prefix` instead. This property will be removed in a future release.
+   */
   icon?: IconName;
+  /** A React element or IconName that will be displayed before the title */
+  prefix?: React.ReactElement | IconName;
   /** Role of the menu item */
   role?: AriaRole;
   /** Url of the menu item */
@@ -79,6 +83,7 @@ export const MenuItem = React.memo(
       customSubMenuContainerStyles,
       shortcut,
       testId,
+      prefix,
     } = props;
     const styles = useStyles2(getStyles);
     const [isActive, setIsActive] = useState(active);
@@ -176,7 +181,7 @@ export const MenuItem = React.memo(
         {...disabledProps}
       >
         <Stack direction="row" justifyContent="flex-start" alignItems="center">
-          {icon && <Icon name={icon} className={styles.icon} aria-hidden />}
+          <MenuItemPrefix prefix={isIconName(icon) ? icon : prefix} />
           <span className={cx(styles.ellipsis, styles.label)}>{label}</span>
           <div className={cx(styles.rightWrapper, { [styles.withShortcut]: hasShortcut })}>
             {hasShortcut && (
@@ -272,9 +277,6 @@ const getStyles = (theme: GrafanaTheme2) => {
         color: theme.colors.action.disabledText,
       },
     }),
-    icon: css({
-      opacity: 0.7,
-    }),
     rightWrapper: css({
       display: 'flex',
       alignItems: 'center',

packages/grafana-ui/src/components/Menu/MenuItemPrefix.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react';
+
+import { MenuItemPrefix } from './MenuItemPrefix';
+
+describe('MenuItemPrefix', () => {
+  it('renders nothing when prefix is not provided', () => {
+    const { container } = render(<MenuItemPrefix />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders icon when prefix is an IconName string', () => {
+    const { container } = render(<MenuItemPrefix prefix="history" />);
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('renders custom element when prefix is a React element', () => {
+    render(<MenuItemPrefix prefix={<span data-testid="custom-icon">Custom</span>} />);
+    expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
+  });
+
+  it('wraps React element prefix in a div with aria-hidden', () => {
+    render(<MenuItemPrefix prefix={<span data-testid="custom-icon">Custom</span>} />);
+    const wrapper = screen.getByTestId('custom-icon').parentElement;
+    expect(wrapper).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('renders nothing when prefix is an invalid value', () => {
+    // @ts-expect-error - testing invalid input
+    const { container } = render(<MenuItemPrefix prefix="not-a-valid-icon-name" />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders nothing when prefix is null', () => {
+    // @ts-expect-error - testing null input
+    const { container } = render(<MenuItemPrefix prefix={null} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+});

packages/grafana-ui/src/components/Menu/MenuItemPrefix.tsx

@@ -0,0 +1,52 @@
+import { css } from '@emotion/css';
+import { isValidElement } from 'react';
+
+import { IconName, isIconName } from '@grafana/data';
+
+import { useStyles2 } from '../../themes/ThemeContext';
+import { Icon } from '../Icon/Icon';
+import { getSvgSize } from '../Icon/utils';
+
+type MenuItemPrefixProps = {
+  prefix?: React.ReactElement | IconName;
+};
+
+/** @internal */
+export function MenuItemPrefix({ prefix }: MenuItemPrefixProps): React.ReactNode {
+  const styles = useStyles2(getStyles);
+
+  if (!prefix) {
+    return null;
+  }
+
+  if (isIconName(prefix)) {
+    return <Icon name={prefix} className={styles.icon} aria-hidden />;
+  }
+
+  if (!isValidElement(prefix)) {
+    return null;
+  }
+
+  return (
+    <div className={styles.prefix} aria-hidden>
+      {prefix}
+    </div>
+  );
+}
+
+function getStyles() {
+  const prefixSize = getSvgSize('md');
+
+  return {
+    icon: css({
+      opacity: 0.7,
+    }),
+    prefix: css({
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      width: prefixSize,
+      height: prefixSize,
+      overflow: 'hidden',
+    }),
+  };
+}

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx

@@ -29,6 +29,7 @@ export function PanelHeaderMenu({ items }: Props) {
               key={item.text}
               label={item.text}
               icon={item.iconClassName}
+              prefix={item.prefix}
               childItems={item.subMenu ? renderItems(item.subMenu) : undefined}
               url={item.href}
               onClick={item.onClick}

public/app/features/plugins/extensions/registry/AddedLinksRegistry.ts

@@ -19,7 +19,12 @@ export type AddedLinkRegistryItem<Context extends object = object> = {
   path?: string;
   onClick?: (event: React.MouseEvent | undefined, helpers: PluginExtensionEventHelpers<Context>) => void;
   configure?: PluginAddedLinksConfigureFunc<Context>;
+  /**
+   * @deprecated Use `prefix` instead. This property will be removed in a future release.
+   */
   icon?: IconName;
+  /** A React element or IconName that will be displayed before the title */
+  prefix?: React.ReactElement | IconName;
   category?: string;
   openInNewTab?: boolean;
 };

public/app/features/plugins/extensions/usePluginLinks.tsx

@@ -73,6 +73,8 @@ export function usePluginLinks({
       }
 
       const path = overrides?.path || addedLink.path;
+      // For backwards compatibility: if prefix is not set, fall back to icon
+      const prefix = overrides?.prefix || addedLink.prefix || overrides?.icon || addedLink.icon;
       const extension: PluginExtensionLink = {
         id: generateExtensionId(pluginId, extensionPointId, addedLink.title),
         type: PluginExtensionTypes.link,
@@ -86,6 +88,7 @@ export function usePluginLinks({
         path: isString(path) ? getLinkExtensionPathWithTracking(pluginId, path, extensionPointId) : undefined,
         category: overrides?.category || addedLink.category,
         openInNewTab: overrides?.openInNewTab ?? addedLink.openInNewTab,
+        prefix,
       };
 
       extensions.push(extension);

public/app/features/plugins/extensions/utils.tsx

@@ -421,6 +421,7 @@ export function createExtensionSubMenu(extensions: PluginExtensionLink[]): Panel
         onClick: extension.onClick,
         iconClassName: extension.icon,
         target: extension.openInNewTab ? '_blank' : undefined,
+        prefix: extension.prefix,
       });
       continue;
     }
@@ -435,6 +436,7 @@ export function createExtensionSubMenu(extensions: PluginExtensionLink[]): Panel
       onClick: extension.onClick,
       iconClassName: extension.icon,
       target: extension.openInNewTab ? '_blank' : undefined,
+      prefix: extension.prefix,
     });
   }
 
@@ -484,6 +486,7 @@ export function getLinkExtensionOverrides(
       icon = config.icon,
       category = config.category,
       openInNewTab = config.openInNewTab,
+      prefix = config.prefix,
       ...rest
     } = overrides;
 
@@ -509,6 +512,7 @@ export function getLinkExtensionOverrides(
       icon,
       category,
       openInNewTab,
+      prefix,
     };
   } catch (error) {
     if (error instanceof Error) {