Create Frosted Glass Icon Effect In Angular – icon-blur

Author: wadie
Official Page: Go to website
Publish Date: May 10, 2021
License: MIT

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:

Create Frosted Glass Icon Effect In Angular - icon-blur


You Might Be Interested In:

Add Comment