Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »


1.1.4 • Public • Published

PX Blue Progress Icons

This is a library of icons with dynamic fill capabilities that can be used to show progress (similar to a traditional progress spinner or bar). These can be used to show health, battery life, etc.

Currently, we have icons available for:

  • battery
  • heart
  • pie


To install the PX Blue progress icons from NPM as a dependency for your project, you can run the following command in your project root:

yarn add @pxblue/ng-progress-icons

Using the progress icons in your application

The progress icon components can be imported and used like you would use any other component. You can manually set the desired color for the icon, otherwise it will inherit the text color of its parent container;

// app.module.ts
import { NgProgressIconsModule } from '@pxblue/ng-progress-icons';

imports: [
// app.component.html
<battery-progress percent="80" size="36" color="green" [charging]="true" [outlined]="true"></battery-progress>
<heart-progress percent="180" size="36" color="pink" [outlined]="true"></heart-progress>
<pie-progress percent="30" size="36" color="#0000ff" ring="4" [outlined]="true"></pie-progress>

Available properties

  • percent (Number): the amount to fill the icon. Default: 100.
  • size (Number): the size of the icon (px). Default: 24.
  • charging (Boolean, Battery only): the charging of the icon. Default:false.
  • outlined (Boolean): whether to show outlined style for icon. Default:false.
  • color (String): the color to use for the icon. Default: inherit. Color can also be set through the style property.
  • ring (Number, Pie only): the thickness of the outer ring (1 (thin ring) - 10 (full circle)). Default: 10.


npm i @pxblue/ng-progress-icons

DownloadsWeekly Downloads






Unpacked Size

299 kB

Total Files


Last publish


  • avatar