Icons not shown in production

Siemens iX
1

Hello fellow devs,
I’m using Angular CLI: 19.2.11

The ix framework works great but since i build a production app all the icons in the application are gone…
For example:

  <ix-menu #menu>
    <ix-menu-item routerLink="./home" icon="home">Home</ix-menu-item>
    <ix-menu-item routerLink="/logs">Logs</ix-menu-item>
    <ix-menu-item routerLink="/download" icon="download">Download</ix-menu-item>
</ix-menu>

The icons are there when i run ng serve but when i run the build, the icons will correctly added to:
dist\cbt_web_env_angular\browser\svg
and even when i run the build app i can find the home icon at:
http://127.0.0.1:8081/svg/home.svg

i dont know how to tell the ix lib to use the icons provided there…
Maybe someone has an example project that has icons after build =)

thank you very much in advance

2

okay i found a solution add this to your main.ts:

import { defineCustomElements } from '@siemens/ix/loader';

import { defineCustomElements as defineIconsCustomElements } from '@siemens/ix-icons/loader';

defineIconsCustomElements();

defineCustomElements();

sorry to say but why is this not in the official documenation on the icon page??

3

You are right, this should probably be mentioned at least in the installation guide. Currently it can be found on the ix-icons repo page here.

4

Thank you Lukas. This is what i found also.
Problem solved. Thread can be closed =)