Angular

@geoicons/angular ships every icon as its own tree-shakeable standalone component. Install it, import by category, add the icon to your component's imports, and style with inputs. The full prop contract lives on the API overview. It's the same in every framework.

Requires Angular 15.1+ (standalone components + hostDirectives). Works through the latest Angular. Ids for the accessible <title> are supplied by a root service, so they stay unique and SSR-safe under Angular Universal.

Install

npm install @geoicons/angular

Import

import { Jp } from '@geoicons/angular/countries'; // country
import { Africa } from '@geoicons/angular/areas'; // area

Examples

import { Component } from '@angular/core';
import { Jp } from '@geoicons/angular/countries';

@Component({
  selector: 'app-flag',
  standalone: true,
  imports: [Jp],
  template: `
    <!-- Default outline -->
    <geoicon-jp />

    <!-- Larger, bolder -->
    <geoicon-jp [size]="64" [strokeWidth]="1.75" />

    <!-- Filled -->
    <geoicon-jp [fill]="'currentColor'" />

    <!-- Meaningful (announced by screen readers) -->
    <geoicon-jp aria-label="Japan" />
  `,
})
export class FlagComponent {}

Each icon's element selector is geoicon-<code> (e.g. geoicon-jp, geoicon-us-ca). Bind the convenience inputs with [size] / [strokeWidth] and the color inputs with [stroke] / [fill].

Angular has no {...rest} spread, so size, strokeWidth, stroke, fill, and aria-label are exposed as explicit inputs. Other attributes (class, style, data-*) go on the <geoicon-*> host element. There is no variant prop. Weight and fill are continuous. See Styling.

License

If you're using GeoIcons with a commercial product, register the license provider to activate your license. It verifies your commercial license key and waives the GPLv3 licensing requirements, allowing you to use GeoIcons in proprietary applications under the terms of your commercial license. Verification runs client-side only, so it is safe under SSR / Angular Universal.

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideGeoiconsLicense } from '@geoicons/angular';

export const appConfig: ApplicationConfig = {
  providers: [provideGeoiconsLicense(process.env['GEOICONS_KEY'])],
};

Read the current status anywhere by injecting GeoiconsLicenseService (.status or the status$ observable). See Licensing for more details.