Awesome
ngx-icon-blur 
An Angular component that can be used to create frosted glass effect of icons.
Available options
| Option | Description |
|---|---|
| src | A string that represents the src location of your icon |
| type | "ROUNDED" or "SQUARE" or "CIRCLE |
| size | A number that represents the size of the icon |
| padding | A number that represents the padding of the icon |
| name | A string that represents the alt name of your icon |
Install
$ npm install ngx-icon-blur --save
Usage
From your Angular AppModule:
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 { }
Once the library is imported, you can use its component in your Angular application:
<!-- You can now use NgxIconBlur component in app.component.html -->
<h1>
{{title}}
</h1>
<ngx-icon-blur
[source]="'https://codekeep.io/assets/icon.svg'"
[name]="'icon'"
[padding]="5"
[size]="100"
[type]="'ROUNDED'"
></ngx-icon-blur>
Related
inspired by react-icon-blur
License
MIT © Wadie