Icons: fix iconRoot url (#33243)

jest.config.js

@@ -15,7 +15,10 @@ module.exports = {
   setupFiles: ['jest-canvas-mock', './public/test/jest-shim.ts', './public/test/jest-setup.ts'],
   setupFilesAfterEnv: ['./public/test/setupTests.ts'],
   snapshotSerializers: ['enzyme-to-json/serializer'],
-  globals: { 'ts-jest': { isolatedModules: true } },
+  globals: {
+    'ts-jest': { isolatedModules: true },
+    __webpack_public_path__: '', // empty string
+  },
   moduleNameMapper: {
     '\\.svg': '<rootDir>/public/test/mocks/svg.ts',
     '\\.css': '<rootDir>/public/test/mocks/style.ts',

packages/grafana-ui/src/components/Icon/Icon.tsx

@@ -6,7 +6,10 @@ import { useTheme } from '../../themes/ThemeContext';
 import { IconName, IconType, IconSize } from '../../types/icon';
 import SVG from '@leeoniya/react-inlinesvg';
 
-const iconRoot = '/public/img/icons/';
+declare let __webpack_public_path__: string;
+
+// Lazy load the root url
+let iconRoot: string | undefined = undefined;
 const alwaysMonoIcons: IconName[] = ['grafana', 'favorite', 'heart-break', 'heart', 'panel-add', 'reusable-panel'];
 
 export interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -56,6 +59,19 @@ export const Icon = React.forwardRef<HTMLDivElement, IconProps>(
       size = 'xl';
     }
 
+    // Lazy load -- this will give time the the CDN path to be injected on app init
+    if (!iconRoot) {
+      if (__webpack_public_path__) {
+        const publicpath = // __webpack_public_path__ includes the 'build/' suffix
+          __webpack_public_path__.substring(0, __webpack_public_path__.lastIndexOf('build/')) ||
+          __webpack_public_path__;
+
+        iconRoot = publicpath + 'img/icons/';
+      } else {
+        iconRoot = '/public/img/icons/'; // will only happen for non-grafana builds
+      }
+    }
+
     const styles = getIconStyles(theme);
     const svgSize = getSvgSize(size);
     const svgHgt = svgSize;