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">
<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="media">
<i class="flag-icon flag-icon-{{i.abbrivation}}"></i>
<div class="media-body align-self-center">
<h5>{{i.abbrivation|uppercase}}</h5>
<h6 class="mt-0">{{i.name}}</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">
<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" 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/component/icons/flags';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-flag-icon',
imports: [CommonModule],
templateUrl: './flag-icon.html',
styleUrls: ['./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"<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">
@for(i of iconTitle.icons; track i){
<div class="col-sm-6 col-md-4 col-xl-3"
(click)="toggleWithInfo(i)"><i class="fa fa-{{i}}"></i> 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"></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">
<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';
@Component({
selector: 'app-font-awesome',
imports: [],
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 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(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">
@for(icon of iconTitle.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>
</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">
<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';
@Component({
selector: 'app-ico-icon',
imports: [],
templateUrl: './ico-icon.html',
styleUrls: ['./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 = '';
}
// copy text
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
Preview Page: https://admin.pixelstrap.com/Cion/theme/ico-icon.html
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">
<div class="col-sm-12">
@for(iconTitle of allIconData; track iconTitle){
<div class="card">
<div class="card-header pb-0">
<h5 class="m-b-0">{{iconTitle.title}}</h5>
</div>
<div class="card-body">
<div class="row icon-lists">
@for(p of iconTitle.icons; track p){
<div class="col-sm-6 col-md-6 col-lg-4"
(click)="toggleWithInfo(p)"><i class="{{p}}"></i>{{p}}
</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">
<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';
@Component({
selector: 'app-ico-icon',
imports: [],
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="d-flex">
<app-feathericon [icon]="p"></app-feathericon>
<div class="flex-grow-1 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 { FeathericonComponent } from "../../../shared/component/feathericon/feathericon";
@Component({
selector: 'app-feather-icon',
imports: [FeathericonComponent],
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"]
}
]
}