Directory

← Back

flag-icons

A set of flags for use with iron-icon

Author

Rating

Popularity

<100

[ This description is mirrored from README.md at github.com/Dabolus/flag-icons on 2019-05-22 ]

<flag-icons>

Published on webcomponents.org Travis build GitHub release

Demo and API docs

flag-icons is an iconset that allows you to easily display flags on you application/website.

It features 195 flat icons with rounded corners, that can be useful if you want to allow the user to change the language in you internationalized application.

Note: the credits for the original flags go to Muharrem Şenyıl.
I just ported them to SVG and then to an iconset.

Installation

bower install --save Dabolus/flag-icons

Usage

Using an iconset is extremely simple. These are the steps you need to follow:

  1. Load the iconset:
    <link rel="import" href="../bower_components/flag-icons/flag-icons.html">
    
  2. Insert your icon using iron-icon
    <iron-icon icon="flag:gb"></iron-icon>
    
  3. Done!

The flags can also be used inside a paper-icon-button.

Example with normal iron-icons:

<iron-icon icon="flag:af"></iron-icon>
<iron-icon icon="flag:al"></iron-icon>
<iron-icon icon="flag:dz"></iron-icon>

Example with paper-icon-buttons:

<paper-icon-button icon="flag:ad"></paper-icon-button>
<paper-icon-button icon="flag:ag"></paper-icon-button>
<paper-icon-button icon="flag:ar"></paper-icon-button>

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • iron-icon#PolymerElements/iron-icon#^2.0.0
  • iron-iconset-svg#PolymerElements/iron-iconset-svg#^2.0.0
  • polymer#Polymer/polymer#^2.0.0
Released
2017-08-08
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent

flag-icons - Vaadin Add-on Directory

A set of flags for use with iron-icon flag-icons - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/Dabolus/flag-icons](https://github.com//Dabolus/flag-icons/blob/2.0.0/README.md) on 2019-05-22 ]** # <flag-icons> [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/Dabolus/flag-icons) [![Travis build](https://img.shields.io/travis/Dabolus/flag-icons.svg)](https://travis-ci.org/Dabolus/flag-icons) [![GitHub release](https://img.shields.io/github/release/Dabolus/flag-icons/all.svg)](https://github.com/Dabolus/flag-icons) _[Demo and API docs](https://www.webcomponents.org/element/Dabolus/flag-icons)_ `flag-icons` is an iconset that allows you to easily display flags on you application/website. It features 195 flat icons with rounded corners, that can be useful if you want to allow the user to change the language in you internationalized application. _Note: the credits for the original flags go to [Muharrem Şenyıl](https://freebiesbug.com/psd-freebies/100-flat-flag-psd-icons/).
I just ported them to SVG and then to an iconset._ ## Installation ``` bower install --save Dabolus/flag-icons ``` ## Usage Using an iconset is extremely simple. These are the steps you need to follow: 1. Load the iconset: ```html ``` 2. Insert your icon using [`iron-icon`](https://www.webcomponents.org/element/PolymerElements/iron-icon) ```html ``` 3. Done! _The flags can also be used inside a [`paper-icon-button`](https://www.webcomponents.org/element/PolymerElements/paper-icon-button)._ Example with normal `iron-icon`s: ```html ``` Example with `paper-icon-button`s: ```html ```
Online