feat: support custom icons

cypress/e2e/MainPage.feature

@@ -42,3 +42,15 @@ Feature: User interacts with Main page
         Then you see the opt out component for Child Programme
         When you opt out to use the new enrollment Dashboard for Child Programme
         Then you see the opt in component for Child Programme
+
+    @v<41
+    Scenario: The icon is rendered as an svg
+        Given you are in the main page with no selections made
+        When you select Child Programme
+        Then the icon is rendered as an svg
+
+    @v>=41
+    Scenario: The icon is rendered as a custom icon
+        Given you are in the main page with no selections made
+        When you select Child Programme
+        Then the icon is rendered as a custom icon

cypress/e2e/MainPage/index.js

@@ -20,6 +20,18 @@ And('you can load the view with the name Events assigned to me', () => {
         });
 });
 
+Then('the icon is rendered as a custom icon', () => {
+    cy.get('[alt="child_program_positive"]')
+        .invoke('attr', 'src')
+        .should('match', /\/icons\/child_program_positive\/icon$/);
+});
+
+Then('the icon is rendered as an svg', () => {
+    cy.get('[alt="child_program_positive"]')
+        .invoke('attr', 'src')
+        .should('match', /\/icons\/child_program_positive\/icon.svg$/);
+});
+
 Then('the TEI working list is displayed', () => {
     cy.get('[data-test="tei-working-lists"]').within(() => {
         cy.contains('Rows per page').should('exist');

src/core_modules/capture-core-utils/featuresSupport/support.js

@@ -2,12 +2,14 @@
 export const FEATURES = Object.freeze({
     programStageWorkingList: 'programStageWorkingList',
     storeProgramStageWorkingList: 'storeProgramStageWorkingList',
+    customIcons: 'customIcons',
 });
 
 // The first minor version that supports the feature
 const MINOR_VERSION_SUPPORT = Object.freeze({
     [FEATURES.programStageWorkingList]: 39,
     [FEATURES.storeProgramStageWorkingList]: 40,
+    [FEATURES.customIcons]: 41,
 });
 
 export const hasAPISupportForFeature = (minorVersion: string, featureName: string) =>

src/core_modules/capture-core/components/NonBundledDhis2Icon/NonBundledDhis2Icon.component.js

@@ -1,13 +1,20 @@
 // @flow
 import React from 'react';
 import { useConfig } from '@dhis2/app-runtime';
-import { buildUrl } from 'capture-core-utils';
+import { buildUrl, FEATURES, useFeature } from 'capture-core-utils';
 import { NonBundledIcon } from 'capture-ui';
 import type { Props } from './nonBundledDhis2Icon.types';
 
 export const NonBundledDhis2Icon = ({ name, alternativeText = name, ...passOnProps }: Props) => {
+    const supportCustomIcons = useFeature(FEATURES.customIcons);
     const { baseUrl, apiVersion } = useConfig();
-    const source = name && buildUrl(baseUrl, `api/${apiVersion}/icons/${name}/icon.svg`);
+    let source;
+
+    if (name) {
+        source = buildUrl(baseUrl, `api/${apiVersion}/icons/${name}/icon`);
+        // Append .svg to source if supportCustomIcons is false (feature flag v41)
+        source = supportCustomIcons ? source : `${source}.svg`;
+    }
 
     return (
         <NonBundledIcon