Create Frosted Glass Icon Effect In Angular – icon-blur

Description:

icon-blur is an Angular component that helps you create a frosted glass effect (also called glassmorphism) on icons.

Basic usage:

1. Install and import the component.

# NPM
$ npm i ngx-icon-blur

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import the library
import { NgxIconBlurModule } from 'ngx-icon-blur';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxIconBlurModule // <-- Add this line
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Create a frosted glass effect on icons:

• src: path to the icon image
• type: “ROUNDED” or “SQUARE” or “CIRCLE
• size: icon size
• padding: icon padding in px
• name: alt name

<ngx-icon-blur
    [source]="'icon.svg'"
    [name]="'icon'"
    [padding]="10"
    [size]="48"
    [type]="'ROUNDED'"
></ngx-icon-blur>

Preview: