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 pb-0 d-flex justify-content-between align-items-center">
<h3 class="m-b-0">Flag Icons</h3>
</div>
<div class="card-body">
<div class="row icon-event iconly-icons icon-lists">
@for(i of icon; track i){
<div class="col-xxl-2 col-lg-3 col-sm-4" (click)="toggleWithInfo(i.abbrivation)">
<div class="card d-flex align-items-center flex-column default-border">
<i class="flag-icon flag-icon-{{i.abbrivation}}"></i>
<div class="flex-grow-1">
<h6 class="mt-0">{{i.name}}</h6>
</div>
</div>
</div>
}
</div>
</div>
</div>
</div>
</div>
</div>
@if(detail){
<div class="icon-hover-bottom position-fixed fa-fa-icon-show-div opecity-0 d-block">
<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"></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" 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
simport { Component } from '@angular/core';
import { icon } from '../../../shared/data/icons/flags';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-flag-icon',
imports: [CommonModule],
templateUrl: './flag-icon.html',
styleUrl: './flag-icon.scss'
})
export class FlagIcon {
public detail: boolean = false;
public flag: string;
public val: string;
public icon = icon;
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);
}
}
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" @for(iconTitle of allIconData; track iconTitle){
<div class="card">
<div class="card-header pb-0 d-flex justify-content-between align-items-center">
<h4>Font Awesome Icon</h4>
</div>
<div class="card-body">
<div class="row icon-event iconly-icons icon-lists">
@for(i of iconTitle.icons; track i){
<div class="col-xxl-2 col-lg-3 col-sm-4" (click)="toggleWithInfo(i)">
<div class="card d-flex align-items-center flex-column default-border">
<i class="fa fa-{{i}}"></i>
<div class="flex-grow-1">
<h6>fa {{i}}</h6>
</div>
</div>
</div>
}
</div>
</div>
</div>
}
@if(detail){
<div class="icon-hover-bottom position-fixed fa-fa-icon-show-div opecity-0 d-block">
<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-feathericon [icon]="icon" class="feather-{{icon}}"></app-feathericon>
</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">
<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>
</div>
</div>
} you have add ts files
import { Component } from '@angular/core';
import { allIcon } from '../../../shared/data/component/icons/thimify';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-font-awesome',
imports: [CommonModule],
templateUrl: './font-awesome.html',
styleUrls: ['./font-awesome.scss']
})
export class FontAwesome {
public detail: boolean = false;
public icon: string;
public val: string;
public allIconData = allIcon.fontawesome
toggleWithInfo(icon: string) {
this.detail = true;
this.icon = icon;
this.val = '';
}
//Copy an icon code
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);
}
}
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-xl-12">
@for(iconTitle of allIconData; track iconTitle){
<div class="card">
<div class="card-header pb-0 d-flex justify-content-between align-items-center">
<h4>Abstract Icon</h4>
</div>
<div class="card-body">
<div class="row icon-event iconly-icons icon-lists">
@for(icon of iconTitle.icons; track icon){
<div class="col-xxl-2 col-lg-3 col-sm-4" (click)="toggleWithInfo(icon)">
<div class="card d-flex align-items-center flex-column default-border">
<i class="icofont icofont-{{icon}}"></i>
<div class="flex-grow-1">
<h6>{{icon}}</h6>
</div>
</div>
</div>
}
</div>
</div>
</div>
}
</div>
</div>
</div>
@if(detail){
<div class="icon-hover-bottom position-fixed fa-fa-icon-show-div opecity-0 d-block">
<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">
<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>
</div>
</div>
}
you have add ts files
import { Component } from '@angular/core';
import { allIcon } from '../../../shared/data/icons/thimify';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-ico-icon',
imports: [CommonModule],
templateUrl: './ico-icon.html',
styleUrl: './ico-icon.scss'
})
export class IcoIcon {
public detail: boolean = false;
public icon: string;
public val: string;
public allIconData = allIcon.ico
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);
}
}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 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-xl-12">
@for(iconTitle of allIconData; track iconTitle){
<div class="card">
<div class="card-header pb-0 d-flex justify-content-between align-items-center">
<h4>{{iconTitle.title}}</h4>
</div>
<div class="card-body">
<div class="row icon-event iconly-icons icon-lists">
@for(p of iconTitle.icons; track p){
<div class="col-xxl-2 col-xl-3" (click)="toggleWithInfo(p)">
<div class="card d-flex align-items-center flex-column default-border">
<i class="{{p}}"></i>
<div class="flex-grow-1">
<h6>{{p}}</h6>
</div>
</div>
</div>
}
</div>
</div>
</div>
}
</div>
</div>
</div>
@if(detail){
<div class="icon-hover-bottom position-fixed fa-fa-icon-show-div opecity-0 d-block">
<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">
<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>
</div>
</div>
}
you have add ts files
import { Component } from '@angular/core';
import { allIcon } from '../../../shared/data/component/icons/thimify';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-ico-icon',
imports: [CommonModule],
templateUrl: './ico-icon.html',
styleUrls: ['./ico-icon.scss']
})
export class ThemifyIcon {
public detail: boolean = false;
public icon: string;
public val: string;
public allIconData = allIcon.themify
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);
}
}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(iconTitle of allIconData; track iconTitle){
<div class="card">
<div class="card-header pb-0">
<h3 class="m-b-0">{{iconTitle.title}}</h3>
</div>
<div class="card-body">
<div class="row icon-lists feather-icons">
@for( p of iconTitle.icons; track p){
<div class="col-12 col-sm-6 col-xl-4"
(click)="toggleWithInfo(p)">
<div class="media">
<app-feathericon [icon]="p"></app-feathericon>
<div class="media-body align-self-center">
<h6 class="mt-0">{{p}}</h6>
</div>
</div>
</div>
}
</div>
</div>
</div>
}
</div>
</div>
</div>
<i class="feather-alert-triangle"></i>
@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-feathericon [icon]="icon" class="feather-{{icon}}"></app-feathericon>
</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">
<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>
</div>
</div>
}
you have add ts files
import { Component } from '@angular/core';
import { allIcon } from '../../../shared/data/component/icons/thimify';
import { CommonModule } from '@angular/common';
import { Feathericon } from '../../../shared/component/feathericon/feathericon';
@Component({
selector: 'app-feather-icon',
imports: [CommonModule , Feathericon],
templateUrl: './feather-icon.html',
styleUrls: ['./feather-icon.scss']
})
export class FeatherIcon {
public detail: boolean = false;
public flag: string;
public val: string;
public icon: string;
public allIconData = allIcon.feather
toggleWithInfo(icon: string) {
this.detail = true;
this.icon = icon;
this.val = 'feater icon data files
export class allIcon {
static feather = [
{
title: 'Feather Icons',
icons: ["activity", "airplay", "alert-circle", "alert-octagon"]
}
]
}