af

angular-feather

A-la-carte integration of Feather Icons in Angular applications

Showing:

Popularity

Downloads/wk

8.7K

GitHub Stars

131

Maintenance

Last Commit

9mos ago

Contributors

4

Package

Dependencies

1

Size (min+gzip)

0.9KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

angular-feather

npm license downloads

Description

This package allows you to use the Feather Icons in your angular applications. The icons are designed by Cole Bemis. Import only the icons that you need.

Demo

>> See live demo << (right-click, open in new tab)

Usage

1. Install the package

npm install angular-feather

2. Generate a module to host the icons you'll import

ng generate module icons

3. Import assets

You need to import:

  • FeatherModule, as it contains the <i-feather> component
  • The SVGs that you need

We put this in IconsModule for modularity. See example below:

file: icon.module.ts

import { NgModule } from '@angular/core';

import { FeatherModule } from 'angular-feather';
import { Camera, Heart, Github } from 'angular-feather/icons';

// Select some icons (use an object, not an array)
const icons = {
  Camera,
  Heart,
  Github
};

@NgModule({
  imports: [
    FeatherModule.pick(icons)
  ],
  exports: [
    FeatherModule
  ]
})
export class IconsModule { }

// NOTES:
// 1. We add FeatherModule to the 'exports', since the <i-feather> component will be used in templates of parent module
// 2. Don't forget to pick some icons using FeatherModule.pick({ ... })

3. Use it in template

After importing the IconsModule in your feature or shared module, use the icons as follows:

<i-feather name="github" class="someclass"></i-feather>
<i-feather name="heart" style="color: green;"></i-feather>
<i-feather name="camera"></i-feather>

Styling icons

<i-feather name="heart" class="big fill-red"></i-feather>
.big {
  height: 50px;
  width: 50px;
}

.fill-red {
  fill: red;
}

Available icons

Refer to the table below for the list of all available icons.

