ngx-phosphor-icons

Phosphor is a flexible icon family for interfaces, diagrams, presentations, buttons — whatever, really. Explore all our icons at phosphoricons.com.

ngx-phosphor-icons It is designed to be used together with @angular/Material since it seeks to integrate the Phosphor icons into @angular/material/icon, allowing it to be used in an easy and orderly way.

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

Installation

1npm 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).

1import { AppComponent } from 'app/app.component';
2...
3import { NgxPhosphorIconsModule } from 'ngx-phosphor-icons';
4
5@NgModule({
6    declarations: [
7      AppComponent,
8    ],
9    imports: [
10      NgxPhosphorIconsModule, // Phosphor Icon Pack
11      MatIconModule, // It is important to import the Icon material module.
12    ]
13  })
14export 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	<mat-icon svgIcon="ph-bold:name_icon"></mat-icon>
NgxPhosphorIconsDuotoneModule	Duotone	<mat-icon svgIcon="ph-duotone:name_icon"></mat-icon>
NgxPhosphorIconsFillModule	Fill	<mat-icon svgIcon="ph-fill:name_icon"></mat-icon>
NgxPhosphorIconsLightModule	Light	<mat-icon svgIcon="ph-light:name_icon"></mat-icon>
NgxPhosphorIconsRegularModule	Regular	<mat-icon svgIcon="ph-regular:name_icon"></mat-icon>
NgxPhosphorIconsThinModule	Thin	<mat-icon svgIcon="ph-thin:name_icon"></mat-icon>

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

1"assets": [
2      "src/assets", 
3      ...,
4      {
5          "glob": "**/*",
6          "input": "node_modules/ngx-phosphor-icons/icons/", // Here
7          "output": "./assets/icons/"
8      }
9  ],

Module File List

Module	Weight	Example
NgxPhosphorIconsBoldFileModule	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

Usage

In the phosphoricons.com. documentation the icon calling is done as follows.

1<i class="ph-bold ph-graduation-cap"></i>

In this implementation the width type and icon name are called

1"ph-bold:graduation-cap"

You can use the icons in different ways, please read the @angular/Material documentation.

Decorative icons

When the icon is purely cosmetic and conveys no real semantic meaning, the <mat-icon> 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 <mat-icon> element should be a child of a <button> or <a> element. The parent <button> or <a> should either have a meaningful label provided either through direct text content, aria-label, or aria-labelledby.

Example

1
2  // Icon
3  <mat-icon svgIcon="ph-bold:airplane"></mat-icon>
4  <mat-icon svgIcon="ph-duotone:airplane"></mat-icon>
5  <mat-icon svgIcon="ph-fill:airplane"></mat-icon>
6  <mat-icon svgIcon="ph-light:airplane"></mat-icon>
7  <mat-icon svgIcon="ph-regular:airplane"></mat-icon>
8  <mat-icon svgIcon="ph-thin:airplane"></mat-icon>
9
10  // Button
11  <button  mat-icon-button color="warn" type="button">
12    <mat-icon svgIcon="ph-bold:trash"></mat-icon>
13  </button>
14  ...

Donate

If you can help me I will appreciate it very much.

Our Related Projects

• @phosphor-icons/core ▲ Phosphor icon assets and catalog
• @phosphor-icons/react ▲ Phosphor icon component library for React
• @phosphor-icons/web ▲ Phosphor icons for Vanilla JS
• @phosphor-icons/vue ▲ Phosphor icon component library for Vue
• @phosphor-icons/elm ▲ Phosphor icons for Elm
• @phosphor-icons/flutter ▲ Phosphor IconData library for Flutter
• @phosphor-icons/webcomponents ▲ Phosphor icons as Web Components
• @phosphor-icons/figma ▲ Phosphor icons Figma plugin
• @phosphor-icons/sketch ▲ Phosphor icons Sketch plugin

Community Projects

• phosphor-react-native ▲ Phosphor icon component library for React Native
• phosphor-svelte ▲ Phosphor icons for Svelte apps
• phosphor-r ▲ Phosphor icon wrapper for R documents and applications
• blade-phosphor-icons ▲ Phosphor icons in your Laravel Blade views
• wireui/phosphoricons ▲ Phosphor icons for Laravel
• phosphor-css ▲ CSS wrapper for Phosphor SVG icons
• ruby-phosphor-icons ▲ Phosphor icons for Ruby and Rails applications
• 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.