diff --git a/packages/grafana-data/src/types/icon.ts b/packages/grafana-data/src/types/icon.ts
index 06638adcaa5..f88699833d8 100644
--- a/packages/grafana-data/src/types/icon.ts
+++ b/packages/grafana-data/src/types/icon.ts
@@ -37,6 +37,7 @@ export const availableIconsIndex = {
   'arrows-v': true,
   asserts: true,
   'expand-arrows': true,
+  'expand-arrows-alt': true,
   at: true,
   ai: true,
   backward: true,
@@ -75,6 +76,7 @@ export const availableIconsIndex = {
   'comment-alt-share': true,
   'comments-alt': true,
   compass: true,
+  'compress-arrows': true,
   copy: true,
   'corner-down-right-alt': true,
   'create-dashboard': true,
diff --git a/packages/grafana-ui/src/components/Button/Button.tsx b/packages/grafana-ui/src/components/Button/Button.tsx
index 6ec6fe74132..aed75a98f71 100644
--- a/packages/grafana-ui/src/components/Button/Button.tsx
+++ b/packages/grafana-ui/src/components/Button/Button.tsx
@@ -1,7 +1,7 @@
 import { css, cx } from '@emotion/css';
 import React, { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
 
-import { GrafanaTheme2, isIconName, ThemeRichColor } from '@grafana/data';
+import { GrafanaTheme2, ThemeRichColor } from '@grafana/data';
 
 import { useTheme2 } from '../../themes';
 import { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';
@@ -161,17 +161,16 @@ interface IconRendererProps {
   iconType?: IconType;
 }
 export const IconRenderer = ({ icon, size, className, iconType }: IconRendererProps) => {
+  if (!icon) {
+    return null;
+  }
   if (React.isValidElement(icon)) {
     return React.cloneElement(icon, {
       className,
       size,
     });
   }
-  if (isIconName(icon)) {
-    return <Icon name={icon} size={size} className={className} type={iconType} />;
-  }
-
-  return null;
+  return <Icon name={icon} size={size} className={className} type={iconType} />;
 };
 
 export interface StyleProps {