A-la-carte integration of Feather Icons in Angular (2+) applications
Switch branches/tags
Clone or download

README.md

angular-feather

npm license stars deps status

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 <<

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 only the components you need

Declare the icons that your application depends on in IconsModule, and export them so that the consumer of IconsModule has access to them.

import { NgModule } from '@angular/core';
import { IconCamera, IconHeart, IconGithub } from 'angular-feather';

const icons = [
  IconCamera,
  IconHeart,
  IconGithub
];

@NgModule({
  exports: icons
})
export class IconsModule { }

3. Use it in template

After importing the IconsModule where appropriate, use the icons.

<i-heart></i-heart>
<i-github class="someclass"></i-github>
<i-camera style="fill: red;"></i-camera>

Styling icons

As per angular-feather 5.1.0, icons can be customised with any CSS property that you can apply on a SVG element.

<i-heart class="big fill-red"></i-heart>
.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 import Component selector
activity IconActivity <i-activity>
airplay IconAirplay <i-airplay>
alert-circle IconAlertCircle <i-alert-circle>
alert-octagon IconAlertOctagon <i-alert-octagon>
alert-triangle IconAlertTriangle <i-alert-triangle>
align-center IconAlignCenter <i-align-center>
align-justify IconAlignJustify <i-align-justify>
align-left IconAlignLeft <i-align-left>
align-right IconAlignRight <i-align-right>
anchor IconAnchor <i-anchor>
aperture IconAperture <i-aperture>
arrow-down-circle IconArrowDownCircle <i-arrow-down-circle>
arrow-down-left IconArrowDownLeft <i-arrow-down-left>
arrow-down-right IconArrowDownRight <i-arrow-down-right>
arrow-down IconArrowDown <i-arrow-down>
arrow-left-circle IconArrowLeftCircle <i-arrow-left-circle>
arrow-left IconArrowLeft <i-arrow-left>
arrow-right-circle IconArrowRightCircle <i-arrow-right-circle>
arrow-right IconArrowRight <i-arrow-right>
arrow-up-circle IconArrowUpCircle <i-arrow-up-circle>
arrow-up-left IconArrowUpLeft <i-arrow-up-left>
arrow-up-right IconArrowUpRight <i-arrow-up-right>
arrow-up IconArrowUp <i-arrow-up>
at-sign IconAtSign <i-at-sign>
award IconAward <i-award>
bar-chart-2 IconBarChart2 <i-bar-chart-2>
bar-chart IconBarChart <i-bar-chart>
battery-charging IconBatteryCharging <i-battery-charging>
battery IconBattery <i-battery>
bell-off IconBellOff <i-bell-off>
bell IconBell <i-bell>
bluetooth IconBluetooth <i-bluetooth>
bold IconBold <i-bold>
book-open IconBookOpen <i-book-open>
book IconBook <i-book>
bookmark IconBookmark <i-bookmark>
box IconBox <i-box>
briefcase IconBriefcase <i-briefcase>
calendar IconCalendar <i-calendar>
camera-off IconCameraOff <i-camera-off>
camera IconCamera <i-camera>
cast IconCast <i-cast>
check-circle IconCheckCircle <i-check-circle>
check-square IconCheckSquare <i-check-square>
check IconCheck <i-check>
chevron-down IconChevronDown <i-chevron-down>
chevron-left IconChevronLeft <i-chevron-left>
chevron-right IconChevronRight <i-chevron-right>
chevron-up IconChevronUp <i-chevron-up>
chevrons-down IconChevronsDown <i-chevrons-down>
chevrons-left IconChevronsLeft <i-chevrons-left>
chevrons-right IconChevronsRight <i-chevrons-right>
chevrons-up IconChevronsUp <i-chevrons-up>
chrome IconChrome <i-chrome>
circle IconCircle <i-circle>
clipboard IconClipboard <i-clipboard>
clock IconClock <i-clock>
cloud-drizzle IconCloudDrizzle <i-cloud-drizzle>
cloud-lightning IconCloudLightning <i-cloud-lightning>
cloud-off IconCloudOff <i-cloud-off>
cloud-rain IconCloudRain <i-cloud-rain>
cloud-snow IconCloudSnow <i-cloud-snow>
cloud IconCloud <i-cloud>
code IconCode <i-code>
codepen IconCodepen <i-codepen>
command IconCommand <i-command>
compass IconCompass <i-compass>
copy IconCopy <i-copy>
corner-down-left IconCornerDownLeft <i-corner-down-left>
corner-down-right IconCornerDownRight <i-corner-down-right>
corner-left-down IconCornerLeftDown <i-corner-left-down>
corner-left-up IconCornerLeftUp <i-corner-left-up>
corner-right-down IconCornerRightDown <i-corner-right-down>
corner-right-up IconCornerRightUp <i-corner-right-up>
corner-up-left IconCornerUpLeft <i-corner-up-left>
corner-up-right IconCornerUpRight <i-corner-up-right>
cpu IconCpu <i-cpu>
credit-card IconCreditCard <i-credit-card>
crop IconCrop <i-crop>
crosshair IconCrosshair <i-crosshair>
database IconDatabase <i-database>
delete IconDelete <i-delete>
disc IconDisc <i-disc>
dollar-sign IconDollarSign <i-dollar-sign>
download-cloud IconDownloadCloud <i-download-cloud>
download IconDownload <i-download>
droplet IconDroplet <i-droplet>
edit-2 IconEdit2 <i-edit-2>
edit-3 IconEdit3 <i-edit-3>
edit IconEdit <i-edit>
external-link IconExternalLink <i-external-link>
eye-off IconEyeOff <i-eye-off>
eye IconEye <i-eye>
facebook IconFacebook <i-facebook>
fast-forward IconFastForward <i-fast-forward>
feather IconFeather <i-feather>
file-minus IconFileMinus <i-file-minus>
file-plus IconFilePlus <i-file-plus>
file-text IconFileText <i-file-text>
file IconFile <i-file>
film IconFilm <i-film>
filter IconFilter <i-filter>
flag IconFlag <i-flag>
folder-minus IconFolderMinus <i-folder-minus>
folder-plus IconFolderPlus <i-folder-plus>
folder IconFolder <i-folder>
git-branch IconGitBranch <i-git-branch>
git-commit IconGitCommit <i-git-commit>
git-merge IconGitMerge <i-git-merge>
git-pull-request IconGitPullRequest <i-git-pull-request>
github IconGithub <i-github>
gitlab IconGitlab <i-gitlab>
globe IconGlobe <i-globe>
grid IconGrid <i-grid>
hard-drive IconHardDrive <i-hard-drive>
hash IconHash <i-hash>
headphones IconHeadphones <i-headphones>
heart IconHeart <i-heart>
help-circle IconHelpCircle <i-help-circle>
home IconHome <i-home>
image IconImage <i-image>
inbox IconInbox <i-inbox>
info IconInfo <i-info>
instagram IconInstagram <i-instagram>
italic IconItalic <i-italic>
layers IconLayers <i-layers>
layout IconLayout <i-layout>
life-buoy IconLifeBuoy <i-life-buoy>
link-2 IconLink2 <i-link-2>
link IconLink <i-link>
linkedin IconLinkedin <i-linkedin>
list IconList <i-list>
loader IconLoader <i-loader>
lock IconLock <i-lock>
log-in IconLogIn <i-log-in>
log-out IconLogOut <i-log-out>
mail IconMail <i-mail>
map-pin IconMapPin <i-map-pin>
map IconMap <i-map>
maximize-2 IconMaximize2 <i-maximize-2>
maximize IconMaximize <i-maximize>
menu IconMenu <i-menu>
message-circle IconMessageCircle <i-message-circle>
message-square IconMessageSquare <i-message-square>
mic-off IconMicOff <i-mic-off>
mic IconMic <i-mic>
minimize-2 IconMinimize2 <i-minimize-2>
minimize IconMinimize <i-minimize>
minus-circle IconMinusCircle <i-minus-circle>
minus-square IconMinusSquare <i-minus-square>
minus IconMinus <i-minus>
monitor IconMonitor <i-monitor>
moon IconMoon <i-moon>
more-horizontal IconMoreHorizontal <i-more-horizontal>
more-vertical IconMoreVertical <i-more-vertical>
move IconMove <i-move>
music IconMusic <i-music>
navigation-2 IconNavigation2 <i-navigation-2>
navigation IconNavigation <i-navigation>
octagon IconOctagon <i-octagon>
package IconPackage <i-package>
paperclip IconPaperclip <i-paperclip>
pause-circle IconPauseCircle <i-pause-circle>
pause IconPause <i-pause>
percent IconPercent <i-percent>
phone-call IconPhoneCall <i-phone-call>
phone-forwarded IconPhoneForwarded <i-phone-forwarded>
phone-incoming IconPhoneIncoming <i-phone-incoming>
phone-missed IconPhoneMissed <i-phone-missed>
phone-off IconPhoneOff <i-phone-off>
phone-outgoing IconPhoneOutgoing <i-phone-outgoing>
phone IconPhone <i-phone>
pie-chart IconPieChart <i-pie-chart>
play-circle IconPlayCircle <i-play-circle>
play IconPlay <i-play>
plus-circle IconPlusCircle <i-plus-circle>
plus-square IconPlusSquare <i-plus-square>
plus IconPlus <i-plus>
pocket IconPocket <i-pocket>
power IconPower <i-power>
printer IconPrinter <i-printer>
radio IconRadio <i-radio>
refresh-ccw IconRefreshCcw <i-refresh-ccw>
refresh-cw IconRefreshCw <i-refresh-cw>
repeat IconRepeat <i-repeat>
rewind IconRewind <i-rewind>
rotate-ccw IconRotateCcw <i-rotate-ccw>
rotate-cw IconRotateCw <i-rotate-cw>
rss IconRss <i-rss>
save IconSave <i-save>
scissors IconScissors <i-scissors>
search IconSearch <i-search>
send IconSend <i-send>
server IconServer <i-server>
settings IconSettings <i-settings>
share-2 IconShare2 <i-share-2>
share IconShare <i-share>
shield-off IconShieldOff <i-shield-off>
shield IconShield <i-shield>
shopping-bag IconShoppingBag <i-shopping-bag>
shopping-cart IconShoppingCart <i-shopping-cart>
shuffle IconShuffle <i-shuffle>
sidebar IconSidebar <i-sidebar>
skip-back IconSkipBack <i-skip-back>
skip-forward IconSkipForward <i-skip-forward>
slack IconSlack <i-slack>
slash IconSlash <i-slash>
sliders IconSliders <i-sliders>
smartphone IconSmartphone <i-smartphone>
speaker IconSpeaker <i-speaker>
square IconSquare <i-square>
star IconStar <i-star>
stop-circle IconStopCircle <i-stop-circle>
sun IconSun <i-sun>
sunrise IconSunrise <i-sunrise>
sunset IconSunset <i-sunset>
tablet IconTablet <i-tablet>
tag IconTag <i-tag>
target IconTarget <i-target>
terminal IconTerminal <i-terminal>
thermometer IconThermometer <i-thermometer>
thumbs-down IconThumbsDown <i-thumbs-down>
thumbs-up IconThumbsUp <i-thumbs-up>
toggle-left IconToggleLeft <i-toggle-left>
toggle-right IconToggleRight <i-toggle-right>
trash-2 IconTrash2 <i-trash-2>
trash IconTrash <i-trash>
trending-down IconTrendingDown <i-trending-down>
trending-up IconTrendingUp <i-trending-up>
triangle IconTriangle <i-triangle>
truck IconTruck <i-truck>
tv IconTv <i-tv>
twitter IconTwitter <i-twitter>
type IconType <i-type>
umbrella IconUmbrella <i-umbrella>
underline IconUnderline <i-underline>
unlock IconUnlock <i-unlock>
upload-cloud IconUploadCloud <i-upload-cloud>
upload IconUpload <i-upload>
user-check IconUserCheck <i-user-check>
user-minus IconUserMinus <i-user-minus>
user-plus IconUserPlus <i-user-plus>
user-x IconUserX <i-user-x>
user IconUser <i-user>
users IconUsers <i-users>
video-off IconVideoOff <i-video-off>
video IconVideo <i-video>
voicemail IconVoicemail <i-voicemail>
volume-1 IconVolume1 <i-volume-1>
volume-2 IconVolume2 <i-volume-2>
volume-x IconVolumeX <i-volume-x>
volume IconVolume <i-volume>
watch IconWatch <i-watch>
wifi-off IconWifiOff <i-wifi-off>
wifi IconWifi <i-wifi>
wind IconWind <i-wind>
x-circle IconXCircle <i-x-circle>
x-square IconXSquare <i-x-square>
x IconX <i-x>
zap-off IconZapOff <i-zap-off>
zap IconZap <i-zap>
zoom-in IconZoomIn <i-zoom-in>
zoom-out IconZoomOut <i-zoom-out>

FAQ

1. Can I import all icons at once?

See issue 1

License

MIT © Michael Bazos