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 -->
@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>
}
flag icos ts files
<!-- ts file -->
import { Component } from "@angular/core";
import { icon } from "../../../shared/data/data/icons/flag-icon";
import { ToastrService } from "ngx-toastr";
import { CommonModule } from "@angular/common";
@Component({
selector: "app-flag-icons",
imports: [CommonModule],
templateUrl: "./flag-icons.html",
styleUrls: ["./flag-icons.scss"],
})
export class FlagIcons {
public icon = icon;
public detail: boolean = false;
public flag: string;
public val: string;
constructor(public toastrService: ToastrService) {}
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"
@for (item of fontawesome; track item) {
<div class="card">
<div class="card-header pb-0">
<h4 class="m-b-0">{{item.title}}</h4>
</div>
<div class="card-body">
<div class="row icon-lists">
@for (i of item.icons; track i) {
<div class="col-sm-6 col-md-4 col-xl-3" (click)="toggleWithInfo(i)">
<i class="fa fa-{{i}}"></i> fa fa-{{i}}
</div>
}
</div>
</div>
</div>
}
fontawesome ts files
import { Component } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { allIcon } from '../../../shared/data/data/icons/font-awasome';
@Component({
selector: 'app-font-awesome',
imports: [],
templateUrl: './font-awesome.html',
styleUrls: ['./font-awesome.scss']
})
export class FontAwesome {
public fontawesome = allIcon.fontawesome;
public detail : boolean =false;
public icon : string;
public val : string;
constructor( public toastrService:ToastrService) { }
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"
@for (item of icoIcons; track item){
<div class="card">
<div class="card-header pb-0">
<h4 class="m-b-0">{{item.title}}</h4>
</div>
<div class="card-body">
<div class="row icon-lists">
@for (icon of item.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>
}
Ico icon ts files
import { Component } from '@angular/core';
import { allIcon } from '../../../shared/data/data/icons/font-awasome';
import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-ico-icon',
imports: [],
templateUrl: './ico-icon.html',
styleUrls: ['./ico-icon.scss']
})
export class IcoIcon {
public icoIcons = allIcon.ico;
public detail: boolean = false;
public icon: string;
public val: string;
constructor(public toastrService: ToastrService) { }
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/berlin/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";
@for (item of themify; track item) {
<div class="card">
<div class="card-header pb-0">
<h4 class="m-b-0">{{item.title}}</h4>
</div>
<div class="card-body">
<div class="row icon-lists">
@for (i of item.icons; track 1) {
<div class="col-sm-6 col-md-6 col-lg-4" (click)="toggleWithInfo(i)">
<i [class]="i"></i> {{i}}
</div>
}
</div>
</div>
</div>
}
themify icon ts files
// ts file
import { Component } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { allIcon } from '../../../shared/data/data/icons/font-awasome';
@Component({
selector: 'app-themify-icon',
imports: [],
templateUrl: './themify-icon.html',
styleUrls: ['./themify-icon.scss']
})
export class ThemifyIcon {
public themify = allIcon.themify;
public detail: boolean = false;
public icon: string;
public val: string;
constructor(public toastrService:ToastrService) { }
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"
@for (item of feather; track item) {
<div class="card">
<div class="card-header pb-0">
<h4 class="m-b-0">{{item.title}}</h4>
</div>
<div class="card-body">
<div class="row icon-lists feather-icons">
@for (data of item.icons; track data) {
<div class="col-12 col-sm-6 col-xl-4" (click)="toggleWithInfo(data)">
<div class="d-flex">
<app-feather-icon [icon]="data"></app-feather-icon>
<div class="flex-grow-1 align-self-center">
<h6 class="mt-0">{{data}}</h6>
</div>
</div>
</div>
}
</div>
</div>
</div>
}
you have add ts files
import { Component } from '@angular/core';
import { allIcon } from '../../../shared/data/data/icons/font-awasome';
import { ToastrService } from 'ngx-toastr';
import { FeatherIcon } from '../../../shared/component/feather-icon/feather-icon';
@Component({
selector: 'app-feathers-icon',
imports: [FeatherIcon],
templateUrl: './feather-icon.html',
styleUrls: ['./feather-icon.scss']
})
export class FeatherIcons {
public feather = allIcon.feather;
public detail: boolean = false;
public flag: string;
public val: string;
public icon: string;
constructor(public toastrService: ToastrService) { }
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"]
}
]
}