### Install ion-icon-angular-standalone

Source: https://github.com/atamaplus-public/ion-icon-angular-standalone/blob/main/README.md

Installs the ion-icon-angular-standalone library using npm. This command adds the package as a project dependency.

```shell
npm i -S ion-icon-angular-standalone
```

--------------------------------

### Install ion-icon-angular-standalone

Source: https://github.com/atamaplus-public/ion-icon-angular-standalone/blob/main/projects/ion-icon-angular-standalone/README.md

Installs the ion-icon-angular-standalone library using npm. This command adds the package as a project dependency.

```shell
npm i -S ion-icon-angular-standalone
```

--------------------------------

### ESLint Configuration for Restricted Imports

Source: https://github.com/atamaplus-public/ion-icon-angular-standalone/blob/main/projects/ion-icon-angular-standalone/README.md

Provides an ESLint configuration to enforce the restriction of importing `IonIcon` directly from `@ionic/angular/standalone`. It guides developers to use the library's specific icon components instead.

```json
{
  "no-restricted-imports": [
    "error",
    {
      "paths": [
        {
          "name": "@ionic/angular",
          "message": "Use @ionic/angular/standalone instead."
        },
        {
          "name": "@ionic/angular/standalone",
          "importNames": ["IonIcon"],
          "message": "Use components from ion-icon-angular-standalone instead."
        }
      ]
    }
  ]
}
```

--------------------------------

### ESLint Configuration for Restricted Imports

Source: https://github.com/atamaplus-public/ion-icon-angular-standalone/blob/main/README.md

Provides an ESLint configuration to enforce the restriction of importing `IonIcon` directly from `@ionic/angular/standalone`. It guides developers to use the library's specific icon components instead.

```json
{
  "no-restricted-imports": [
    "error",
    {
      "paths": [
        {
          "name": "@ionic/angular",
          "message": "Use @ionic/angular/standalone instead."
        },
        {
          "name": "@ionic/angular/standalone",
          "importNames": ["IonIcon"],
          "message": "Use components from ion-icon-angular-standalone instead."
        }
      ]
    }
  ]
}
```

--------------------------------

### Use Per-icon IonIcon Component

Source: https://github.com/atamaplus-public/ion-icon-angular-standalone/blob/main/projects/ion-icon-angular-standalone/README.md

Demonstrates importing and using a specific icon component (`IonIcon_logoIonic`) from the library in an Angular component. This replaces the standard `IonIcon` and eliminates the need for manual `addIcons` calls for that specific icon.

```typescript
// instead of:
// import { IonIcon } from '@ionic/angular';
// import { addIcons } from 'ionicons';
// import { logoIonic } from 'ionicons/icons';
import { IonIcon_logoIonic } from 'ion-icon-angular-standalone';

@Component({
  selector: 'foo-bar',
  template: `
    <ion-icon name="logo-ionic"></ion-icon>
  `,
  standalone: true,
  imports: [
    IonIcon_logoIonic, // instead of `IonIcon`
  ],
})
export class FooBarComponent {
  // no need to call `addIcons({ logoIonic })`
}
```

--------------------------------

### Use Per-icon IonIcon Component

Source: https://github.com/atamaplus-public/ion-icon-angular-standalone/blob/main/README.md

Demonstrates importing and using a specific icon component (`IonIcon_logoIonic`) from the library in an Angular component. This replaces the standard `IonIcon` and eliminates the need for manual `addIcons` calls for that specific icon.

```typescript
// instead of:
// import { IonIcon } from '@ionic/angular';
// import { addIcons } from 'ionicons';
// import { logoIonic } from 'ionicons/icons';
import { IonIcon_logoIonic } from 'ion-icon-angular-standalone';

@Component({
  selector: 'foo-bar',
  template: `
    <ion-icon name="logo-ionic"></ion-icon>
  `,
  standalone: true,
  imports: [
    IonIcon_logoIonic, // instead of `IonIcon`
  ],
})
export class FooBarComponent {
  // no need to call `addIcons({ logoIonic })`
}
```

--------------------------------

### Use IonIcon with Branded Type

Source: https://github.com/atamaplus-public/ion-icon-angular-standalone/blob/main/projects/ion-icon-angular-standalone/README.md

Shows how to use `IonIconWithBrandedName` for dynamic icon names, ensuring type safety and preventing missing `addIcons` calls. It utilizes the `addIcon` function to register icons and returns a type-safe `IconName` for input binding.

```typescript
// instead of:
// import { IonIcon } from '@ionic/angular';
// import { addIcons } from 'ionicons';
import { addIcon, IconName, IonIconWithBrandedName } from 'ion-icon-angular-standalone/branded';
import { logoIonic } from 'ionicons/icons';

@Component({
  selector: 'foo-bar',
  template: `
    <ion-icon [name]="iconName ?? fallbackIconName"></ion-icon>
  `,
  standalone: true,
  imports: [
    IonIconWithBrandedName, // instead of IonIcon
  ],
})
export class FooBarComponent {
  // `IconName` type makes sure the input is `addIcon()`ed already. 
  @Input() iconName: IconName | undefined = undefined;
  
  // Instead of plain string, use the return value of `addIcon` function.
  readonly fallbackIconName = addIcon({ logoIonic }); // 'logo-ionic' as IconName
}
```

--------------------------------

### Use IonIcon with Branded Type

Source: https://github.com/atamaplus-public/ion-icon-angular-standalone/blob/main/README.md

Shows how to use `IonIconWithBrandedName` for dynamic icon names, ensuring type safety and preventing missing `addIcons` calls. It utilizes the `addIcon` function to register icons and returns a type-safe `IconName` for input binding.

```typescript
// instead of:
// import { IonIcon } from '@ionic/angular';
// import { addIcons } from 'ionicons';
import { addIcon, IconName, IonIconWithBrandedName } from 'ion-icon-angular-standalone/branded';
import { logoIonic } from 'ionicons/icons';

@Component({
  selector: 'foo-bar',
  template: `
    <ion-icon [name]="iconName ?? fallbackIconName"></ion-icon>
  `,
  standalone: true,
  imports: [
    IonIconWithBrandedName, // instead of IonIcon
  ],
})
export class FooBarComponent {
  // `IconName` type makes sure the input is `addIcon()`ed already. 
  @Input() iconName: IconName | undefined = undefined;
  
  // Instead of plain string, use the return value of `addIcon` function.
  readonly fallbackIconName = addIcon({ logoIonic }); // 'logo-ionic' as IconName
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.