Icon usage / import

[boeckMt]

The usage of the icons (Developer Experience) with angular could be enhanced.

I don't know if this is the right place here or the Issue should be in https://github.com/carbon-design-system/carbon

maybe related to: #2660

---

Would it be possible to publish Icons like the react package so they can be easily imported and used e.g.

import { ViewOff } from '@carbon/icons-react';

...

<svg cdsIcon="ViewOff" size="20"></svg>

The import provides Intellisense due to the provided declaration files, so you only need to enter "Vie" and see already all icons you can import starting with these letters.

Current stepps to use and find Icons

1. find icons on carbondesignsystem.com and copy path view--off.svg

2. declare module

   // https://angular.carbondesignsystem.com/documentation/index.html
   Then we need to declare @carbon/icons as a module by creating a module.d.ts

3. Import and register icons

   // https://carbondesignsystem.com/developing/angular-tutorial/step-1/
   Notice that the icon names are the same as their file path. This how the directive queries the service for the icon.

import { IconModule, IconService } from 'carbon-components-angular';
...

// Check that you are importing the correct size that you will later use in the template
import ViewOff20 from '@carbon/icons/es/view--off/20.js';

...

protected iconService = inject(IconService);

this.iconService.register(ViewOff20);

Used Version

• "carbon-components-angular": "^5.61.1"
• "@carbon/icons": "^11.68.0"

Alternatives

• Maybe provide the correct paths to @carbon/icons/... on carbondesignsystem.com like the download or copy feature.
• Provide some helper scripts where users can create declarations after install of icons (@carbon/icon-helpers ?)