Icons
Flag Icons Preview link
You have to add the following style and add flag-icon folder in your fonts folder
<!-- flag icon css -->
@import "./flag-icon.scss";<!-- html -->
<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>
flag icos ts files
<!-- ts file -->
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.component.html',
styleUrls: ['./flag-icons.component.scss'],
imports: [UpperCasePipe]
})
export class FlagIconsComponent {
public detail: boolean = false;
public flag: string;
public val: string;
public icon = icon;
toggleWithInfo(icon: string) {
this.detail = true;
this.flag = icon;
this.val = '';
}
}
flag icos 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
<!-- font awesome css -->
@import "./fontawesome.scss"
<div class="row">
<div class="col-sm-12">
@for(iconTitle of allIconData; track iconTitle){
<div class="card">
<div class="card-header pb-0">
<h4 class="m-b-0">{{iconTitle.title}}</h4>
</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>
fontawesome ts files
import { Component } from '@angular/core';
import { allIcon } from '../../../shared/data/icons/thimify';
@Component({
selector: 'app-font-awesome',
templateUrl: './font-awesome.component.html',
styleUrls: ['./font-awesome.component.scss'],
import:[]
})
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 = '';
}
}
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
<!-- ico icon css -->
@import "./icofont.scss"
<div class="col-sm-12">
@for(iconTitle of allIconData; track iconTitle){
<div class="card">
<div class="card-header pb-0">
<h4 class="m-b-0">{{iconTitle.title}}</h4>
</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>
Ico icon ts files
import { Component } from '@angular/core';
import { allIcon } from '../../../shared/data/icons/thimify';
@Component({
selector: 'app-ico-icon',
templateUrl: './ico-icon.component.html',
styleUrls: ['./ico-icon.component.scss'],
import:[]
})
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 = '';
}
}
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.net/zono/template/ico-icon.html
Themify Preview link
You have to add the following style and add themify folder in your fonts folder
@import"./themify.scss";
<!-- some icon display for demo -->
<div class="col-sm-12">
@for(iconTitle of allIconData; track iconTitle){
<div class="card">
<div class="card-header pb-0">
<h4 class="m-b-0">{{iconTitle.title}}</h4>
</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>
themify icon ts files
// ts file
import { Component } from '@angular/core';
import { allIcon } from '../../../shared/data/icons/thimify';
@Component({
selector: 'app-themify-icon',
templateUrl: './themify-icon.component.html',
styleUrls: ['./themify-icon.component.scss'],
import:[]
})
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 = '';
}
}
themify icon data files
// data file
export class allIcon {
static themify = [
{
title: 'Arrows & Direction Icons',
icons: ["icon-arrow-up", "icon-arrow-right", "icon-arrow-left", "icon-arrow-down"]
},
}
Feather icon Preview link
You have to add the following style and add feather folder in your fonts folder
<!-- feather icon css -->
@import "./feathericon.scss"
<div class="col-sm-12">
@for(iconTitle of allIconData; track iconTitle){
<div class="card">
<div class="card-header pb-0">
<h4 class="m-b-0">{{iconTitle.title}}</h4>
</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-feather-icons [icon]="p"></app-feather-icons>
<div class="flex-grow-1 align-self-center">
<h6 class="mt-0">{{p}}</h6>
</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 { FeathericonComponent } from '../../../shared/component/feathericon/feathericon.component';
@Component({
selector: 'app-feathers-icons',
templateUrl: './feather-icons.component.html',
styleUrls: ['./feather-icons.component.scss'],
imports: [FeathericonComponent]
})
export class FeatherIconsComponent {
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"]
}
]
}