height="256px" width="256px" style="text-align: center;"
src="https://cdn.jsdelivr.net/gh/angular-material-extensions/select-icon@master/assets/angular-material-extensions-logo.svg">

@angular-material-extensions/select-icon - Angular component that allows to select an option in form of a material design icon button


src="https://raw.githubusercontent.com/angular-material-extensions/select-icon/HEAD/assets/v1.0.0/demo.gif">

Built by and for developers :heart:

Do you have any question or suggestion ? Please do not hesitate to contact us!
Alternatively, provide a PR | open an appropriate issue here

If you like this project, support angular-material-extensions
by starring :star: and sharing it :loudspeaker:

Table of Contents

- Demo
- Components
- Dependencies
- Installation
- API
- Usage
- Run Demo App Locally
- Other Angular Libraries
- Support
- License

Demo

View all the directives and components in action at https://angular-material-extensions.github.io/select-country

Library's components

- used to display the main component

---

Dependencies

* Angular developed and tested with 10.x

---

Installation

1. Install via ng add. (Recommended)

If Angular Material Design is not setup, just run ng add @angular/material learn more

Now add the library via the angular schematics
``shell
ng add @angular-material-extensions/select-icon
`

2. Install via npm. (Alternative)

Now install @angular-material-extensions/select-icon via:
`shell
npm install --save @angular-material-extensions/select-icon
`




$3

If you installed the library via angular schematics, you can skip this step


`typescript
import { MatSelectIconModule } from '@angular-material-extensions/select-icon';

@NgModule({
declarations: [AppComponent, ...],
imports: [MatSelectIconModule, ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
`

Other modules in your application like for lazy loading import MatSelectIconModule into your feature module:




API

$3

| option | bind | type | default | description |
|:-------------------|:--------:|:------:|:------------:|:-------------------------------------------------------------------------------------------------|
| icons | Input() | MatSelectIcon[] | - | the icons to display
| value | Input() | MatSelectIcon | - | the selected value
| onIconSelected | Output() | EventEmitter | - | emits the selected icon as object (see the interface below)


`typescript
interface MatSelectIcon {
url: string;
value?: any;
color?: ThemePalette;
tags?: string[]; // todo: 10.2020
}
`




Usage

`html

`

`typescript

import { MatSelectIcon } from '@angular-material-extensions/select-icon';

icons: MatSelectIcon[] = [
{
url: 'assets/icons/countrys-flags/lebanon.svg'
// color: 'accent'
},
{
url: 'assets/icons/countrys-flags/germany.svg',
color: 'warn'
},
{
url: 'assets/icons/countrys-flags/italy.svg',
color: 'primary'
},
{
url: 'assets/icons/countrys-flags/france.svg',
color: 'primary'
},
{
url: 'assets/icons/countrys-flags/spain.svg',
color: 'accent'
},
{
url: 'assets/icons/countrys-flags/united-kingdom.svg',
color: 'accent'
}
];

onIconSelected(selectedIcon: MatSelectIcon) {
console.log('selected icon');
}
`


src="https://raw.githubusercontent.com/angular-material-extensions/select-icon/HEAD/assets/v1.0.0/demo.png">



#### with reactive forms

`html

`

`typescript

import { MatSelectIcon } from '@angular-material-extensions/select-icon';

selectIconFC: FormControl = new FormControl();
`


with selected value

`html

`

`typescript

import { MatSelectIcon } from '@angular-material-extensions/select-icon';

selectIconDefault: FormControl = new FormControl(this.icons[0]);
`

$3

Build the library

`bash
$ npm run build:lib
`

Serve the demo app

`bash
$ npm start
``

Other Angular Libraries

- ngx-auth-firebaseui
- ngx-linkifyjs
- @angular-material-extensions/password-strength
- @angular-material-extensions/google-maps-autocomplete
- @angular-material-extensions/link-preview
- @angular-material-extensions/fab-menu
- @angular-material-extensions/select-country
- @angular-material-extensions/pages
- @angular-material-extensions/contacts
---

Support

+ Drop an email to: Anthony Nahas
+ or open an appropriate issue
+ let us chat on Gitter

Built by and for developers :heart: we will help you :punch:

---

!jetbrains logo

This project is supported by jetbrains with 1 ALL PRODUCTS PACK OS LICENSE incl. webstorm

---

License

Copyright (c) 2020 Anthony Nahas. Licensed under the MIT License (MIT)

height="92px" width="92px" style="text-align: center;"
src="https://cdn.jsdelivr.net/gh/angular-material-extensions/select-icon@master/assets/badge_made-in-germany.svg">