Icons
Flag Icons Offical link 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";
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-header card-no-border pb-0">
<h3 class="m-b-0">Flag Icons</h3>
</div>
<div class="card-body">
<div class="row px-3 icon-lists flag-icons">
<div class="col-12 col-sm-6 col-xl-4" *ngFor="let flagData of flagIconData">
<div class="d-flex"><i class="flag-icon flag-icon-{{ flagData.abbrivation }}"></i>
<div class="flex-grow-1 align-self-center">
<h5>{{ flagData.abbrivation | uppercase }}</h5>
<h6 class="mt-0">{{ flagData.name }}</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- flag icon ts -->
import { Component } from '@angular/core';
import * as Data from '../../../shared/data/data/icons/flag-icon';
import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-flag-icon',
imports: [ UpperCasePipe,CommonModule]
templateUrl: './flag-icon.html',
styleUrls: ['./flag-icon.scss']
})
export class FlagIcon {
public flagIconData = Data.flagIconData;
}
<!-- flag icon data -->
export const flagIconData = [
{ abbrivation: 'in', name: 'India Flag' },
{ abbrivation: 'ad', name: 'Andorra Flag' },
{ abbrivation: 'ae', name: 'United Arab Emirates Flag' },
{ abbrivation: 'af', name: 'Afghanistan Flag' },
{ abbrivation: 'ag', name: 'Antigua and Barbuda Flag' },
]
Font awesome Offical link Preview link
You have to add the following style and add font-awesome folder in your fonts folder
<div class="container-fluid">
<div class="row">
<div class="col-sm-12" *ngFor="let allData of fontawesomeIconData">
<div class="card">
<div class="card-header card-no-border pb-0">
<h3 class="m-b-0">{{ allData.title }}</h3>
</div>
<div class="card-body">
<div class="row icon-lists">
<div class="col-sm-6 col-md-4 col-xl-3" *ngFor="let icon of allData.icons" (click)="getData(icon)">
<i class="fa fa-{{ icon }}"></i>fa-{{ icon }}
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- font awesome ts -->
import { Component } from '@angular/core';
import * as Data from '../../../shared/data/data/icons/fontawesome-icon';
@Component({
selector: 'app-fontawesome-icon',
imports: []
templateUrl: './fontawesome-icon.html',
styleUrls: ['./fontawesome-icon.scss']
})
export class FontawesomeIcon {
public fontawesomeIconData = Data.fontawesomeIconData;
}<!-- font awesome icon data -->
export const fontawesomeIconData = [
{
title: 'Icon 20',
icons: ["bluetooth", "bluetooth-b", "codiepie", "credit-card-alt", "edge", "fort-awesome", "hashtag", "mixcloud", "modx", "pause-circle", "pause-circle-o", "percent", "product-hunt", "reddit-alien", "scribd", "shopping-bag", "shopping-basket", "stop-circle", "stop-circle-o", "usb"
]
},
{
title: 'Currency Icons',
icons: ["bitcoin", "btc", "cny", "dollar", "eur", "euro", "gbp", "inr", "jpy", "krw", "money", "rmb", "rouble", "rub", "ruble", "rupee", "try", "turkish-lira", "usd", "won", "yen"]
},
]Ico icon Offical link Preview link
You have to add the following style and add ico folder in your fonts folder
<!-- some icon display for demo -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12" *ngFor="let allData of icoIconData">
<div class="card">
<div class="card-header card-no-border pb-0">
<h3 class="m-b-0">{{ allData.title }}</h3>
</div>
<div class="card-body">
<div class="row icon-lists">
<div class="col-sm-6 col-md-6 col-lg-4" *ngFor="let icon of allData.icons">
<i class="icofont icofont-{{ icon }}"></i>{{ icon }}
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- ico icon ts -->
import { Component } from '@angular/core';
import { icoIconData } from '../../../shared/data/data/icons/ico-icon';
@Component({
selector: 'app-ico-icon',
templateUrl: './ico-icon.html',
styleUrls: ['./ico-icon.scss'],
imports: []
})
export class IcoIcon {
public icoIconData = icoIconData;
}<!-- ico icon ts -->
export const icoIconData = [
{
title: 'Abstract',
icons: ["angry-monster", "bathtub", "bird-wings", "bow", "brain-alt", "butterfly-alt", "castle", "circuit", "dart", "dice-alt", "disability-race", "diving-goggle", "fire-alt", "flame-torch", "flora", "flora-flower", "gift-box", "halloween-pumpkin", "hand-power", "hand-thunder", "king-crown", "king-monster", "love", "magician-hat", "native-american", "open-eye", "owl-look", "phoenix", "queen-crown", "robot-face", "sand-clock", "shield-alt", "ship-wheel", "skull-danger", "skull-face", "snail", "snow-alt", "snow-flake", "snowmobile", "space-shuttle", "star-shape", "swirl", "tattoo-wing", "throne", "touch", "tree-alt", "triangle", "unity-hand", "weed", "woman-bird"]
},
{
title: 'Brand',
icons: ["animal-bat", "animal-bear", "animal-bear-tracks", "animal-bird", "animal-bird-alt", "animal-bone", "animal-bull", "animal-camel", "animal-camel-alt", "animal-camel-head", "animal-cat", "animal-cat-alt-1", "animal-cat-alt-2", "animal-cat-alt-3", "animal-cat-alt-4", "animal-cat-with-dog", "animal-cow", "animal-cow-head", "animal-crab", "animal-crocodile", "animal-deer-head", "animal-dog", "animal-dog-alt", "animal-dog-barking", "animal-dolphin", "animal-duck-tracks", "animal-eagle-head", "animal-eaten-fish", "animal-elephant", "animal-elephant-alt", "animal-elephant-head", "animal-elephant-head-alt", "animal-elk", "animal-fish", "animal-fish-alt-1", "animal-fish-alt-2", "animal-fish-alt-3", "animal-fish-alt-4", "animal-fox", "animal-fox-alt", "animal-frog", "animal-frog-tracks", "animal-froggy", "animal-giraffe", "animal-giraffe-alt", "animal-goat-head", "animal-goat-head-alt-1", "animal-goat-head-alt-2", "animal-gorilla", "animal-hen-tracks", "animal-horse-head", "animal-horse-head-alt-1", "animal-horse-head-alt-2", "animal-horse-tracks", "animal-jellyfish", "animal-kangaroo", "animal-lemur", "animal-lion", "animal-lion-alt", "animal-lion-head", "animal-lion-head-alt", "animal-monkey", "animal-monkey-alt-1", "animal-monkey-alt-2", "animal-monkey-alt-3", "animal-octopus", "animal-octopus-alt", "animal-owl", "animal-panda", "animal-panda-alt", "animal-panther", "animal-parrot", "animal-parrot-lip", "animal-paw", "animal-pelican", "animal-penguin", "animal-pig", "animal-pig-alt", "animal-pigeon", "animal-pigeon-alt", "animal-pigeons", "animal-rabbit-running", "animal-rat-alt", "animal-rhino", "animal-rhino-head", "animal-rooster", "animal-seahorse", "animal-seal", "animal-shrimp", "animal-snail", "animal-snail-alt-1", "animal-snail-alt-2", "animal-snake", "animal-squid", "animal-squirrel", "animal-tiger", "animal-tiger-alt", "animal-turtle", "animal-whale", "animal-woodpecker", "animal-zebra"]
},
]To use another types of ico icons you have to refer below template link
Preview Page: https://admin.pixelstrap.com/boho/theme/ico-icon.html
Themify Offical link Preview link
You have to add the following style and add themify folder in your fonts folder
<!-- themify icon css -->
@import "./themify.scss";<!-- some icon display for demo -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12" *ngFor="let allData of themifyIconData">
<div class="card">
<div class="card-header card-no-border pb-0">
<h3 class="m-b-0">{{ allData.title }}</h3>
</div>
<div class="card-body">
<div class="row px-3 icon-lists">
<div class="col-sm-6 col-md-6 col-lg-4" *ngFor="let icon of allData.icons">
<i class="{{ icon }}"></i> {{ icon }}
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- themify icon css -->
import { Component } from '@angular/core';
import { themifyIconData } from '../../../shared/data/data/icons/themify';
@Component({
selector: 'app-themify-icon',
templateUrl: './themify-icon.html',
styleUrls: ['./themify-icon.scss'],
imports: []
})
export class ThemifyIcon {
public themifyIconData = themifyIconData;
}
<!-- themify icon css -->
export const themifyIconData = [
{
title: 'Arrows & Direction Icons',
icons: ["icon-arrow-up", "icon-arrow-right", "icon-arrow-left", "icon-arrow-down", "icon-arrows-vertical", "icon-arrows-horizontal", "icon-angle-up", "icon-angle-right", "icon-angle-left", "icon-angle-down", "icon-angle-double-up", "icon-angle-double-right", "icon-angle-double-left", "icon-angle-double-down", "icon-move", "icon-fullscreen", "icon-arrow-top-right", "icon-arrow-top-left", "icon-arrow-circle-up", "icon-arrow-circle-right", "icon-arrow-circle-left", "icon-arrow-circle-down", "icon-arrows-corner", "icon-split-v", "icon-split-v-alt", "icon-split-h", "icon-hand-point-up", "icon-hand-point-right", "icon-hand-point-left", "icon-hand-point-down", "icon-back-right", "icon-back-left", "icon-exchange-vertical"]
},
{
title: 'Web App Icons',
icons: ["icon-wand", "icon-save", "icon-save-alt", "icon-direction", "icon-direction-alt", "icon-user", "icon-link", "icon-unlink", "icon-trash", "icon-target", "icon-tag", "icon-desktop", "icon-tablet", "icon-mobile", "icon-email", "icon-star", "icon-spray", "icon-signal", "icon-shopping-cart", "icon-shopping-cart-full", "icon-settings", "icon-search", "icon-zoom-in", "icon-zoom-out", "icon-cut", "icon-ruler", "icon-ruler-alt-2", "icon-ruler-pencil", "icon-ruler-alt", "icon-bookmark", "icon-bookmark-alt", "icon-reload", "icon-plus", "icon-minus", "icon-close", "icon-pin", "icon-pencil", "icon-pencil-alt", "icon-paint-roller", "icon-paint-bucket", "icon-na", "icon-medall", "icon-medall-alt", "icon-marker", "icon-marker-alt", "icon-lock", "icon-unlock", "icon-location-arrow", "icon-layout", "icon-layers", "icon-layers-alt", "icon-key", "icon-image", "icon-heart", "icon-heart-broken", "icon-hand-stop", "icon-hand-open", "icon-hand-drag", "icon-flag", "icon-flag-alt", "icon-flag-alt-2", "icon-eye", "icon-import", "icon-export", "icon-cup", "icon-crown", "icon-comments", "icon-comment", "icon-comment-alt", "icon-thought", "icon-clip", "icon-check", "icon-check-box", "icon-camera", "icon-announcement", "icon-brush", "icon-brush-alt", "icon-palette", "icon-briefcase", "icon-bolt", "icon-bolt-alt", "icon-blackboard", "icon-bag", "icon-world", "icon-wheelchair", "icon-car", "icon-truck", "icon-timer", "icon-ticket", "icon-thumb-up", "icon-thumb-down", "icon-stats-up", "icon-stats-down", "icon-shine", "icon-shift-right", "icon-shift-left", "icon-shift-right-alt", "icon-shift-left-alt", "icon-shield", "icon-notepad", "icon-server", "icon-pulse", "icon-printer", "icon-power-off", "icon-plug", "icon-pie-chart", "icon-panel", "icon-package", "icon-music", "icon-music-alt", "icon-mouse", "icon-mouse-alt", "icon-money", "icon-microphone", "icon-menu", "icon-menu-alt", "icon-map", "icon-map-alt", "icon-location-pin", "icon-light-bulb", "icon-info", "icon-infinite", "icon-id-badge", "icon-hummer", "icon-home", "icon-help", "icon-headphone", "icon-harddrives", "icon-harddrive", "icon-gift", "icon-game", "icon-filter", "icon-files", "icon-file", "icon-zip", "icon-folder", "icon-envelope", "icon-dashboard", "icon-cloud", "icon-cloud-up", "icon-cloud-down", "icon-clipboard", "icon-calendar", "icon-book", "icon-bell", "icon-basketball", "icon-bar-chart", "icon-bar-chart-alt", "icon-archive", "icon-anchor", "icon-alert", "icon-alarm-clock", "icon-agenda", "icon-write", "icon-wallet", "icon-video-clapper", "icon-video-camera", "icon-vector", "icon-support", "icon-stamp", "icon-slice", "icon-shortcode", "icon-receipt", "icon-pin2", "icon-pin-alt", "icon-pencil-alt2", "icon-eraser", "icon-more", "icon-more-alt", "icon-microphone-alt", "icon-magnet", "icon-line-double", "icon-line-dotted", "icon-line-dashed", "icon-ink-pen", "icon-info-alt", "icon-help-alt", "icon-headphone-alt", "icon-gallery", "icon-face-smile", "icon-face-sad", "icon-credit-card", "icon-comments-smiley", "icon-time", "icon-share", "icon-share-alt", "icon-rocket", "icon-new-window", "icon-rss", "icon-rss-alt"]
},
]Feather icon Offical link Preview link
You have to add the following style and add feather folder in your fonts folder
<!-- some icon display for demo -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12" *ngFor="let allData of featherIconData">
<div class="card">
<div class="card-header card-no-border pb-0">
<h3 class="m-b-0">{{ allData.title }}</h3>
</div>
<div class="card-body">
<div class="row px-3 icon-lists feather-icons">
<div class="col-12 col-sm-6 col-xl-4" *ngFor="let icon of allData.icons" style="font-family: 'Nunito Sans', sans-serif, sans-serif;" >
<div class="d-flex">
<app-feather-icons [icon]="icon"></app-feather-icons>
<div class="flex-grow-1 align-self-center">
<h6 class="mt-0">{{ icon }}</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- feather icon ts -->
import { Component } from '@angular/core';
import { featherIconData } from '../../../shared/data/data/icons/feather-icon';
@Component({
selector: 'app-feather-icon',
imports: [ FeatherIcons],
templateUrl: './feather-icon.html',
styleUrls: ['./feather-icon.scss']
})
export class FeatherIcon {
public featherIconData = featherIconData;
}
<!-- feather icon Data -->
export const featherIconData = [
{
title: 'Feather Icons',
icons: ["activity", "airplay", "alert-circle", "alert-octagon", "alert-triangle", "align-center", "align-justify", "align-left", "align-right", "anchor", "aperture", "archive", "arrow-down-circle", "arrow-down-left", "arrow-down-right", "arrow-down", "arrow-left-circle", "arrow-left", "arrow-right-circle", "arrow-right", "arrow-up-circle", "arrow-up-left", "arrow-up-right", "arrow-up", "at-sign", "award", "bar-chart-2", "bar-chart", "battery-charging", "battery", "bell-off", "bell", "bluetooth", "bold", "book-open", "book", "bookmark", "box", "briefcase", "calendar", "camera-off", "camera", "cast", "check-circle", "check-square", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "chevrons-down", "chevrons-left", "chevrons-right", "chevrons-up", "chrome", "circle", "clipboard", "clock", "cloud-drizzle", "cloud-lightning", "cloud-off", "cloud-rain", "cloud-snow", "cloud", "code", "codepen", "coffee", "command", "compass", "copy", "corner-down-left", "corner-down-right", "corner-left-down", "corner-left-up", "corner-right-down", "corner-right-up", "corner-up-left", "corner-up-right", "cpu", "credit-card", "crop", "crosshair", "database", "delete", "disc", "dollar-sign", "download-cloud", "download", "droplet", "edit-2", "edit-3", "edit", "external-link", "eye-off", "eye", "facebook", "fast-forward", "feather", "file-minus", "file-plus", "file-text", "file", "film", "filter", "flag", "folder-minus", "folder-plus", "folder", "gift", "git-branch", "git-commit", "git-merge", "git-pull-request", "github", "gitlab", "globe", "grid", "hard-drive", "hash", "headphones", "heart", "help-circle", "home", "image", "inbox", "info", "instagram", "italic", "layers", "layout", "life-buoy", "link-2", "link", "linkedin", "list", "loader", "lock", "log-in", "log-out", "mail", "map-pin", "map", "maximize-2", "maximize", "menu", "message-circle", "message-square", "mic-off", "mic", "minimize-2", "minimize", "minus-circle", "minus-square", "minus", "monitor", "moon", "more-horizontal", "more-vertical", "move", "music", "navigation-2", "navigation", "octagon", "package", "paperclip", "pause-circle", "pause", "percent", "phone-call", "phone-forwarded", "phone-incoming", "phone-missed", "phone-off", "phone-outgoing", "phone", "pie-chart", "play-circle", "play", "plus-circle", "plus-square", "plus", "pocket", "power", "printer", "radio", "refresh-ccw", "refresh-cw", "repeat", "rewind", "rotate-ccw", "rotate-cw", "rss", "save", "scissors", "search", "send", "server", "settings", "share-2", "share", "shield-off", "shield", "shopping-bag", "shopping-cart", "shuffle", "sidebar", "skip-back", "skip-forward", "slack", "slash", "sliders", "smartphone", "speaker", "square", "star", "stop-circle", "sun", "sunrise", "sunset", "tablet", "tag", "target", "terminal", "thermometer", "thumbs-down", "thumbs-up", "toggle-left", "toggle-right", "trash-2", "trash", "trending-down", "trending-up", "triangle", "truck", "tv", "twitter", "type", "umbrella", "underline", "unlock", "upload-cloud", "upload", "user-check", "user-minus", "user-plus", "user-x", "user", "users", "video-off", "video", "voicemail", "volume-1", "volume-2", "volume-x", "volume", "watch", "wifi-off", "wifi", "wind", "x-circle", "x-square", "x", "youtube", "zap-off", "zap", "zoom-in", "zoom-out"]
}
]