{"id":13808629,"url":"https://github.com/avmaisak/ngx-bootstrap-icons","last_synced_at":"2025-08-16T04:32:19.700Z","repository":{"id":37271120,"uuid":"224486949","full_name":"avmaisak/ngx-bootstrap-icons","owner":"avmaisak","description":"This Angular module allows you to use the Bootstrap Icons in your angular application without additional dependencies.","archived":false,"fork":false,"pushed_at":"2024-03-18T22:41:27.000Z","size":15054,"stargazers_count":33,"open_issues_count":7,"forks_count":3,"subscribers_count":1,"default_branch":"develop","last_synced_at":"2024-11-15T04:51:37.152Z","etag":null,"topics":["angular","angular-library","bootstrap","bootstrap-icons","components","icons","icons-library","icons-pack","iconset","library","ngx-bootstrap-icons","svg","twbs","twbs-icons","ui"],"latest_commit_sha":null,"homepage":"https://avmaisak.github.io/ngx-bootstrap-icons","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/avmaisak.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","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":"2019-11-27T17:49:52.000Z","updated_at":"2023-12-18T20:34:53.000Z","dependencies_parsed_at":"2024-06-18T20:03:35.493Z","dependency_job_id":"0bf7e04b-265c-48fc-bac0-2d347dd55afa","html_url":"https://github.com/avmaisak/ngx-bootstrap-icons","commit_stats":{"total_commits":542,"total_committers":4,"mean_commits":135.5,"dds":0.3726937269372693,"last_synced_commit":"e29eedad648356524dcf28d2b85e66f21571243d"},"previous_names":[],"tags_count":54,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avmaisak%2Fngx-bootstrap-icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avmaisak%2Fngx-bootstrap-icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avmaisak%2Fngx-bootstrap-icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avmaisak%2Fngx-bootstrap-icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/avmaisak","download_url":"https://codeload.github.com/avmaisak/ngx-bootstrap-icons/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229885900,"owners_count":18139382,"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","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","angular-library","bootstrap","bootstrap-icons","components","icons","icons-library","icons-pack","iconset","library","ngx-bootstrap-icons","svg","twbs","twbs-icons","ui"],"created_at":"2024-08-04T01:01:47.699Z","updated_at":"2024-12-16T18:42:27.782Z","avatar_url":"https://github.com/avmaisak.png","language":"TypeScript","funding_links":[],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"readme":"\u003cp align=\"center\" style=\"text-align:center\"\u003e\n  \u003ca href=\"https://v5.getbootstrap.com/\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://icons.getbootstrap.com/assets/img/icons-hero.png\" alt=\"Bootstrap logo\" width=\"450\" height=\"340\"\u003e\n  \u003c/a\u003e\n  \u003ch3 align=\"center\" style=\"color:#6610f2\"\u003engx-bootstrap-icons\u003c/h3\u003e\n\u003c/p\u003e\n\n### This Angular module allows you to use the Bootstrap Icons in your angular application without additional dependencies.\n\u003cbr /\u003e\n\n\n\n[![GitHub issues](https://img.shields.io/github/issues/avmaisak/ngx-bootstrap-icons)](https://github.com/avmaisak/ngx-bootstrap-icons/issues)\n[![GitHub license](https://img.shields.io/github/license/avmaisak/ngx-bootstrap-icons)](https://github.com/avmaisak/ngx-bootstrap-icons/blob/master/LICENSE)\n[![GitHub stars](https://img.shields.io/github/stars/avmaisak/ngx-bootstrap-icons)](https://github.com/avmaisak/ngx-bootstrap-icons/stargazers)\n[![npm version](https://badge.fury.io/js/ngx-bootstrap-icons.svg)](https://badge.fury.io/js/ngx-bootstrap-icons)\n[![Package Quality](https://npm.packagequality.com/shield/ngx-bootstrap-icons.svg)](https://packagequality.com/#?package=ngx-bootstrap-icons)\u003ca href=\"https://www.figma.com/community/file/972989644486753519/Bootstrap-Icons-v1.5.0\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://avatars3.githubusercontent.com/u/5155369?s=200\u0026v=4\" alt=\"Bootstrap logo\" width=\"21\" height=\"21\"\u003e\n\u003c/a\u003e\n```sh\nnpm i ngx-bootstrap-icons --save\n```\n\n![Bootstrap Icons full set](https://github.com/twbs/icons/raw/main/.github/preview.png)\n\n\n### Demo\n\n\u003ca href=\"https://avmaisak.github.io/ngx-bootstrap-icons/\"\u003e\u003cstrong style=\"color:#6610f2\"\u003eDemo Here\u003c/strong\u003e\u003c/a\u003e\n\n### Usage\n\n#### _1. Install the package_\n\n```sh\nnpm i ngx-bootstrap-icons --save\n```\n#### _2. Import module_\n\n```ts  \nimport { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons';\n```\n\n#### _3. Import assets_\n\nYou can import all icons (not recomended) or each icon individually.\n\n##### _3.1 Import all icons_\n\n```ts\nimport { allIcons } from 'ngx-bootstrap-icons';\n```\n\n##### _3.2 Import some icons_\n```ts\nimport { alarm, alarmFill, alignBottom } from 'ngx-bootstrap-icons';\n// Select some icons (use an object, not an array)\nconst icons = {\n  alarm,\n  alarmFill,\n  alignBottom\n};\n```\n\n#### _4. Import Module (all icons)_\n\n```ts\nimport { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    AppRoutingModule,\n    NgxBootstrapIconsModule.pick(allIcons)\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n```\n##### _4.1. Import Module (some icons)_\n\n```ts\nimport { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons';\nimport { alarm, alarmFill, alignBottom } from 'ngx-bootstrap-icons';\n\n// Select some icons (use an object, not an array)\nconst icons = {\n  alarm,\n  alarmFill,\n  alignBottom\n};\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    AppRoutingModule,\n    NgxBootstrapIconsModule.pick(icons)\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n/**\n\nAnother way.\n--------------\n\nImport NgxBootstrapIconsModule.pick(icons) inside of the AppModule\n\nImport NgxBootstrapIconsModule (without the pick() method) inside of any FeatureModule where will be used.\n\nNow you can import icons in one place only (root module) and successfully use the component anywhere you want.\n\n**/\n\n```\n\n##### _4.2. Configure Module (optional)_\n\n```ts\nimport { NgxBootstrapIconsModule, ColorTheme } from 'ngx-bootstrap-icons';\nimport { alarm, alarmFill, alignBottom } from 'ngx-bootstrap-icons';\n\n// Select some icons (use an object, not an array)\nconst icons = {\n  alarm,\n  alarmFill,\n  alignBottom\n};\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    AppRoutingModule,\n    NgxBootstrapIconsModule.pick(icons, { \n        width: '2em', \n        height: '2em', \n        theme: ColorTheme.Danger,\n    })\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n```\n##### _Configure options_\n\n\n| Name of input prarameter |      Type      | Required | Default Value | Description |\n|--------------------------|----------------|----------|---------------|-------------|\n| width                    |    `string`    |  `false` |    `null`     | icon default width |\n| height                   |    `string`    |  `false` |    `null`     | icon default height |\n| theme                    |    `enum`      |  `false` |    `null`     | default color theme |\n\n\n#### _5. Use it in template_\n```ts\n\u003ci-bs name=\"alarm-fill\"\u003e\u003c/i-bs\u003e\n```\nor (with your preffered tag)\n```ts\n\u003ci i-bs name=\"alarm-fill\"\u003e\u003c/i\u003e\n```\nor optionally use our enums for autocomplete support\n```ts\nimport { iconNamesEnum } from 'ngx-bootstrap-icons';\n\npublic iconNames = iconNamesEnum;\n\n\u003ci-bs [name]=\"iconNames.AlarmFill\"\u003e\u003c/i-bs\u003e\n```\n\nAlso you can use width and height for icon (By default width and height are 1rem)\n```ts\n\u003ci-bs \n  name=\"alarm-fill\" \n  width=\"2rem\" \n  height=\"2rem\"\u003e\n\u003c/i-bs\u003e\n```\n\n```\n\u003ci\n  i-bs \n  name=\"alarm-fill\" \n  width=\"2rem\" \n  height=\"2rem\"\u003e\n\u003c/i\u003e\n```\n#### _6. Input parameters_\n\n\n| Name of input prarameter |      Type      | Required | Default Value | Description |\n|--------------------------|----------------|----------|---------------|-------------|\n| name                     | `string`       |  `true`  |    `null`     | name of the icon|\n| width                    | `string`       |  `false` |    `null`     | width of the icon. Default value used from svg |\n| height                   | `string`       |  `false` |    `null`     | height of the icon. Default value used from svg |\n| resetDefaultDimensions   | `boolean`      |  `false` |    `false`    | if this parameter is set, default dimensions of the svg icon will be removed |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favmaisak%2Fngx-bootstrap-icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Favmaisak%2Fngx-bootstrap-icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favmaisak%2Fngx-bootstrap-icons/lists"}