;
+```
+
+**v9 (component-based) - Recommended:**
+
+```tsx
+import { FileTypeIcon } from '@fluentui/react-file-type-icons';
+
+
`);
+ });
+
+ it('should return correct HTML string for 1.5x DPI with pdf extension', () => {
+ Object.defineProperty(window, 'devicePixelRatio', {
+ writable: true,
+ configurable: true,
+ value: 1.5,
+ });
+
+ const result = getFileTypeIconAsHTMLString(
+ { extension: 'pdf', size: 16, imageFileType: 'png' },
+ DEFAULT_BASE_URL,
+ );
+ expect(result).toBe(
+ `
`,
+ );
+ });
+
+ it('should return correct HTML string for 2x DPI with xlsx extension', () => {
+ Object.defineProperty(window, 'devicePixelRatio', {
+ writable: true,
+ configurable: true,
+ value: 2,
+ });
+
+ const result = getFileTypeIconAsHTMLString(
+ { extension: 'xlsx', size: 16, imageFileType: 'png' },
+ DEFAULT_BASE_URL,
+ );
+ expect(result).toBe(
+ `
`,
+ );
+ });
+ });
+
+ describe('with SVG format', () => {
+ it('should return correct HTML string for 1x DPI with SVG', () => {
+ const result = getFileTypeIconAsHTMLString(
+ { extension: 'docx', size: 24, imageFileType: 'svg' },
+ DEFAULT_BASE_URL,
+ );
+ expect(result).toBe(`
`);
+ });
+
+ it('should return correct HTML string for 1.5x DPI with SVG', () => {
+ Object.defineProperty(window, 'devicePixelRatio', {
+ writable: true,
+ configurable: true,
+ value: 1.5,
+ });
+
+ const result = getFileTypeIconAsHTMLString(
+ { extension: 'pdf', size: 20, imageFileType: 'svg' },
+ DEFAULT_BASE_URL,
+ );
+ expect(result).toBe(
+ `
`,
+ );
+ });
+ });
+
+ describe('with different sizes', () => {
+ it('should include correct size attributes for size 32', () => {
+ const result = getFileTypeIconAsHTMLString(
+ { extension: 'docx', size: 32, imageFileType: 'png' },
+ DEFAULT_BASE_URL,
+ );
+ expect(result).toContain('height="32"');
+ expect(result).toContain('width="32"');
+ expect(result).toContain('alt="docx file icon"');
+ });
+
+ it('should include correct size attributes for size 48', () => {
+ const result = getFileTypeIconAsHTMLString(
+ { extension: 'xlsx', size: 48, imageFileType: 'svg' },
+ DEFAULT_BASE_URL,
+ );
+ expect(result).toContain('height="48"');
+ expect(result).toContain('width="48"');
+ expect(result).toContain('alt="xlsx file icon"');
+ });
+ });
+
+ describe('with custom base URL', () => {
+ const customBaseUrl = 'https://custom.cdn.com/icons/';
+
+ it('should use custom base URL in HTML string', () => {
+ const result = getFileTypeIconAsHTMLString({ extension: 'docx', size: 16, imageFileType: 'svg' }, customBaseUrl);
+ expect(result).toBe(`
`);
+ });
+ });
+
+ describe('edge cases', () => {
+ it('should handle unknown extension gracefully with alt text', () => {
+ // Unknown extensions should still generate valid HTML with alt text
+ const result = getFileTypeIconAsHTMLString({ extension: 'unknown', size: 16 }, DEFAULT_BASE_URL);
+ expect(result).toBeDefined();
+ expect(result).toContain('alt="unknown file icon"');
+ });
+
+ it('should generate alt text from FileIconType when extension is not provided', () => {
+ const result = getFileTypeIconAsHTMLString({ type: FileIconType.folder, size: 16 }, DEFAULT_BASE_URL);
+ expect(result).toBeDefined();
+ expect(result).toContain('alt="folder file icon"');
+ });
+
+ it('should generate empty alt text prefix when neither extension nor type is provided', () => {
+ const result = getFileTypeIconAsHTMLString({ size: 16 }, DEFAULT_BASE_URL);
+ expect(result).toBeDefined();
+ expect(result).toContain('alt=" file icon"');
+ });
+ });
+});
diff --git a/packages/react-components/react-file-type-icons/library/src/utils/getFileTypeIconAsUrl.ts b/packages/react-components/react-file-type-icons/library/src/utils/getFileTypeIconAsUrl.ts
new file mode 100644
index 00000000000000..d27885a86ef5d0
--- /dev/null
+++ b/packages/react-components/react-file-type-icons/library/src/utils/getFileTypeIconAsUrl.ts
@@ -0,0 +1,59 @@
+import { getConfiguredBaseUrl } from './initializeFileTypeIcons';
+import {
+ getFileTypeIconNameFromExtensionOrType,
+ getFileTypeIconSuffix,
+ DEFAULT_ICON_SIZE,
+} from './getFileTypeIconProps';
+import type { FileTypeIconOptions } from './getFileTypeIconProps';
+import { FileIconType } from './FileIconType';
+
+/**
+ * Given the `fileTypeIconOptions`, this function returns the CDN-based URL for `FileTypeIcon`.
+ * Similar to `getFileTypeIconProps`, but rather than returning the `iconName`, this returns the raw URL.
+ * @param options - Provide extension, FileIconType, size, and imageFileType for the requested icon.
+ * @param baseUrl - optionally provide a custom CDN base url to fetch icons from.
+ * If not provided, uses the URL configured via `initializeFileTypeIcons()`,
+ * or falls back to the default CDN URL.
+ */
+export function getFileTypeIconAsUrl(
+ options: FileTypeIconOptions,
+ baseUrl: string = getConfiguredBaseUrl(),
+): string | undefined {
+ const { extension, size = DEFAULT_ICON_SIZE, type, imageFileType = 'svg' } = options;
+ const baseIconName = getFileTypeIconNameFromExtensionOrType(extension, type);
+ const suffix = getFileTypeIconSuffix(size, imageFileType);
+
+ // suffix format: {size}_{imageType} or {size}_{pixelRatio}_{imageType}
+ // Examples: "16_svg", "96_3x_svg", "20_1.5x_png"
+ const lastUnderscoreIndex = suffix.lastIndexOf('_');
+ const fileExtension = suffix.substring(lastUnderscoreIndex + 1);
+ const pathPrefix = suffix.substring(0, lastUnderscoreIndex); // "16" or "96_3x" or "20_1.5x"
+
+ // CDN path format: {baseUrl}{pathPrefix}/{iconName}.{fileExtension}
+ // Examples: baseUrl16/docx.svg, baseUrl96_3x/docx.svg
+ return `${baseUrl}${pathPrefix}/${baseIconName}.${fileExtension}`;
+}
+
+/**
+ * Given the `fileTypeIconOptions`, similar to `getFileTypeIconProps`, this function returns
+ * an 
`);
+ });
+
+ it('should use custom URL after initializeFileTypeIcons is called with custom URL', () => {
+ const customUrl = 'https://my-custom-cdn.com/icons/';
+ initializeFileTypeIcons(customUrl);
+
+ const result = getFileTypeIconAsHTMLString({ extension: 'pdf', size: 24 });
+ expect(result).toBe(`
`);
+ });
+
+ it('should allow explicit baseUrl parameter to override configured URL', () => {
+ const configuredUrl = 'https://configured-cdn.com/icons/';
+ const explicitUrl = 'https://explicit-cdn.com/icons/';
+
+ initializeFileTypeIcons(configuredUrl);
+
+ // Without explicit baseUrl - uses configured URL
+ const resultWithoutExplicit = getFileTypeIconAsHTMLString({ extension: 'xlsx', size: 32 });
+ expect(resultWithoutExplicit).toContain(configuredUrl);
+
+ // With explicit baseUrl - uses explicit URL
+ const resultWithExplicit = getFileTypeIconAsHTMLString({ extension: 'xlsx', size: 32 }, explicitUrl);
+ expect(resultWithExplicit).toContain(explicitUrl);
+ });
+ });
+
+ describe('URL override persistence', () => {
+ it('should persist custom URL across multiple utility calls', () => {
+ const customUrl = 'https://persistent-cdn.com/icons/';
+ initializeFileTypeIcons(customUrl);
+
+ // Multiple calls should all use the configured URL
+ expect(getFileTypeIconAsUrl({ extension: 'docx', size: 16 })).toContain(customUrl);
+ expect(getFileTypeIconAsUrl({ extension: 'pdf', size: 24 })).toContain(customUrl);
+ expect(getFileTypeIconAsUrl({ extension: 'xlsx', size: 32 })).toContain(customUrl);
+ expect(getFileTypeIconAsHTMLString({ extension: 'pptx', size: 48 })).toContain(customUrl);
+ });
+
+ it('should update configured URL when initializeFileTypeIcons is called again', () => {
+ const firstUrl = 'https://first-cdn.com/icons/';
+ const secondUrl = 'https://second-cdn.com/icons/';
+
+ initializeFileTypeIcons(firstUrl);
+ expect(getFileTypeIconAsUrl({ extension: 'docx', size: 16 })).toContain(firstUrl);
+
+ initializeFileTypeIcons(secondUrl);
+ expect(getFileTypeIconAsUrl({ extension: 'docx', size: 16 })).toContain(secondUrl);
+ });
+ });
+});
diff --git a/packages/react-components/react-file-type-icons/library/src/utils/initializeFileTypeIcons.tsx b/packages/react-components/react-file-type-icons/library/src/utils/initializeFileTypeIcons.tsx
new file mode 100644
index 00000000000000..899dfbb006d599
--- /dev/null
+++ b/packages/react-components/react-file-type-icons/library/src/utils/initializeFileTypeIcons.tsx
@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { registerIcons, FLUENT_CDN_BASE_URL } from '@fluentui/style-utilities';
+import { FileTypeIconMap } from './FileTypeIconMap';
+import type { IIconOptions } from '@fluentui/style-utilities';
+import type { JSXElement } from '@fluentui/utilities';
+
+const PNG_SUFFIX = '_png';
+const SVG_SUFFIX = '_svg';
+
+export const DEFAULT_BASE_URL = `${FLUENT_CDN_BASE_URL}/assets/item-types/`;
+export const ICON_SIZES: number[] = [16, 20, 24, 32, 40, 48, 64, 96];
+
+// Module-level state to track the configured base URL
+let _configuredBaseUrl: string | undefined;
+
+/**
+ * Returns the configured base URL if `initializeFileTypeIcons` was called with a custom URL,
+ * otherwise returns the default CDN base URL.
+ * This is used internally by FileTypeIcon component and utility functions.
+ */
+export function getConfiguredBaseUrl(): string {
+ return _configuredBaseUrl ?? DEFAULT_BASE_URL;
+}
+
+/**
+ * Resets the configured base URL to undefined, causing `getConfiguredBaseUrl` to return
+ * the default CDN base URL. This is primarily intended for testing purposes.
+ */
+export function resetConfiguredBaseUrl(): void {
+ _configuredBaseUrl = undefined;
+}
+
+export function initializeFileTypeIcons(baseUrl: string = DEFAULT_BASE_URL, options?: Partial+ These types are not based on file extensions, but represent objects like folders and list items. +
+
+
+ {`// Extract extension from filename
+const getExtension = (filename: string): string => {
+ const parts = filename.split('.');
+ return parts.length > 1 ? parts[parts.length - 1].toLowerCase() : '';
+};
+
+// Usage
+const filename = "Report.Final.PDF";
+const extension = getExtension(filename); // "pdf"
+
+
+
+