Icons
Flag Icons Offical link Preview link
You have to add the following style and add flag-icon folder in your fonts folder
@import "./flag-icon.scss";<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-header">
<h4 class="m-b-0">Flag Icons</h4>
</div>
<div class="card-body">
<div class="row icon-lists flag-icons">
@for (i of icon; track i) {
<div class="col-12 col-sm-6 col-xl-4 "
(click)="toggleWithInfo(i.abbrivation)">
<div class="d-flex">
<i class="flag-icon flag-icon-{{i.abbrivation}}"></i>
<div class="flex-grow-1 align-self-center">
<h5>{{i.abbrivation|uppercase}}</h5>
<h6 class="mt-0">{{i.name}}</h6>
</div>
</div>
}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="icon-hover-bottom p-fixed" *ngIf="detail">
<div class="container-fluid">
<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>
</div>
</div>you have add ts files
import { Component } from "@angular/core";
import { icon } from "../../../shared/data/data/icons/flag-icon";
import { ToastrService } from "ngx-toastr";
@Component({
selector: "app-flag-icons",
templateUrl: "./flag-icons.html",
styleUrls: ["./flag-icons.scss"],
})
export class FlagIcons {
public icon = icon;
public detail: boolean = false;
public flag: string;
public val: string;
public toastrService = inject(ToastrService);
toggleWithInfo(icon: string) {
this.detail = true;
this.flag = icon;
this.val = '<i class="flag-icon flag-icon-' + icon + '"></i>';
}
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 = '<i class="flag-icon flag-icon-' + val + '"></i>';
document.body.appendChild(selBox);
selBox.focus();
selBox.select();
document.execCommand("copy");
document.body.removeChild(selBox);
this.toastrService.show(
'<p class="mb-0 mt-1">Code Copied to clipboard</p>',
"",
{
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 Offical link Preview link
You have to add the following style and add font-awesome folder in your fonts folder
@import "./fontawesome.scss" <div class="container-fluid">
<div class="row">
<div class="col-sm-12">
@for (item of fontawesome; track item) {
<div class="card">
<div class="card-header">
<h4 class="m-b-0">{{item.title}}</h4>
</div>
<div class="card-body">
<div class="row icon-lists">
<div class="col-sm-6 col-md-4 col-xl-3" *ngFor="let i of item.icons"
(click)="toggleWithInfo(i)">
<i class="fa fa-{{i}}"></i> fa fa-{{i}}
</div>
</div>
</div>
</div>
}
</div>
</div>
</div>
@if(detail){
<div class="icon-hover-bottom p-fixed" >
<div class="container-fluid">
<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>
</div>
</div>
}you have add ts files
import { Component } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { allIcon } from '../../../shared/data/data/icons/font-awasome';
@Component({
selector: 'app-font-awesome',
templateUrl: './font-awesome.html',
styleUrls: ['./font-awesome.scss']
})
export class FontAwesome {
public fontawesome = allIcon.fontawesome;
public detail : boolean =false;
public icon : string;
public val : string;
public toastrService = inject(ToastrService);
toggleWithInfo(icon: string) {
this.detail=true;
this.icon=icon;
this.val='<i class="fa fa-' + icon + '"></i>';
}
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 = '<i class="fa fa-' + val + '"></i>';
document.body.appendChild(selBox);
selBox.focus();
selBox.select();
document.execCommand('copy');
document.body.removeChild(selBox);
this.toastrService.show('<p class="mb-0 mt-1">Code Copied to clipboard</p>', '', { 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 Offical link Preview link
You have to add the following style and add ico folder in your fonts folder
@import "./icofont.scss"
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
@for(item of icoIcons; track item ){
<div class="card">
<div class="card-header">
<h4 class="m-b-0">{{item.title}}</h4>
</div>
<div class="card-body">
<div class="row icon-lists">
<div class="col-sm-6 col-md-6 col-lg-4" *ngFor="let icon of item.icons"
(click)="toggleWithInfo(icon)">
<i class="icofont icofont-{{icon}}"></i>{{icon}}
</div>
</div>
</div>
</div>
}
</div>
</div>
</div>
@if(detail){
<div class="icon-hover-bottom p-fixed">
<div class="container-fluid">
<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>
</div>
</div>
}
you have add ts files
import { Component } from '@angular/core';
import { allIcon } from '../../../shared/data/data/icons/font-awasome';
import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-ico-icon',
templateUrl: './ico-icon.html',
styleUrls: ['./ico-icon.scss']
})
export class IcoIcon {
public icoIcons = allIcon.ico;
public detail: boolean = false;
public icon: string;
public val: string;
public toastrService = inject(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 icons Offical link Preview link
You have to add the following style and add themify folder in your fonts folder
@import"./themify.scss";<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
@for(item of themify; track item ){
<div class="card">
<div class="card-header">
<h4 class="m-b-0">{{item.title}}</h4>
</div>
<div class="card-body">
<div class="row icon-lists">
<div class="col-sm-6 col-md-6 col-lg-4" *ngFor="let i of item.icons" (click)="toggleWithInfo(i)">
<i class="{{i}}"></i> {{i}}</div>
</div>
</div>
</div>
}
</div>
</div>
</div>
@if(detail){
<div class="icon-hover-bottom p-fixed">
<div class="container-fluid">
<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>
</div>
</div>
}
you have add ts files
import { Component } from '@angular/core';
import { allIcon } from '../../../shared/data/data/icons/font-awasome';
import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-themify-icon',
templateUrl: './themify-icon.html',
styleUrls: ['./themify-icon.scss']
})
export class ThemifyIcon {
public themify = allIcon.themify;
public detail: boolean = false;
public icon: string;
public val: string;
public toastrService = inject(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 Offical link Preview link
You have to add the following style and add feather folder in your fonts folder
@import "./feathericon.scss"<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
@for(item of feather; track item){
<div class="card" >
<div class="card-header">
<h4 class="m-b-0">{{item.title}}</h4>
</div>
<div class="card-body">
<div class="row icon-lists feather-icons">
<div class="col-12 col-sm-6 col-xl-4" *ngFor="let data of item.icons" (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>
</div>
@if(detail){
<div class="icon-hover-bottom p-fixed">
<div class="container-fluid">
<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 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>
</div>
</div>
}
you have add ts files
import { Component } from '@angular/core';
import { allIcon } from '../../../shared/data/data/icons/font-awasome';
import { ToastrService } from 'ngx-toastr';
import { FeatherIcon } from '../../../shared/component/header/feather-icon/feather-icon';
@Component({
selector: 'app-feather-icon',
imports: [FeatherIcon]
templateUrl: './feather-icon.html',
styleUrls: ['./feather-icon.scss']
})
export class FeatherIcon {
public feather = allIcon.feather;
public detail: boolean = false;
public flag: string;
public val: string;
public icon: string;
public toastrService = inject(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"]
}
]
}