Icons
Flag Icons 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
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { icon } from '../../../shared/data/icons/flags';
@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 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 icon-main">
<div class="col-sm-12">
@for(iconTitle of allIconData; track iconTitle){
<div class="card">
<div class="card-header">
<h3>Font Awesome Icon</h3>
</div>
<div class="card-body">
<div class="row icon-event iconly-icons icon-lists">
@for(i of iconTitle.icons; track i){
<div class="col-12 col-xxl-2 col-lg-4 col-md-6 icons-item" (click)="toggleWithInfo(i)">
<i class="fa fa-{{i}}"></i>
<h5 class="mt-0 me-2">fa {{i}}</h5>
</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>
}
</div>
</div>
</div>you have add ts files
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { allIcon } from '../../../shared/data/component/icons/thimify';
@Component({
selector: 'app-font-awesome',
imports: [CommonModule],
templateUrl: './font-awesome.component.html',
styleUrls: ['./font-awesome.component.scss']
})
export class FontAwesomeComponent {
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 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 icon-main">
<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 { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { allIcon } from '../../../shared/data/icons/thimify';
@Component({
selector: 'app-ico-icon',
imports: [CommonModule],
templateUrl: './ico-icon.component.html',
styleUrl: './ico-icon.component.scss'
})
export class IcoIconComponent {
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 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 row icon-main">
<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.component.html',
styleUrls: ['./ico-icon.component.scss']
})
export class ThemifyIconComponent {
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 row icon-main">
<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 { FeathericonComponent } from '../../../shared/component/feathericon/feathericon.component';
@Component({
selector: 'app-feather-icon',
imports: [CommonModule , FeathericonComponent],
templateUrl: './feather-icon.component.html',
styleUrls: ['./feather-icon.component.scss']
})
export class FeatherIconComponent {
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"]
}
]
}