SVG parsing error in Firefox, and the search icon is not displayed

[jsakamotoIGJP]

Description

When opening an Angular application that uses IgxIcon in Firefox, the following error message appears in the developer console:

XML Parsing Error: mismatched tag. Expected: </path>.
Location: https://localhost:4200/
Line Number 1, Column 282:

As a result, the search icon does not appear.

The cause of this issue is that the element in the SVG string of the source code below is not closed correctly. In other SVG icon definitions, the <path> element is correctly implemented as a self-closing tag.

igniteui-angular/projects/igniteui-angular/src/lib/icon/icons.indigo.ts

Line 241 in bad2dea

value: `<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 24 24"><path d="M10.393 3a7.393 7.393 0 1 0 4.068 13.567l3.996 3.997a1.49 1.49 0 1 0 2.107-2.107l-3.997-3.996A7.393 7.393 0 0 0 10.393 3ZM6 10.393a4.393 4.393 0 1 1 8.786 0 4.393 4.393 0 0 1-8.786 0Z"></svg>`,

• igniteui-angular version: 19.1.6
• browser: Moziila Firefox 136.0.4

Steps to reproduce

1. Download and extract the zip file, 📦ng-app1.zip, I attached to this post into a working directory.
2. Run the npm ci and npm run dev commands.
3. Open the Angular app by Firefox.

Result

The error message XML Parsing Error: mismatched tag. Expected: </path> was shown, and the search icon didn't appear.

Expected result

No error in the developer console, and the search icon should appear correctly.

Attachments

📦ng-app1.zip

Notes

This problem does not occur on other browsers, such as Google Chrome on macOS, Microsoft Edge on Windows, and Apple Safari on iOS.

[jsakamotoIGJP]

Thanks, @SisIvanova, for taking time to resolve this issue!