How to add country icons to an Angular app
Angular is well served for icons. Material Symbols alone runs to thousands of glyphs, and the community wrappers pull in dozens of other sets on top. Geography is where the shelf runs out. You get globes and map pins, sometimes a set of flags, rarely the outline of Japan and almost never the six states of the GCC. GeoIcons ships country and area icons as Angular standalone components, 422 of them at the time of writing. Adding one takes three steps: install the package, import the component by its ISO code, and render its selector. npm i @geoicons/angular import { Component } from ' @angular/core ' ; import { Us } from ' @geoicons/angular/countries ' ; @ Component ({ selector : ' app-root ' , imports : [ Us ], template : `<geoicon-us aria-label="United States" />` , }) export class App {} See it live on geoicons.io → That is the whole path. Below: inputs, styling, accessibility, and picking an icon when you only know the country at runtime. Key takeaways Install @geoicons/angular , import each country by its ISO 3166 alpha-2 code in PascalCase, and add it to the component's imports array. The class is Us ; the selector you write in the template is <geoicon-us /> . Styling props are explicit inputs, because Angular has no rest spread. Everything else goes on the host element. Icons render as decorative unless you name them, so reach for aria-label only where no adjacent text says the country. Step 1: Install the Angular package Add the package to your project: npm i @geoicons/angular It needs @angular/core and @angular/common 15.1 or newer, plus rxjs 7 or newer. That 15.1 floor comes from hostDirectives , which the icons use to share their styling inputs and which landed in that release alongside standalone components . The package sets "sideEffects": false , so the CLI can drop what you never import. List three icons in a component and you ship three. Why that matters for icon libraries . Step 2: Import by ISO code Every country ships as a named export under its ISO