https://github.com/angular-material-extensions/select-icon
Angular component that allows to select an option in form of a material design icon button
https://github.com/angular-material-extensions/select-icon
angular button icons img library ngx select
Last synced: 6 months ago
JSON representation
Angular component that allows to select an option in form of a material design icon button
- Host: GitHub
- URL: https://github.com/angular-material-extensions/select-icon
- Owner: angular-material-extensions
- Created: 2020-10-05T20:35:59.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-02-27T19:05:08.000Z (over 4 years ago)
- Last Synced: 2025-05-01T13:02:03.962Z (6 months ago)
- Topics: angular, button, icons, img, library, ngx, select
- Language: TypeScript
- Homepage: https://angular-material-extensions.github.io/select-icon/
- Size: 3.35 MB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# @angular-material-extensions/select-icon - Angular component that allows to select an option in form of a material design icon button
[](https://badge.fury.io/js/%40angular-material-extensions%2Fselect-icon)
[](https://angular-material-extensions.github.io/select-icon)
[](https://angular-material-extensions.github.io/select-icon/doc/index.html)
[](https://gitter.im/angular-material-extensions/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[](https://travis-ci.org/angular-material-extensions/select-icon)
[](https://codecov.io/gh/angular-material-extensions/select-icon)
[](https://david-dm.org/angular-material-extensions/select-icon)
[](https://david-dm.org/angular-material-extensions/select-icon#info=devDependencies)
[](https://greenkeeper.io/)
[](https://github.com/angular-material-extensions/select-icon/blob/master/LICENSE)
## 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](https://github.com/angular-material-extensions/select-icon/issues)
If you like this project, support [angular-material-extensions](https://github.com/angular-material-extensions)
by starring :star: and sharing it :loudspeaker:
## Table of Contents
- [Demo](#demo)
- [Components](#components)
- [Dependencies](#dependencies)
- [Installation](#installation)
- [API](#api)
- [Usage](#usage)
- [Run Demo App Locally](#run-demo-app-locally)
- [Other Angular Libraries](#other-angular-libraries)
- [Support](#support)
- [License](#license)
## [Demo](https://angular-material-extensions.github.io/select-country)
View all the directives and components in action at [https://angular-material-extensions.github.io/select-country](https://angular-material-extensions.github.io/select-country)
## Library's components
- `` used to display the main component
---
## Dependencies
* [Angular](https://angular.io) developed and tested with `10.x`
---
## [Installation](https://angular-material-extensions.github.io/select-icon/getting-started)
## 1. Install via *ng add*. (Recommended)
If Angular Material Design is not setup, just run `ng add @angular/material` [learn more](https://material.angular.io/guide/getting-started)
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
```
### Import the library
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
### `` used to display the main component - [see the demo examples](https://angular-material-extensions.github.io/select-icon/examples)
| 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](https://angular-material-extensions.github.io/select-icon)
```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');
}
```
#### 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]);
```
### Run Demo App Locally
Build the library
```bash
$ npm run build:lib
```
Serve the demo app
```bash
$ npm start
```
## Other Angular Libraries
- [ngx-auth-firebaseui](https://github.com/AnthonyNahas/ngx-auth-firebaseui)
- [ngx-linkifyjs](https://github.com/AnthonyNahas/ngx-linkifyjs)
- [@angular-material-extensions/password-strength](https://github.com/angular-material-extensions/password-strength)
- [@angular-material-extensions/google-maps-autocomplete](https://github.com/angular-material-extensions/google-maps-autocomplete)
- [@angular-material-extensions/link-preview](https://github.com/angular-material-extensions/link-preview)
- [@angular-material-extensions/fab-menu](https://github.com/angular-material-extensions/fab-menu)
- [@angular-material-extensions/select-country](https://github.com/angular-material-extensions/select-country)
- [@angular-material-extensions/pages](https://github.com/angular-material-extensions/pages)
- [@angular-material-extensions/contacts](https://github.com/angular-material-extensions/contacts)
---
## Support
+ Drop an email to: [Anthony Nahas](mailto:anthony.na@hotmail.de)
+ or open an appropriate [issue](https://github.com/angular-material-extensions/select-icon/issues)
+ let us chat on [Gitter](https://gitter.im/angular-material-extensions/Lobby)
Built by and for developers :heart: we will help you :punch:
---
This project is supported by [jetbrains](https://www.jetbrains.com/) with 1 ALL PRODUCTS PACK OS LICENSE incl. [webstorm](https://www.jetbrains.com/webstorm)
---
## License
Copyright (c) 2020 [Anthony Nahas](https://github.com/AnthonyNahas). Licensed under the MIT License (MIT)
