{"id":10699298,"url":"https://github.com/gdgvda/ngx-bootstrap-icons-picker","last_synced_at":"2025-09-13T03:31:22.030Z","repository":{"id":182387053,"uuid":"668412431","full_name":"gdgvda/ngx-bootstrap-icons-picker","owner":"gdgvda","description":"📦 Just a Bootstrap Icons Picker for Angular","archived":false,"fork":false,"pushed_at":"2024-06-13T11:41:33.000Z","size":1726,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-25T23:49:13.120Z","etag":null,"topics":["angular","bootstrap","bootstrap-icons","icon-picker","icons","npm-package"],"latest_commit_sha":null,"homepage":"https://gdgvda.github.io/ngx-bootstrap-icons-picker/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gdgvda.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-19T18:40:18.000Z","updated_at":"2024-07-02T07:48:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"c73cc6fe-8727-4b4b-aa27-7e333017041a","html_url":"https://github.com/gdgvda/ngx-bootstrap-icons-picker","commit_stats":null,"previous_names":["gdgvda/ngx-bootstrap-icons-picker"],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/gdgvda/ngx-bootstrap-icons-picker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gdgvda%2Fngx-bootstrap-icons-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gdgvda%2Fngx-bootstrap-icons-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gdgvda%2Fngx-bootstrap-icons-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gdgvda%2Fngx-bootstrap-icons-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gdgvda","download_url":"https://codeload.github.com/gdgvda/ngx-bootstrap-icons-picker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gdgvda%2Fngx-bootstrap-icons-picker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274914777,"owners_count":25373163,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-13T02:00:10.085Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","bootstrap","bootstrap-icons","icon-picker","icons","npm-package"],"created_at":"2024-06-03T12:55:23.507Z","updated_at":"2025-09-13T03:31:21.731Z","avatar_url":"https://github.com/gdgvda.png","language":"TypeScript","funding_links":[],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"readme":"# Angular Bootstrap Icons Picker\n\n\u003e By **G**oogle **D**evelopers **G**roup [Valle d'Aosta](https://gdg.community.dev/gdg-valle-daosta/)\n\n[![demo](https://img.shields.io/badge/Demo-Live-green)](https://gdgvda.github.io/ngx-bootstrap-icons-picker/)\n[![github](https://img.shields.io/badge/Source%20Code-GitHub-blue)](https://github.com/gdgvda/ngx-bootstrap-icons-picker)\n[![npm](https://img.shields.io/badge/Package-NPM-red)](https://www.npmjs.com/package/ngx-bootstrap-icons-picker)\n[![no-ai](https://img.shields.io/badge/Coded%20by%20humans-100%25-pink)](#)\n\n[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=gdgvda_ngx-bootstrap-icons-picker\u0026metric=alert_status)](https://sonarcloud.io/summary/new_code?id=gdgvda_ngx-bootstrap-icons-picker)\n[![Bugs](https://sonarcloud.io/api/project_badges/measure?project=gdgvda_ngx-bootstrap-icons-picker\u0026metric=bugs)](https://sonarcloud.io/summary/new_code?id=gdgvda_ngx-bootstrap-icons-picker)\n[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=gdgvda_ngx-bootstrap-icons-picker\u0026metric=vulnerabilities)](https://sonarcloud.io/summary/new_code?id=gdgvda_ngx-bootstrap-icons-picker)\n[![Code Smells](https://sonarcloud.io/api/project_badges/measure?project=gdgvda_ngx-bootstrap-icons-picker\u0026metric=code_smells)](https://sonarcloud.io/summary/new_code?id=gdgvda_ngx-bootstrap-icons-picker)\n\nThis icon picker manages the free, high quality, open source [Bootstrap Icons](https://icons.getbootstrap.com/) library.\n\n![screenshot.jpg](https://raw.githubusercontent.com/gdgvda/ngx-bootstrap-icons-picker/main/screenshot.jpg)\n\nAngular Bootstrap Icons Picker for:\n* [ng-booxtrap](https://github.com/ng-bootstrap/ng-bootstrap)\n* [twbs-bootstrap](https://github.com/twbs/bootstrap)\n* [twbs-icons](https://github.com/twbs/icons)\n\nVersions compatibility:\n* Angular 17 -\u003e `^17.0.0`\n* Angular 16 -\u003e `@todo`\n* Angular 15 -\u003e `@todo`\n* Angular 14 -\u003e `^14.0.0`\n\n_Largely inspired by [ngx-icon-picker](https://github.com/tech-advantage/ngx-icon-picker)_\n\n## Installing and usage\n\nWith Angular CLI\n\n`ng add ngx-bootstrap-icons-picker`\n\nOr with NPM\n\n`npm install ngx-bootstrap-icons-picker --save`\n\n### Load the module for your app\n\n```typescript\nimport {NgxBootstrapIconsPickerModule} from \"ngx-bootstrap-icons-picker\";\n\n@NgModule({\n  // ...\n  imports: [\n  // ...\n    NgxBootstrapIconsPickerModule\n  ]\n})\n```\n\n### Use it in your template\n\n```html\n\u003cdiv class=\"input-group mb-3\"\u003e\n  \u003cspan class=\"input-group-text\"\u003e\u003ci class=\"bi bi-{{selectedIcon}}\"\u003e\u003c/i\u003e\u003c/span\u003e\n  \u003cinput type=\"text\" class=\"form-control\"\n         [iconPicker]=\"'terminal-fill'\"\n         [value]=\"selectedIcon\"\n         (iconPickerSelect)=\"onIconPickerSelect($event)\"\n  /\u003e\n\u003c/div\u003e\n```\n### Component property and methods\n\n```typescript\nexport class AppComponent {\n  selectedIcon:string = ''\n\n  onIconPickerSelect(icon:string):void{\n    this.selectedIcon = icon;\n  }\n}\n```\n\nAvailable inputs and output :\n\n```typescript\n  [iconPicker]                // The icon to select in the grid.\n\n  [bipWidth]                  // Use this option to set icon picker dialog width (default:'270px')\n  [bipHeight]                 // Use this option to force icon picker dialog height (default:'auto')\n  [bipMaxHeight]              // Use this option to force icon picker dialog max-height (default:'180px')\n\n  [bipIconSize]               // Set the icon size in the selector (default:'18px')\n  [bipIconVerticalPadding]    // Set the top and bottom padding (default:'6px') \n  [bipIconHorizontalPadding]  // Set the left and right button padding (default:'9px') \n  [bipKeepSearchFilter]       // The search filter keep the value to filter (default:'false')    \n\n  [bipPosition]               // Dialog position: 'right', 'left', 'top', 'bottom'(default: 'bottom')\n  [bipFallbackIcon]           // Is used when the icon is undefined (default:'github')\n  [bipPlaceHolder]            // Search input placeholder (default:'Search icon..')\n\n  (iconPickerSelect)          // Event on selected icon value change\n```\n\nTo integrate the icon picker with another framework instead of bootstrap, you have to use the extra inputs:\n\n```typescript\n  [bipButtonStyleClass]       // To override the bootstrap class for the button\n  [bipDivSearchStyleClass]    // To override the bootstrap class for the div search\n  [bipInputSearchStyleClass]  // To override the bootstrap class for the input search\n```\n\n## Developers\n\n### Maintainer\n\n- [Manuel Zavatta](https://github.com/Zavy86)\n\n### Contributors\n\n- [We Want You!](https://github.com/gdgvda/ngx-bootstrap-icons-picker/blob/main/CONTRIBUTING.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgdgvda%2Fngx-bootstrap-icons-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgdgvda%2Fngx-bootstrap-icons-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgdgvda%2Fngx-bootstrap-icons-picker/lists"}