From bce3d4f19ecef87ccfe16ce2fa0c5a65719fece3 Mon Sep 17 00:00:00 2001
From: Vladislav Korenkov <73882772+Quatters@users.noreply.github.com>
Date: Wed, 11 Jun 2025 22:03:53 +1000
Subject: [PATCH] fix(explore): add gap to the "Cached" button (#33717)

---
 .../src/components/CachedLabel/index.tsx              | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/src/components/CachedLabel/index.tsx b/superset-frontend/src/components/CachedLabel/index.tsx
index 9fd35b41543..3ac26c2f5e0 100644
--- a/superset-frontend/src/components/CachedLabel/index.tsx
+++ b/superset-frontend/src/components/CachedLabel/index.tsx
@@ -18,10 +18,11 @@
  */
 import { useState, MouseEventHandler, FC } from 'react';
 
-import { t } from '@superset-ui/core';
+import { css, t } from '@superset-ui/core';
 import Label from 'src/components/Label';
 import { Tooltip } from 'src/components/Tooltip';
 import { TooltipContent } from './TooltipContent';
+import { Icons } from '../Icons';
 
 export interface CacheLabelProps {
   onClick?: MouseEventHandler<HTMLElement>;
@@ -44,14 +45,16 @@ const CacheLabel: FC<CacheLabelProps> = ({
     >
       <Label
         className={`${className}`}
+        css={theme => css`
+          gap: ${theme.gridUnit * 0.5}px;
+        `}
         type={labelType}
         onClick={onClick}
         onMouseOver={() => setHovered(true)}
         onMouseOut={() => setHovered(false)}
       >
-        {/* TODO: Remove fa-icon */}
-        {/* eslint-disable-next-line icons/no-fa-icons-usage */}
-        {t('Cached')} <i className="fa fa-refresh" />
+        {t('Cached')}
+        <Icons.SyncOutlined iconSize="m" />
       </Label>
     </Tooltip>
   );