Icons
Flag Icons Preview link
You have to add the following style and add flag-icon folder in your fonts folder
@import "./flag-icons.scss";
<app-page-wrapper>
<div class="row">
<div class="col-sm-12">
<app-card [header]="true" [body]="true">
<h5 header class="m-b-0">Flag Icons</h5>
<div class="row icon-lists flag-icons" body>
@for (i of icon; track i) {
<div class="col-12 col-sm-6 col-xl-4" (click)="toggleWithInfo(i.country_code)">
<div class="d-flex">
<i class="flag-icon flag-icon-{{i.country_code}}"></i>
<div class="flex-grow-1 align-self-center">
<h5>{{i.country_code| uppercase}}</h5>
<h6 class="mt-0">{{i.name}}</h6>
</div>
</div>
</div>
}
</div>
</app-card>
</div>
</div>
</app-page-wrapper>
@if (detail) {
<div class="icon-hover-bottom p-fixed">
<app-page-wrapper>
<div class="row">
<div class="icon-popup">
<div class="close-icon"><i class="icofont icofont-close" (click)="detail=false"></i></div>
<div class="icon-first"><i class="flag-icon flag-icon-{{flag}} fa-2x text-white" id="icon_main"></i>
</div>
<div class="icon-class">
<label class="icon-title">Class</label><span id="fclass1">flag-icon flag-icon-{{flag}}</span>
</div>
<div class="icon-last icon-last">
<label class="icon-title">Markup</label>
<div class="form-inline">
<div class="form-group">
<input class="inp-val form-control m-r-10" id="input_copy" type="text" value="{{val}}"
readonly="readonly">
<button class="btn btn-primary notification" (click)="copyText(flag)">Copy text</button>
</div>
</div>
</div>
</div>
</div>
</app-page-wrapper>
</div>
}
you have add ts files
import { Component } from "@angular/core";
import { icon } from "../../../shared/data/icons/flag-icon";
import { ToastrService } from "ngx-toastr";
import { CommonModule } from "@angular/common";
import { PageWrapperComponent } from "../../../shared/components/page-wrapper/page-wrapper.component";
import { CardComponent } from "../../../shared/components/card/card.component";
@Component({
selector: "app-flag-icons",
templateUrl: "./flag-icons.component.html",
styleUrls: ["./flag-icons.component.scss"],
imports: [CommonModule, PageWrapperComponent, CardComponent]
})
export class FlagIconsComponent {
public icon = icon;
public detail: boolean = false;
public flag: string;
public val: string;
constructor(public toastrService: ToastrService) {}
toggleWithInfo(icon: string) {
this.detail = true;
this.flag = icon;
this.val = '';
}
copyText(val: string) {
let selBox = document.createElement("textarea");
selBox.style.position = "fixed";
selBox.style.left = "0";
selBox.style.top = "0";
selBox.style.opacity = "0";
selBox.value = '';
document.body.appendChild(selBox);
selBox.focus();
selBox.select();
document.execCommand("copy");
document.body.removeChild(selBox);
this.toastrService.show(
'Code Copied to clipboard
',
"",
{
closeButton: true,
enableHtml: true,
positionClass: "toast-bottom-right",
}
);
}
}
flag data files
export const icon = [
{ abbrivation: 'in', name: 'India Flag' },
{ abbrivation: 'ad', name: 'Andorra Flag' },
{ abbrivation:'ae', name: 'United Arab Emirates Flag' },
{ abbrivation: 'af', name: 'Afghanistan Flag' },
]
Font awesome Preview link
You have to add the following style and add font-awesome folder in your fonts folder
@import "./fontawesome.scss"
<app-page-wrapper>
<div class="row">
<div class="col-sm-12">
@for (item of fontAwesome; track item) {
<app-card [header]="true" [body]="true">
<h5 header class="m-b-0">{{item.title}}</h5>
<div body class="row icon-lists">
@for (i of item.icons; track i) {
<div class="col-sm-6 col-md-4 col-xl-3" (click)="toggleWithInfo(i)">
<i class="fa fa-{{i}}"></i> fa fa-{{i}}
</div>
}
</div>
</app-card>
}
</div>
</div>
</app-page-wrapper>
@if (detail) {
<div class="icon-hover-bottom p-fixed">
<app-page-wrapper>
<div class="row">
<div class="icon-popup">
<div class="close-icon"><i class="icofont icofont-close" (click)="detail=false"></i></div>
<div class="icon-first"><i class="fa fa-{{icon}} fa-2x" id="icon_main"></i></div>
<div class="icon-class">
<label class="icon-title">Class</label><span id="fclass1">fa fa-{{icon}}</span>
</div>
<div class="icon-last icon-last">
<label class="icon-title">Markup</label>
<div class="form-inline">
<div class="form-group mb-0">
<input class="inp-val form-control m-r-10" id="input_copy" type="text" value="{{val}}"
readonly="readonly">
<button class="btn btn-primary notification" (click)="copyText(icon)">Copy text</button>
</div>
</div>
</div>
</div>
</div>
</app-page-wrapper>
</div>
}
you have add ts files
import { Component } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { allIcon } from '../../../shared/data/icons/font-awasome';
import { PageWrapperComponent } from "../../../shared/components/page-wrapper/page-wrapper.component";
import { CardComponent } from "../../../shared/components/card/card.component";
@Component({
selector: 'app-font-awesome',
templateUrl: './font-awesome.component.html',
styleUrls: ['./font-awesome.component.scss'],
imports: [PageWrapperComponent, CardComponent]
})
export class FontAwesomeComponent {
public fontAwesome = allIcon.fontAwesome;
public detail : boolean =false;
public icon : string;
public val : string;
constructor( public toastrService:ToastrService) { }
toggleWithInfo(icon: string) {
this.detail=true;
this.icon=icon;
this.val='';
}
copyText(val: string) {
let selBox = document.createElement('textarea');
selBox.style.position = 'fixed';
selBox.style.left = '0';
selBox.style.top = '0';
selBox.style.opacity = '0';
selBox.value = '';
document.body.appendChild(selBox);
selBox.focus();
selBox.select();
document.execCommand('copy');
document.body.removeChild(selBox);
this.toastrService.show('Code Copied to clipboard
', '', { closeButton: true, enableHtml:true, positionClass:'toast-bottom-right'});
}
}
fontawesome data files
export class allIcon {
static fontawesome = [
{
title: 'Icon 20',
icons: ["bluetooth", "bluetooth-b", "codiepie", "credit-card-alt"]
},
]
}
Ico icon Preview link
You have to add the following style and add ico folder in your fonts folder
@import "./icofont.scss"
<app-page-wrapper>
<div class="row">
<div class="col-sm-12">
@for (item of icoIcons; track item){
<app-card [header]="true" [body]="true">
<h5 header class="m-b-0">{{item.title}}</h5>
<div body class="row icon-lists">
@for (icon of item.icons; track icon) {
<div class="col-sm-6 col-md-6 col-lg-4" (click)="toggleWithInfo(icon)">
<i class="icofont icofont-{{icon}}"></i>{{icon}}
</div>
}
</div>
</app-card>
}
</div>
</div>
</app-page-wrapper>
@if (detail) {
<div class="icon-hover-bottom p-fixed">
<app-page-wrapper>
<div class="row">
<div class="icon-popup">
<div class="close-icon"><i class="icofont icofont-close" (click)="detail=false"></i></div>
<div class="icon-first"><i class="icofont icofont-{{icon}} fa-2x"></i></div>
<div class="icon-class">
<label class="icon-title">Class</label><span id="fclass1">icofont icofont-{{icon}}</span>
</div>
<div class="icon-last icon-last">
<label class="icon-title">Markup</label>
<div class="form-inline">
<div class="form-group mb-0">
<input class="inp-val form-control m-r-10" id="input_copy" type="text" value="{{val}}"
readonly="readonly">
<button class="btn btn-primary notification" (click)="copyText(icon)">Copy text</button>
</div>
</div>
</div>
</div>
</div>
</app-page-wrapper>
</div>
}
you have add ts files
import { Component } from '@angular/core';
import { allIcon } from '../../../shared/data/icons/font-awasome';
import { ToastrService } from 'ngx-toastr';
import { PageWrapperComponent } from "../../../shared/components/page-wrapper/page-wrapper.component";
import { CardComponent } from "../../../shared/components/card/card.component";
@Component({
selector: 'app-ico-icon',
templateUrl: './ico-icon.component.html',
styleUrls: ['./ico-icon.component.scss'],
imports: [PageWrapperComponent, CardComponent]
})
export class IcoIconComponent {
public icoIcons = allIcon.ico;
public detail: boolean = false;
public icon: string;
public val: string;
constructor(public toastrService: ToastrService) { }
toggleWithInfo(icon: string) {
this.detail = true;
this.icon = icon;
this.val = '';
}
copyText(val: string) {
let selBox = document.createElement('textarea');
selBox.style.position = 'fixed';
selBox.style.left = '0';
selBox.style.top = '0';
selBox.style.opacity = '0';
selBox.value = '';
document.body.appendChild(selBox);
selBox.focus();
selBox.select();
document.execCommand('copy');
document.body.removeChild(selBox);
this.toastrService.show('Code Copied to clipboard
', '', { closeButton: true, enableHtml: true, positionClass: 'toast-bottom-right' });
}
}
Ico icon data files
export class allIcon {
static ico = [
{
title: 'Abstract',
icons: ["angry-monster", "bathtub", "bird-wings", "bow"]
},
}
To use another types of ico icons you have to refer below template link
Themify Preview link
You have to add the following style and add themify folder in your fonts folder
@import"./themify.scss";
<app-page-wrapper>
<div class="row">
<div class="col-sm-12">
@for (item of themeFy; track item) {
<app-card [header]="true" [body]="true">
<h5 header class="m-b-0">{{item.title}}</h5>
<div class="row icon-lists" body>
@for (i of item.icons; track 1) {
<div class="col-sm-6 col-md-6 col-lg-4" (click)="toggleWithInfo(i)">
<i class="{{i}}"></i> {{i}}
</div>
}
</div>
</app-card>
}
</div>
</div>
</app-page-wrapper>
@if (detail) {
<div class="icon-hover-bottom p-fixed">
<app-page-wrapper>
<div class="row">
<div class="icon-popup">
<div class="close-icon"><i class="icofont icofont-close" (click)="detail=false"></i></div>
<div class="icon-first"><i class="{{icon}} fa-2x"></i></div>
<div class="icon-class">
<label class="icon-title">Class</label><span id="fclass1">{{icon}}</span>
</div>
<div class="icon-last icon-last">
<label class="icon-title">Markup</label>
<div class="form-inline">
<div class="form-group mb-0">
<input class="inp-val form-control m-r-10" id="input_copy" type="text" value="{{val}}"
readonly="readonly">
<button class="btn btn-primary notification" (click)="copyText(icon)">Copy text</button>
</div>
</div>
</div>
</div>
</div>
</app-page-wrapper>
</div>
}
you have add ts files
import { Component } from '@angular/core';
import { allIcon } from '../../../shared/data/icons/font-awasome';
import { ToastrService } from 'ngx-toastr';
import { PageWrapperComponent } from "../../../shared/components/page-wrapper/page-wrapper.component";
import { CardComponent } from "../../../shared/components/card/card.component";
@Component({
selector: 'app-them-fy-icon',
templateUrl: './them-fy-icon.component.html',
styleUrls: ['./them-fy-icon.component.scss'],
imports: [PageWrapperComponent, CardComponent]
})
export class ThemifyIconComponent {
public themeFy = allIcon.themeFy;
public detail: boolean = false;
public icon: string;
public val: string;
constructor(public toastrService:ToastrService) { }
toggleWithInfo(icon: string) {
this.detail = true;
this.icon = icon;
this.val = '';
}
copyText(val: string) {
let selBox = document.createElement('textarea');
selBox.style.position = 'fixed';
selBox.style.left = '0';
selBox.style.top = '0';
selBox.style.opacity = '0';
selBox.value = '';
document.body.appendChild(selBox);
selBox.focus();
selBox.select();
document.execCommand('copy');
document.body.removeChild(selBox);
this.toastrService.show('Code Copied to clipboard
', '', { closeButton: true, enableHtml: true, positionClass: 'toast-bottom-right' });
}
}
themify icon data files
export class allIcon {
static themify = [
{
title: 'Arrows & Direction Icons',
icons: ["icon-arrow-up", "icon-arrow-right", "icon-arrow-left", "icon-arrow-down"]
},
}
Feather icon Preview link
You have to add the following style and add feather folder in your fonts folder
@import "./feathericon.scss"
<app-page-wrapper>
<div class="row">
<div class="col-sm-12">
@for (item of feather; track item) {
<div class="card">
<div class="card-header">
<h5 class="m-b-0">{{item.title}}</h5>
</div>
<div class="card-body">
<div class="row icon-lists feather-icons">
@for (data of item.icons; track data) {
<div class="col-12 col-sm-6 col-xl-4" (click)="toggleWithInfo(data)">
<div class="d-flex">
<app-feather-icons [icons]="data"></app-feather-icons>
<div class="flex-grow-1 align-self-center">
<h6 class="mt-0">{{data}}</h6>
</div>
</div>
</div>
}
</div>
</div>
</div>
}
</div>
</div>
</app-page-wrapper>
@if (detail) {
<div class="icon-hover-bottom p-fixed">
<app-page-wrapper>
<div class="row">
<div class="icon-popup">
<div class="close-icon">
<i class="icofont icofont-close" (click)="detail=false"></i>
</div>
<div class="icon-first">
<app-feather-icons [icons]="icon"></app-feather-icons>
</div>
<div class="icon-class">
<label class="icon-title">data-feather</label><span>{{icon}}</span>
</div>
<div class="icon-last icon-last">
<label class="icon-title">Markup</label>
<div class="form-inline">
<div class="form-group mb-0">
<input class="inp-val form-control m-r-10" type="text" value="{{val}}"
readonly="readonly">
<button class="btn btn-primary notification" (click)="copyText(icon)">Copy text</button>
</div>
</div>
</div>
</div>
</div>
</app-page-wrapper>
</div>
}
you have add ts files
import { Component } from '@angular/core';
import { allIcon } from '../../../shared/data/icons/font-awasome';
import { ToastrService } from 'ngx-toastr';
import { FeatherIconsComponent } from '../../../shared/components/feather-icons/feather-icons.component';
import { PageWrapperComponent } from "../../../shared/components/page-wrapper/page-wrapper.component";
import { CardComponent } from "../../../shared/components/card/card.component";
@Component({
selector: 'app-feather-icon',
templateUrl: './feather-icon.component.html',
styleUrls: ['./feather-icon.component.scss'],
imports: [FeatherIconsComponent, PageWrapperComponent, CardComponent]
})
export class FeatherIconComponent {
public feather = allIcon.feather;
public detail: boolean = false;
public flag: string;
public val: string;
public icon: string;
constructor(public toastrService: ToastrService) { }
toggleWithInfo(icon: string) {
this.detail = true;
this.icon = icon;
this.val = 'Code Copied to clipboard
', '', { closeButton: true, enableHtml: true, positionClass: 'toast-bottom-right' });
}
}
feater icon data files
export class allIcon {
static feather = [
{
title: 'Feather Icons',
icons: ["activity", "airplay", "alert-circle", "alert-octagon"]
}
]
}