@semantic-icons/flag-icons

@semantic-icons/flag-icons helps developers to use Flag icons inside Angular projects.

Supported versions

@semantic-icons/flag-icons	Angular	Flag-icons
0.x.x	>= 17.1.0	7.2.3

Usage

First, install @semantic-icons/flag-icons from npm:

1npm install @semantic-icons/flag-icons

Now each icon can be imported individually as an Angular component:

1import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
2
3import { SiMaFlagIcon } from '@semantic-icons/flag-icons/square';
4
5@Component({
6  selector: 'app-home-page',
7  standalone: true,
8  imports: [SiMaFlagIcon],
9  template: `
10    <svg class="size-36" si-ma-flag-icon></svg>
11  `,
12  styles: ``,
13  encapsulation: ViewEncapsulation.None,
14  changeDetection: ChangeDetectionStrategy.OnPush,
15})
16export default class HomePage {}

The square shaped icons can be imported from @semantic-icons/flag-icons/square, the rectangle shaped icons can be imported from @semantic-icons/flag-icons/rectangle.

Icons use the Angular naming convention and are always prefixed with the word si and suffixed with the words flag icon.

License

MIT © 2024-2025 Khalil LAGRIDA