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">
<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/icons/flags';
import { UpperCasePipe } from '@angular/common';
@Component({
selector: 'app-flag-icons',
templateUrl: './flag-icons.html',
styleUrls: ['./flag-icons.scss'],
imports: [UpperCasePipe]
})
export class FlagIcons {
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/icons/thimify';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-font-awesome',
templateUrl: './font-awesome.html',
styleUrls: ['./font-awesome.scss'],
import: [CommonModule]
})
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 = '';
}
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-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/icons/thimify';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-ico-icon',
templateUrl: './ico-icon.html',
styleUrls: ['./ico-icon.scss'],
imports: [CommonModule],
})
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
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-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 { CommonModule } from '@angular/common';
import { allIcon } from '../../../shared/data/icons/thimify';
@Component({
selector: 'app-themify-icon',
templateUrl: './themify-icon.html',
styleUrls: ['./themify-icon.scss'],
imports: [CommonModule],
})
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';
@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"]
}
]
}