Symbol to importHTML template
activityActivity<i-feather name="activity"></i-feather>
airplayAirplay<i-feather name="airplay"></i-feather>
alert-circleAlertCircle<i-feather name="alert-circle"></i-feather>
alert-octagonAlertOctagon<i-feather name="alert-octagon"></i-feather>
alert-triangleAlertTriangle<i-feather name="alert-triangle"></i-feather>
align-centerAlignCenter<i-feather name="align-center"></i-feather>
align-justifyAlignJustify<i-feather name="align-justify"></i-feather>
align-leftAlignLeft<i-feather name="align-left"></i-feather>
align-rightAlignRight<i-feather name="align-right"></i-feather>
anchorAnchor<i-feather name="anchor"></i-feather>
apertureAperture<i-feather name="aperture"></i-feather>
archiveArchive<i-feather name="archive"></i-feather>
arrow-down-circleArrowDownCircle<i-feather name="arrow-down-circle"></i-feather>
arrow-down-leftArrowDownLeft<i-feather name="arrow-down-left"></i-feather>
arrow-down-rightArrowDownRight<i-feather name="arrow-down-right"></i-feather>
arrow-downArrowDown<i-feather name="arrow-down"></i-feather>
arrow-left-circleArrowLeftCircle<i-feather name="arrow-left-circle"></i-feather>
arrow-leftArrowLeft<i-feather name="arrow-left"></i-feather>
arrow-right-circleArrowRightCircle<i-feather name="arrow-right-circle"></i-feather>
arrow-rightArrowRight<i-feather name="arrow-right"></i-feather>
arrow-up-circleArrowUpCircle<i-feather name="arrow-up-circle"></i-feather>
arrow-up-leftArrowUpLeft<i-feather name="arrow-up-left"></i-feather>
arrow-up-rightArrowUpRight<i-feather name="arrow-up-right"></i-feather>
arrow-upArrowUp<i-feather name="arrow-up"></i-feather>
at-signAtSign<i-feather name="at-sign"></i-feather>
awardAward<i-feather name="award"></i-feather>
bar-chart-2BarChart2<i-feather name="bar-chart-2"></i-feather>
bar-chartBarChart<i-feather name="bar-chart"></i-feather>
battery-chargingBatteryCharging<i-feather name="battery-charging"></i-feather>
batteryBattery<i-feather name="battery"></i-feather>
bell-offBellOff<i-feather name="bell-off"></i-feather>
bellBell<i-feather name="bell"></i-feather>
bluetoothBluetooth<i-feather name="bluetooth"></i-feather>
boldBold<i-feather name="bold"></i-feather>
book-openBookOpen<i-feather name="book-open"></i-feather>
bookBook<i-feather name="book"></i-feather>
bookmarkBookmark<i-feather name="bookmark"></i-feather>
boxBox<i-feather name="box"></i-feather>
briefcaseBriefcase<i-feather name="briefcase"></i-feather>
calendarCalendar<i-feather name="calendar"></i-feather>
camera-offCameraOff<i-feather name="camera-off"></i-feather>
cameraCamera<i-feather name="camera"></i-feather>
castCast<i-feather name="cast"></i-feather>
check-circleCheckCircle<i-feather name="check-circle"></i-feather>
check-squareCheckSquare<i-feather name="check-square"></i-feather>
checkCheck<i-feather name="check"></i-feather>
chevron-downChevronDown<i-feather name="chevron-down"></i-feather>
chevron-leftChevronLeft<i-feather name="chevron-left"></i-feather>
chevron-rightChevronRight<i-feather name="chevron-right"></i-feather>
chevron-upChevronUp<i-feather name="chevron-up"></i-feather>
chevrons-downChevronsDown<i-feather name="chevrons-down"></i-feather>
chevrons-leftChevronsLeft<i-feather name="chevrons-left"></i-feather>
chevrons-rightChevronsRight<i-feather name="chevrons-right"></i-feather>
chevrons-upChevronsUp<i-feather name="chevrons-up"></i-feather>
chromeChrome<i-feather name="chrome"></i-feather>
circleCircle<i-feather name="circle"></i-feather>
clipboardClipboard<i-feather name="clipboard"></i-feather>
clockClock<i-feather name="clock"></i-feather>
cloud-drizzleCloudDrizzle<i-feather name="cloud-drizzle"></i-feather>
cloud-lightningCloudLightning<i-feather name="cloud-lightning"></i-feather>
cloud-offCloudOff<i-feather name="cloud-off"></i-feather>
cloud-rainCloudRain<i-feather name="cloud-rain"></i-feather>
cloud-snowCloudSnow<i-feather name="cloud-snow"></i-feather>
cloudCloud<i-feather name="cloud"></i-feather>
codeCode<i-feather name="code"></i-feather>
codepenCodepen<i-feather name="codepen"></i-feather>
codesandboxCodesandbox<i-feather name="codesandbox"></i-feather>
coffeeCoffee<i-feather name="coffee"></i-feather>
columnsColumns<i-feather name="columns"></i-feather>
commandCommand<i-feather name="command"></i-feather>
compassCompass<i-feather name="compass"></i-feather>
copyCopy<i-feather name="copy"></i-feather>
corner-down-leftCornerDownLeft<i-feather name="corner-down-left"></i-feather>
corner-down-rightCornerDownRight<i-feather name="corner-down-right"></i-feather>
corner-left-downCornerLeftDown<i-feather name="corner-left-down"></i-feather>
corner-left-upCornerLeftUp<i-feather name="corner-left-up"></i-feather>
corner-right-downCornerRightDown<i-feather name="corner-right-down"></i-feather>
corner-right-upCornerRightUp<i-feather name="corner-right-up"></i-feather>
corner-up-leftCornerUpLeft<i-feather name="corner-up-left"></i-feather>
corner-up-rightCornerUpRight<i-feather name="corner-up-right"></i-feather>
cpuCpu<i-feather name="cpu"></i-feather>
credit-cardCreditCard<i-feather name="credit-card"></i-feather>
cropCrop<i-feather name="crop"></i-feather>
crosshairCrosshair<i-feather name="crosshair"></i-feather>
databaseDatabase<i-feather name="database"></i-feather>
deleteDelete<i-feather name="delete"></i-feather>
discDisc<i-feather name="disc"></i-feather>
dollar-signDollarSign<i-feather name="dollar-sign"></i-feather>
download-cloudDownloadCloud<i-feather name="download-cloud"></i-feather>
downloadDownload<i-feather name="download"></i-feather>
dropletDroplet<i-feather name="droplet"></i-feather>
edit-2Edit2<i-feather name="edit-2"></i-feather>
edit-3Edit3<i-feather name="edit-3"></i-feather>
editEdit<i-feather name="edit"></i-feather>
external-linkExternalLink<i-feather name="external-link"></i-feather>
eye-offEyeOff<i-feather name="eye-off"></i-feather>
eyeEye<i-feather name="eye"></i-feather>
facebookFacebook<i-feather name="facebook"></i-feather>
fast-forwardFastForward<i-feather name="fast-forward"></i-feather>
featherFeather<i-feather name="feather"></i-feather>
figmaFigma<i-feather name="figma"></i-feather>
file-minusFileMinus<i-feather name="file-minus"></i-feather>
file-plusFilePlus<i-feather name="file-plus"></i-feather>
file-textFileText<i-feather name="file-text"></i-feather>
fileFile<i-feather name="file"></i-feather>
filmFilm<i-feather name="film"></i-feather>
filterFilter<i-feather name="filter"></i-feather>
flagFlag<i-feather name="flag"></i-feather>
folder-minusFolderMinus<i-feather name="folder-minus"></i-feather>
folder-plusFolderPlus<i-feather name="folder-plus"></i-feather>
folderFolder<i-feather name="folder"></i-feather>
framerFramer<i-feather name="framer"></i-feather>
frownFrown<i-feather name="frown"></i-feather>
giftGift<i-feather name="gift"></i-feather>
git-branchGitBranch<i-feather name="git-branch"></i-feather>
git-commitGitCommit<i-feather name="git-commit"></i-feather>
git-mergeGitMerge<i-feather name="git-merge"></i-feather>
git-pull-requestGitPullRequest<i-feather name="git-pull-request"></i-feather>
githubGithub<i-feather name="github"></i-feather>
gitlabGitlab<i-feather name="gitlab"></i-feather>
globeGlobe<i-feather name="globe"></i-feather>
gridGrid<i-feather name="grid"></i-feather>
hard-driveHardDrive<i-feather name="hard-drive"></i-feather>
hashHash<i-feather name="hash"></i-feather>
headphonesHeadphones<i-feather name="headphones"></i-feather>
heartHeart<i-feather name="heart"></i-feather>
help-circleHelpCircle<i-feather name="help-circle"></i-feather>
hexagonHexagon<i-feather name="hexagon"></i-feather>
homeHome<i-feather name="home"></i-feather>
imageImage<i-feather name="image"></i-feather>
inboxInbox<i-feather name="inbox"></i-feather>
infoInfo<i-feather name="info"></i-feather>
instagramInstagram<i-feather name="instagram"></i-feather>
italicItalic<i-feather name="italic"></i-feather>
keyKey<i-feather name="key"></i-feather>
layersLayers<i-feather name="layers"></i-feather>
layoutLayout<i-feather name="layout"></i-feather>
life-buoyLifeBuoy<i-feather name="life-buoy"></i-feather>
link-2Link2<i-feather name="link-2"></i-feather>
linkLink<i-feather name="link"></i-feather>
linkedinLinkedin<i-feather name="linkedin"></i-feather>
listList<i-feather name="list"></i-feather>
loaderLoader<i-feather name="loader"></i-feather>
lockLock<i-feather name="lock"></i-feather>
log-inLogIn<i-feather name="log-in"></i-feather>
log-outLogOut<i-feather name="log-out"></i-feather>
mailMail<i-feather name="mail"></i-feather>
map-pinMapPin<i-feather name="map-pin"></i-feather>
mapMap<i-feather name="map"></i-feather>
maximize-2Maximize2<i-feather name="maximize-2"></i-feather>
maximizeMaximize<i-feather name="maximize"></i-feather>
mehMeh<i-feather name="meh"></i-feather>
menuMenu<i-feather name="menu"></i-feather>
message-circleMessageCircle<i-feather name="message-circle"></i-feather>
message-squareMessageSquare<i-feather name="message-square"></i-feather>
mic-offMicOff<i-feather name="mic-off"></i-feather>
micMic<i-feather name="mic"></i-feather>
minimize-2Minimize2<i-feather name="minimize-2"></i-feather>
minimizeMinimize<i-feather name="minimize"></i-feather>
minus-circleMinusCircle<i-feather name="minus-circle"></i-feather>
minus-squareMinusSquare<i-feather name="minus-square"></i-feather>
minusMinus<i-feather name="minus"></i-feather>
monitorMonitor<i-feather name="monitor"></i-feather>
moonMoon<i-feather name="moon"></i-feather>
more-horizontalMoreHorizontal<i-feather name="more-horizontal"></i-feather>
more-verticalMoreVertical<i-feather name="more-vertical"></i-feather>
mouse-pointerMousePointer<i-feather name="mouse-pointer"></i-feather>
moveMove<i-feather name="move"></i-feather>
musicMusic<i-feather name="music"></i-feather>
navigation-2Navigation2<i-feather name="navigation-2"></i-feather>
navigationNavigation<i-feather name="navigation"></i-feather>
octagonOctagon<i-feather name="octagon"></i-feather>
packagePackage<i-feather name="package"></i-feather>
paperclipPaperclip<i-feather name="paperclip"></i-feather>
pause-circlePauseCircle<i-feather name="pause-circle"></i-feather>
pausePause<i-feather name="pause"></i-feather>
pen-toolPenTool<i-feather name="pen-tool"></i-feather>
percentPercent<i-feather name="percent"></i-feather>
phone-callPhoneCall<i-feather name="phone-call"></i-feather>
phone-forwardedPhoneForwarded<i-feather name="phone-forwarded"></i-feather>
phone-incomingPhoneIncoming<i-feather name="phone-incoming"></i-feather>
phone-missedPhoneMissed<i-feather name="phone-missed"></i-feather>
phone-offPhoneOff<i-feather name="phone-off"></i-feather>
phone-outgoingPhoneOutgoing<i-feather name="phone-outgoing"></i-feather>
phonePhone<i-feather name="phone"></i-feather>
pie-chartPieChart<i-feather name="pie-chart"></i-feather>
play-circlePlayCircle<i-feather name="play-circle"></i-feather>
playPlay<i-feather name="play"></i-feather>
plus-circlePlusCircle<i-feather name="plus-circle"></i-feather>
plus-squarePlusSquare<i-feather name="plus-square"></i-feather>
plusPlus<i-feather name="plus"></i-feather>
pocketPocket<i-feather name="pocket"></i-feather>
powerPower<i-feather name="power"></i-feather>
printerPrinter<i-feather name="printer"></i-feather>
radioRadio<i-feather name="radio"></i-feather>
refresh-ccwRefreshCcw<i-feather name="refresh-ccw"></i-feather>
refresh-cwRefreshCw<i-feather name="refresh-cw"></i-feather>
repeatRepeat<i-feather name="repeat"></i-feather>
rewindRewind<i-feather name="rewind"></i-feather>
rotate-ccwRotateCcw<i-feather name="rotate-ccw"></i-feather>
rotate-cwRotateCw<i-feather name="rotate-cw"></i-feather>
rssRss<i-feather name="rss"></i-feather>
saveSave<i-feather name="save"></i-feather>
scissorsScissors<i-feather name="scissors"></i-feather>
searchSearch<i-feather name="search"></i-feather>
sendSend<i-feather name="send"></i-feather>
serverServer<i-feather name="server"></i-feather>
settingsSettings<i-feather name="settings"></i-feather>
share-2Share2<i-feather name="share-2"></i-feather>
shareShare<i-feather name="share"></i-feather>
shield-offShieldOff<i-feather name="shield-off"></i-feather>
shieldShield<i-feather name="shield"></i-feather>
shopping-bagShoppingBag<i-feather name="shopping-bag"></i-feather>
shopping-cartShoppingCart<i-feather name="shopping-cart"></i-feather>
shuffleShuffle<i-feather name="shuffle"></i-feather>
sidebarSidebar<i-feather name="sidebar"></i-feather>
skip-backSkipBack<i-feather name="skip-back"></i-feather>
skip-forwardSkipForward<i-feather name="skip-forward"></i-feather>
slackSlack<i-feather name="slack"></i-feather>
slashSlash<i-feather name="slash"></i-feather>
slidersSliders<i-feather name="sliders"></i-feather>
smartphoneSmartphone<i-feather name="smartphone"></i-feather>
smileSmile<i-feather name="smile"></i-feather>
speakerSpeaker<i-feather name="speaker"></i-feather>
squareSquare<i-feather name="square"></i-feather>
starStar<i-feather name="star"></i-feather>
stop-circleStopCircle<i-feather name="stop-circle"></i-feather>
sunSun<i-feather name="sun"></i-feather>
sunriseSunrise<i-feather name="sunrise"></i-feather>
sunsetSunset<i-feather name="sunset"></i-feather>
tabletTablet<i-feather name="tablet"></i-feather>
tagTag<i-feather name="tag"></i-feather>
targetTarget<i-feather name="target"></i-feather>
terminalTerminal<i-feather name="terminal"></i-feather>
thermometerThermometer<i-feather name="thermometer"></i-feather>
thumbs-downThumbsDown<i-feather name="thumbs-down"></i-feather>
thumbs-upThumbsUp<i-feather name="thumbs-up"></i-feather>
toggle-leftToggleLeft<i-feather name="toggle-left"></i-feather>
toggle-rightToggleRight<i-feather name="toggle-right"></i-feather>
toolTool<i-feather name="tool"></i-feather>
trash-2Trash2<i-feather name="trash-2"></i-feather>
trashTrash<i-feather name="trash"></i-feather>
trelloTrello<i-feather name="trello"></i-feather>
trending-downTrendingDown<i-feather name="trending-down"></i-feather>
trending-upTrendingUp<i-feather name="trending-up"></i-feather>
triangleTriangle<i-feather name="triangle"></i-feather>
truckTruck<i-feather name="truck"></i-feather>
tvTv<i-feather name="tv"></i-feather>
twitchTwitch<i-feather name="twitch"></i-feather>
twitterTwitter<i-feather name="twitter"></i-feather>
typeType<i-feather name="type"></i-feather>
umbrellaUmbrella<i-feather name="umbrella"></i-feather>
underlineUnderline<i-feather name="underline"></i-feather>
unlockUnlock<i-feather name="unlock"></i-feather>
upload-cloudUploadCloud<i-feather name="upload-cloud"></i-feather>
uploadUpload<i-feather name="upload"></i-feather>
user-checkUserCheck<i-feather name="user-check"></i-feather>
user-minusUserMinus<i-feather name="user-minus"></i-feather>
user-plusUserPlus<i-feather name="user-plus"></i-feather>
user-xUserX<i-feather name="user-x"></i-feather>
userUser<i-feather name="user"></i-feather>
usersUsers<i-feather name="users"></i-feather>
video-offVideoOff<i-feather name="video-off"></i-feather>
videoVideo<i-feather name="video"></i-feather>
voicemailVoicemail<i-feather name="voicemail"></i-feather>
volume-1Volume1<i-feather name="volume-1"></i-feather>
volume-2Volume2<i-feather name="volume-2"></i-feather>
volume-xVolumeX<i-feather name="volume-x"></i-feather>
volumeVolume<i-feather name="volume"></i-feather>
watchWatch<i-feather name="watch"></i-feather>
wifi-offWifiOff<i-feather name="wifi-off"></i-feather>
wifiWifi<i-feather name="wifi"></i-feather>
windWind<i-feather name="wind"></i-feather>
x-circleXCircle<i-feather name="x-circle"></i-feather>
x-octagonXOctagon<i-feather name="x-octagon"></i-feather>
x-squareXSquare<i-feather name="x-square"></i-feather>
xX<i-feather name="x"></i-feather>
youtubeYoutube<i-feather name="youtube"></i-feather>
zap-offZapOff<i-feather name="zap-off"></i-feather>
zapZap<i-feather name="zap"></i-feather>
zoom-inZoomIn<i-feather name="zoom-in"></i-feather>
zoom-outZoomOut<i-feather name="zoom-out"></i-feather>

FAQ

1. Is there a way to pick all the icons at once?

Yes, by importing allIcons from 'angular-feather/icons':

import { allIcons } from 'angular-feather/icons';

@NgModule({
  imports: [
    FeatherModule.pick(allIcons)
  ],
  exports: [
    FeatherModule
  ]
})
export class IconsModule { }

However, keep in mind that by doing this, all icons will end up in your application bundle. While this may not be much of an issue for prototyping, it is not recommended for any application that you plan to release.

License

MIT © Michael Bazos

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100