Warnings related to icons during unit test execution (Ionic v8.4.3)

Ionic Framework Ionic Angular
1

Hi guys, I’m using Ionic 8.4.3 in an Angular 17 application. I have an object with all the icons we use in the application and another with some custom icons:

export const CUSTOM_ICONS: Record<string, string> = {
  'custom-edit': 'assets/icons/edit.svg',
  'custom-device': 'assets/icons/device.svg',
  'custom-device-outline': 'assets/icons/device-outline.svg',
};

export const IONICONS: Record<string, string> = {
  add,
  addCircle,
  addCircleOutline,
  addOutline,
  warning,
  warningOutline,
};

And both are registered in the AppComponent as follows:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  standalone: true,
})
export class AppComponent {
  constructor() {
    addIcons({
      ...IONICONS,
      ...CUSTOM_ICONS,
    });
  }
}

And for testing, I created a function that mocks all the icons:

// Minimum and valid SVG for testing
const MOCK_MINIMAL_SVG = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'/>";

export function mockIonicons(): void {
  const mockIcons: Record<string, string> = {};

  Object.keys(icons).forEach(key => {
    const formattedKey = key.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);
    mockIcons[formattedKey] = MOCK_MINIMAL_SVG;
  });

  Object.keys(CUSTOM_IONIC_ICONS).forEach(iconName => {
    mockIcons[iconName] = MOCK_MINIMAL_SVG;
  });

  addIcons(mockIcons);
}

This function is executed in the test.ts file:

// Mock Ionic icons that generate 404 warnings during test execution
mockIonicons();

// Initialize the Angular testing environment
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());

Before updating the Ionic version, this was working (I was using version 6). These are the warnings that are appearing for each icon registered in addIcons():

WARN: '[Ionicons Warning]: Multiple icons were mapped to name "add". Ensure that multiple icons are not mapped to the same icon name.'

WARN: '[Ionicons Warning]: Multiple icons were mapped to name "add-circle". Ensure that multiple icons are not mapped to the same icon name.'

...

Is there any way to suppress these warnings?

2

In case anyone else comes here with the same problem, I found a solution. In the same file where I declare the icons that are used in the application, I created a class that exports a single function, called registerIcons():

export const CUSTOM_ICONS: Record<string, string> = {
  'custom-edit': 'assets/icons/edit.svg',
  'custom-device': 'assets/icons/device.svg',
  'custom-device-outline': 'assets/icons/device-outline.svg',
};

export const IONICONS: Record<string, string> = {
  add,
  addCircle,
  addCircleOutline,
  addOutline,
  warning,
  warningOutline,
};

export const Icons = {
  registerIcons(icons: Record<string, string>): void {
    addIcons(icons);
  },
};

This is the function responsible for executing addIcons(), previously I did this in AppComponent. Now it looks like this:

import { CUSTOM_IONIC_ICONS, IONIC_ICONS, Icons } from '../icons';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  standalone: true,
})
export class AppComponent {
  constructor() {
    // Before:
    // addIcons({ ...IONICONS, ...CUSTOM_ICONS });

    Icons.registerIcons({ ...IONIC_ICONS, ...CUSTOM_IONIC_ICONS });
  }
}

With this Icons class, the mockIcons function was also changed, but instead of executing the addIcons() function directly as it was done previously, it now executes the registerIcons() function mocking the icons:

// Minimum and valid SVG for testing
const MOCK_MINIMAL_SVG = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'/>";

export function mockIonicons(): void {
  const mockIcons: Record<string, string> = {};

  Object.keys(icons).forEach(key => {
    const formattedKey = key.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);
    mockIcons[formattedKey] = MOCK_MINIMAL_SVG;
  });

  Object.keys(CUSTOM_IONIC_ICONS).forEach(iconName => {
    mockIcons[iconName] = MOCK_MINIMAL_SVG;
  });

  // addIcons(mockIcons); 👈🏻 This part was replaced with the line below
  Icons.registerIcons(mockIcons);
}

This way the icons are no longer registered twice because the real addIcons() function is no longer executed during the tests and the warnings are no longer displayed.