# Icon workflow

* [Add the new icon](#add-the-new-icon)
* [Register the icon](#register-the-icon)
* [Display the icon](#display-the-icon)
* [Source code and list of attributes](#source-code-and-list-of-attributes)

## Add the new icon

Icons can be added and managed easily within their own files. 

Icons: `libs\constants\src\lib\icons`

`Create` a new file for the new icon.

Example: `icon-bitcoin.constant.ts`

`Update` the file according with the icon information.

```typescript
import { Icon } from '@full-stack-typescript/models';

export const ICON_BITCOIN: Icon = {
	name: 'bitcoin',
	data: '<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6V4m4 2V4m0 2H7m7 0a3 3 0 1 1 0 6m-5 6v-6m0-6v6m1 8v-2m4 2v-2m-5-6h6a3 3 0 1 1 0 6H7"/></svg>'
};
```

**Note:** the property that controls the icon's color **must** use the value `currentColor` to enable styling through the icon component.

`Update` the `index.ts` file to export the new icon.

## Register the icon

Icons are registered in the feature module that displays the icon. This enables the best tree-shaking and ensures the highest application performance.

In the feature module component, register the icon:

`Import` the `IconsModule` in the feature module.

`Register` the icon for use in the component.

```typescript
export class IconExamplesComponent {
	private iconRegistryService = inject(IconRegistryService);

	constructor() {
		this.iconRegistryService.registerIcons([ICON_BITCOIN]);
	}
}
```

## Display the icon

Once an icon is registered it can be used and configured in the template.

```html
<full-stack-typescript-icons [name]="'bitcoin'" [color]="'#b5a33f'" [height]="'175'" [width]="'175'"></full-stack-typescript-icons>
```

## Source code and list of attributes

Icon customizations and configuration requirements can be viewed from its source code.

Reference: `libs\features\icons\src\lib\icons.component.ts`