# ngx-phosphor-icons Phosphor is a flexible icon family for interfaces, diagrams, presentations, buttons — whatever, really. Explore all our icons at [phosphoricons.com](https://phosphoricons.com). **ngx-phosphor-icons** It is designed to be used together with [@angular/Material](https://material.angular.io/) since it seeks to integrate the Phosphor icons into [@angular/material/icon](https://material.angular.io/components/icon/api), allowing it to be used in an easy and orderly way.

1,512 icons and counting
6 weights: Thin, Light, Regular, Bold, Fill, and Duotone
Raw stroke information retained to fine-tune the style

## Installation ```bash npm install --save ngx-phosphor-icons ``` ## Imports There are two ways of implementation, choose the one you like best. #### Module Import (Option 1) Simply import the **NgxPhosphorIconsModule** into the AppModule so that the entire project can use the icons, or into the module you require. **(This module has all types of icons)**. ```tsx import { AppComponent } from 'app/app.component'; ... import { NgxPhosphorIconsModule } from 'ngx-phosphor-icons'; @NgModule({ declarations: [ AppComponent, ], imports: [ NgxPhosphorIconsModule, // Phosphor Icon Pack MatIconModule, // It is important to import the Icon material module. ] }) export class AppModule {} ``` #### Other Modules (Optional). You can choose the type of icon of your choice, if you only want to load the package. | Module | Weight | Example | View | | -------------------------------------------- | ---------------------- | ------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | | NgxPhosphorIconsBoldModule | Bold | `` |

| #### Module File Import (Option 2) This form of import has the same characteristics, only that the file is consulted when starting the **angular.json**. The Modules Change Name and include the **"File"** Label In the **"input"** path: You can specify only one import file if you want or leave it like this to import everything ```tsx "assets": [ "src/assets", ..., { "glob": "**/*", "input": "node_modules/ngx-phosphor-icons/icons/", // Here "output": "./assets/icons/" } ], ``` #### Module File List | Module | Weight | Example | | ------------------------------------------------ | ---------------------- | ------------------------------------------------------------ | | NgxPhosphorIconsFileModule | All | `node_modules/ngx-phosphor-icons/icons/` | | NgxPhosphorIconsBoldFileModule | Bold | `node_modules/ngx-phosphor-icons/icons/phosphor-bold.svg` | | NgxPhosphorIconsDuotoneFileModule | Duotone | `node_modules/ngx-phosphor-icons/icons/phosphor-duotone.svg` | | NgxPhosphorIconsLightFileModule | Fill | `node_modules/ngx-phosphor-icons/icons/phosphor-light.svg` | | NgxPhosphorIconsRegularFileModule | Regular | `node_modules/ngx-phosphor-icons/icons/phosphor-regular.svg` | | NgxPhosphorIconsFillFileModule | Fill | `node_modules/ngx-phosphor-icons/icons/phosphor-fill.svg` | | NgxPhosphorIconsThinFileModule | Thin | `node_modules/ngx-phosphor-icons/icons/phosphor-thin.svg` | ### Props Icon components accept all props that you can pass to a normal SVG element, including inline `style` objects, `click` handlers, and more. The properties are defined by Angular and [@angular/material/icon](https://material.angular.io/components/icon/api) ### Usage In the [phosphoricons.com](https://phosphoricons.com). documentation the icon calling is done as follows. ```tsx ``` In this implementation the **width** type and icon name are called ```tsx ``` You can use the icons in different ways, please read the [@angular/Material](https://material.angular.io/) documentation. ##### Decorative icons When the icon is purely cosmetic and conveys no real semantic meaning, the `` element is marked with `aria-hidden="true"`. ##### Interactive icons Icons alone are not interactive elements for screen-reader users; when the user would interact with some icon on the page, a more appropriate element should "own" the interaction: The `` element should be a child of a ` ... ``` ### Donate If you can help me I will appreciate it very much.

## Our Related Projects - [@phosphor-icons/core](https://github.com/phosphor-icons/core) ▲ Phosphor icon assets and catalog - [@phosphor-icons/react](https://github.com/phosphor-icons/react) ▲ Phosphor icon component library for React - [@phosphor-icons/web](https://github.com/phosphor-icons/web) ▲ Phosphor icons for Vanilla JS - [@phosphor-icons/vue](https://github.com/phosphor-icons/vue) ▲ Phosphor icon component library for Vue - [@phosphor-icons/elm](https://github.com/phosphor-icons/phosphor-elm) ▲ Phosphor icons for Elm - [@phosphor-icons/flutter](https://github.com/phosphor-icons/flutter) ▲ Phosphor IconData library for Flutter - [@phosphor-icons/webcomponents](https://github.com/phosphor-icons/webcomponents) ▲ Phosphor icons as Web Components - [@phosphor-icons/figma](https://github.com/phosphor-icons/figma) ▲ Phosphor icons Figma plugin - [@phosphor-icons/sketch](https://github.com/phosphor-icons/sketch) ▲ Phosphor icons Sketch plugin ## Community Projects - [phosphor-react-native](https://github.com/duongdev/phosphor-react-native) ▲ Phosphor icon component library for React Native - [phosphor-svelte](https://github.com/haruaki07/phosphor-svelte) ▲ Phosphor icons for Svelte apps - [phosphor-r](https://github.com/dreamRs/phosphoricons) ▲ Phosphor icon wrapper for R documents and applications - [blade-phosphor-icons](https://github.com/codeat3/blade-phosphor-icons) ▲ Phosphor icons in your Laravel Blade views - [wireui/phosphoricons](https://github.com/wireui/phosphoricons) ▲ Phosphor icons for Laravel - [phosphor-css](https://github.com/lucagoslar/phosphor-css) ▲ CSS wrapper for Phosphor SVG icons - [ruby-phosphor-icons](https://github.com/maful/ruby-phosphor-icons) ▲ Phosphor icons for Ruby and Rails applications - [eleventy-plugin-phosphoricons](https://github.com/reatlat/eleventy-plugin-phosphoricons) ▲ An Eleventy plugin for add shortcode, allows Phosphor icons to be embedded as inline svg into templates ## LICENSE This project is licensed under the [MIT License](https://github.com/ThemisCol/ngx-phosphor-icons/blob/main/LICENSE).