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 ?)

[Licen-it]

you can import import { ViewOff20 } from '@carbon/icons'; and it will work fine...using this way since the beginning

[boeckMt]

Thanks for the comment @Licen-it :)
When I try that, I get a TypeScript error. Could not find a declaration file for module '@carbon/icons'.

If I only declare a module like this declare module '@carbon/icons/*'; I don't get any import suggestions.

[Licen-it]

I think the error depends on Typescript or Angular configuration you have....or even more likely the version of carbon icons you have. Make sure to have latest carbon icons version before digging into typescript/angular configuration