Skip to content

Latest commit

 

History

History
422 lines (381 loc) · 41.6 KB

README.md

File metadata and controls

422 lines (381 loc) · 41.6 KB

angular-feather

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 import HTML template
activity Activity <i-feather name="activity"></i-feather>
airplay Airplay <i-feather name="airplay"></i-feather>
alert-circle AlertCircle <i-feather name="alert-circle"></i-feather>
alert-octagon AlertOctagon <i-feather name="alert-octagon"></i-feather>
alert-triangle AlertTriangle <i-feather name="alert-triangle"></i-feather>
align-center AlignCenter <i-feather name="align-center"></i-feather>
align-justify AlignJustify <i-feather name="align-justify"></i-feather>
align-left AlignLeft <i-feather name="align-left"></i-feather>
align-right AlignRight <i-feather name="align-right"></i-feather>
anchor Anchor <i-feather name="anchor"></i-feather>
aperture Aperture <i-feather name="aperture"></i-feather>
archive Archive <i-feather name="archive"></i-feather>
arrow-down-circle ArrowDownCircle <i-feather name="arrow-down-circle"></i-feather>
arrow-down-left ArrowDownLeft <i-feather name="arrow-down-left"></i-feather>
arrow-down-right ArrowDownRight <i-feather name="arrow-down-right"></i-feather>
arrow-down ArrowDown <i-feather name="arrow-down"></i-feather>
arrow-left-circle ArrowLeftCircle <i-feather name="arrow-left-circle"></i-feather>
arrow-left ArrowLeft <i-feather name="arrow-left"></i-feather>
arrow-right-circle ArrowRightCircle <i-feather name="arrow-right-circle"></i-feather>
arrow-right ArrowRight <i-feather name="arrow-right"></i-feather>
arrow-up-circle ArrowUpCircle <i-feather name="arrow-up-circle"></i-feather>
arrow-up-left ArrowUpLeft <i-feather name="arrow-up-left"></i-feather>
arrow-up-right ArrowUpRight <i-feather name="arrow-up-right"></i-feather>
arrow-up ArrowUp <i-feather name="arrow-up"></i-feather>
at-sign AtSign <i-feather name="at-sign"></i-feather>
award Award <i-feather name="award"></i-feather>
bar-chart-2 BarChart2 <i-feather name="bar-chart-2"></i-feather>
bar-chart BarChart <i-feather name="bar-chart"></i-feather>
battery-charging BatteryCharging <i-feather name="battery-charging"></i-feather>
battery Battery <i-feather name="battery"></i-feather>
bell-off BellOff <i-feather name="bell-off"></i-feather>
bell Bell <i-feather name="bell"></i-feather>
bluetooth Bluetooth <i-feather name="bluetooth"></i-feather>
bold Bold <i-feather name="bold"></i-feather>
book-open BookOpen <i-feather name="book-open"></i-feather>
book Book <i-feather name="book"></i-feather>
bookmark Bookmark <i-feather name="bookmark"></i-feather>
box Box <i-feather name="box"></i-feather>
briefcase Briefcase <i-feather name="briefcase"></i-feather>
calendar Calendar <i-feather name="calendar"></i-feather>
camera-off CameraOff <i-feather name="camera-off"></i-feather>
camera Camera <i-feather name="camera"></i-feather>
cast Cast <i-feather name="cast"></i-feather>
check-circle CheckCircle <i-feather name="check-circle"></i-feather>
check-square CheckSquare <i-feather name="check-square"></i-feather>
check Check <i-feather name="check"></i-feather>
chevron-down ChevronDown <i-feather name="chevron-down"></i-feather>
chevron-left ChevronLeft <i-feather name="chevron-left"></i-feather>
chevron-right ChevronRight <i-feather name="chevron-right"></i-feather>
chevron-up ChevronUp <i-feather name="chevron-up"></i-feather>
chevrons-down ChevronsDown <i-feather name="chevrons-down"></i-feather>
chevrons-left ChevronsLeft <i-feather name="chevrons-left"></i-feather>
chevrons-right ChevronsRight <i-feather name="chevrons-right"></i-feather>
chevrons-up ChevronsUp <i-feather name="chevrons-up"></i-feather>
chrome Chrome <i-feather name="chrome"></i-feather>
circle Circle <i-feather name="circle"></i-feather>
clipboard Clipboard <i-feather name="clipboard"></i-feather>
clock Clock <i-feather name="clock"></i-feather>
cloud-drizzle CloudDrizzle <i-feather name="cloud-drizzle"></i-feather>
cloud-lightning CloudLightning <i-feather name="cloud-lightning"></i-feather>
cloud-off CloudOff <i-feather name="cloud-off"></i-feather>
cloud-rain CloudRain <i-feather name="cloud-rain"></i-feather>
cloud-snow CloudSnow <i-feather name="cloud-snow"></i-feather>
cloud Cloud <i-feather name="cloud"></i-feather>
code Code <i-feather name="code"></i-feather>
codepen Codepen <i-feather name="codepen"></i-feather>
codesandbox Codesandbox <i-feather name="codesandbox"></i-feather>
coffee Coffee <i-feather name="coffee"></i-feather>
columns Columns <i-feather name="columns"></i-feather>
command Command <i-feather name="command"></i-feather>
compass Compass <i-feather name="compass"></i-feather>
copy Copy <i-feather name="copy"></i-feather>
corner-down-left CornerDownLeft <i-feather name="corner-down-left"></i-feather>
corner-down-right CornerDownRight <i-feather name="corner-down-right"></i-feather>
corner-left-down CornerLeftDown <i-feather name="corner-left-down"></i-feather>
corner-left-up CornerLeftUp <i-feather name="corner-left-up"></i-feather>
corner-right-down CornerRightDown <i-feather name="corner-right-down"></i-feather>
corner-right-up CornerRightUp <i-feather name="corner-right-up"></i-feather>
corner-up-left CornerUpLeft <i-feather name="corner-up-left"></i-feather>
corner-up-right CornerUpRight <i-feather name="corner-up-right"></i-feather>
cpu Cpu <i-feather name="cpu"></i-feather>
credit-card CreditCard <i-feather name="credit-card"></i-feather>
crop Crop <i-feather name="crop"></i-feather>
crosshair Crosshair <i-feather name="crosshair"></i-feather>
database Database <i-feather name="database"></i-feather>
delete Delete <i-feather name="delete"></i-feather>
disc Disc <i-feather name="disc"></i-feather>
divide-circle DivideCircle <i-feather name="divide-circle"></i-feather>
divide-square DivideSquare <i-feather name="divide-square"></i-feather>
divide Divide <i-feather name="divide"></i-feather>
dollar-sign DollarSign <i-feather name="dollar-sign"></i-feather>
download-cloud DownloadCloud <i-feather name="download-cloud"></i-feather>
download Download <i-feather name="download"></i-feather>
dribbble Dribbble <i-feather name="dribbble"></i-feather>
droplet Droplet <i-feather name="droplet"></i-feather>
edit-2 Edit2 <i-feather name="edit-2"></i-feather>
edit-3 Edit3 <i-feather name="edit-3"></i-feather>
edit Edit <i-feather name="edit"></i-feather>
external-link ExternalLink <i-feather name="external-link"></i-feather>
eye-off EyeOff <i-feather name="eye-off"></i-feather>
eye Eye <i-feather name="eye"></i-feather>
facebook Facebook <i-feather name="facebook"></i-feather>
fast-forward FastForward <i-feather name="fast-forward"></i-feather>
feather Feather <i-feather name="feather"></i-feather>
figma Figma <i-feather name="figma"></i-feather>
file-minus FileMinus <i-feather name="file-minus"></i-feather>
file-plus FilePlus <i-feather name="file-plus"></i-feather>
file-text FileText <i-feather name="file-text"></i-feather>
file File <i-feather name="file"></i-feather>
film Film <i-feather name="film"></i-feather>
filter Filter <i-feather name="filter"></i-feather>
flag Flag <i-feather name="flag"></i-feather>
folder-minus FolderMinus <i-feather name="folder-minus"></i-feather>
folder-plus FolderPlus <i-feather name="folder-plus"></i-feather>
folder Folder <i-feather name="folder"></i-feather>
framer Framer <i-feather name="framer"></i-feather>
frown Frown <i-feather name="frown"></i-feather>
gift Gift <i-feather name="gift"></i-feather>
git-branch GitBranch <i-feather name="git-branch"></i-feather>
git-commit GitCommit <i-feather name="git-commit"></i-feather>
git-merge GitMerge <i-feather name="git-merge"></i-feather>
git-pull-request GitPullRequest <i-feather name="git-pull-request"></i-feather>
github Github <i-feather name="github"></i-feather>
gitlab Gitlab <i-feather name="gitlab"></i-feather>
globe Globe <i-feather name="globe"></i-feather>
grid Grid <i-feather name="grid"></i-feather>
hard-drive HardDrive <i-feather name="hard-drive"></i-feather>
hash Hash <i-feather name="hash"></i-feather>
headphones Headphones <i-feather name="headphones"></i-feather>
heart Heart <i-feather name="heart"></i-feather>
help-circle HelpCircle <i-feather name="help-circle"></i-feather>
hexagon Hexagon <i-feather name="hexagon"></i-feather>
home Home <i-feather name="home"></i-feather>
image Image <i-feather name="image"></i-feather>
inbox Inbox <i-feather name="inbox"></i-feather>
info Info <i-feather name="info"></i-feather>
instagram Instagram <i-feather name="instagram"></i-feather>
italic Italic <i-feather name="italic"></i-feather>
key Key <i-feather name="key"></i-feather>
layers Layers <i-feather name="layers"></i-feather>
layout Layout <i-feather name="layout"></i-feather>
life-buoy LifeBuoy <i-feather name="life-buoy"></i-feather>
link-2 Link2 <i-feather name="link-2"></i-feather>
link Link <i-feather name="link"></i-feather>
linkedin Linkedin <i-feather name="linkedin"></i-feather>
list List <i-feather name="list"></i-feather>
loader Loader <i-feather name="loader"></i-feather>
lock Lock <i-feather name="lock"></i-feather>
log-in LogIn <i-feather name="log-in"></i-feather>
log-out LogOut <i-feather name="log-out"></i-feather>
mail Mail <i-feather name="mail"></i-feather>
map-pin MapPin <i-feather name="map-pin"></i-feather>
map Map <i-feather name="map"></i-feather>
maximize-2 Maximize2 <i-feather name="maximize-2"></i-feather>
maximize Maximize <i-feather name="maximize"></i-feather>
meh Meh <i-feather name="meh"></i-feather>
menu Menu <i-feather name="menu"></i-feather>
message-circle MessageCircle <i-feather name="message-circle"></i-feather>
message-square MessageSquare <i-feather name="message-square"></i-feather>
mic-off MicOff <i-feather name="mic-off"></i-feather>
mic Mic <i-feather name="mic"></i-feather>
minimize-2 Minimize2 <i-feather name="minimize-2"></i-feather>
minimize Minimize <i-feather name="minimize"></i-feather>
minus-circle MinusCircle <i-feather name="minus-circle"></i-feather>
minus-square MinusSquare <i-feather name="minus-square"></i-feather>
minus Minus <i-feather name="minus"></i-feather>
monitor Monitor <i-feather name="monitor"></i-feather>
moon Moon <i-feather name="moon"></i-feather>
more-horizontal MoreHorizontal <i-feather name="more-horizontal"></i-feather>
more-vertical MoreVertical <i-feather name="more-vertical"></i-feather>
mouse-pointer MousePointer <i-feather name="mouse-pointer"></i-feather>
move Move <i-feather name="move"></i-feather>
music Music <i-feather name="music"></i-feather>
navigation-2 Navigation2 <i-feather name="navigation-2"></i-feather>
navigation Navigation <i-feather name="navigation"></i-feather>
octagon Octagon <i-feather name="octagon"></i-feather>
package Package <i-feather name="package"></i-feather>
paperclip Paperclip <i-feather name="paperclip"></i-feather>
pause-circle PauseCircle <i-feather name="pause-circle"></i-feather>
pause Pause <i-feather name="pause"></i-feather>
pen-tool PenTool <i-feather name="pen-tool"></i-feather>
percent Percent <i-feather name="percent"></i-feather>
phone-call PhoneCall <i-feather name="phone-call"></i-feather>
phone-forwarded PhoneForwarded <i-feather name="phone-forwarded"></i-feather>
phone-incoming PhoneIncoming <i-feather name="phone-incoming"></i-feather>
phone-missed PhoneMissed <i-feather name="phone-missed"></i-feather>
phone-off PhoneOff <i-feather name="phone-off"></i-feather>
phone-outgoing PhoneOutgoing <i-feather name="phone-outgoing"></i-feather>
phone Phone <i-feather name="phone"></i-feather>
pie-chart PieChart <i-feather name="pie-chart"></i-feather>
play-circle PlayCircle <i-feather name="play-circle"></i-feather>
play Play <i-feather name="play"></i-feather>
plus-circle PlusCircle <i-feather name="plus-circle"></i-feather>
plus-square PlusSquare <i-feather name="plus-square"></i-feather>
plus Plus <i-feather name="plus"></i-feather>
pocket Pocket <i-feather name="pocket"></i-feather>
power Power <i-feather name="power"></i-feather>
printer Printer <i-feather name="printer"></i-feather>
radio Radio <i-feather name="radio"></i-feather>
refresh-ccw RefreshCcw <i-feather name="refresh-ccw"></i-feather>
refresh-cw RefreshCw <i-feather name="refresh-cw"></i-feather>
repeat Repeat <i-feather name="repeat"></i-feather>
rewind Rewind <i-feather name="rewind"></i-feather>
rotate-ccw RotateCcw <i-feather name="rotate-ccw"></i-feather>
rotate-cw RotateCw <i-feather name="rotate-cw"></i-feather>
rss Rss <i-feather name="rss"></i-feather>
save Save <i-feather name="save"></i-feather>
scissors Scissors <i-feather name="scissors"></i-feather>
search Search <i-feather name="search"></i-feather>
send Send <i-feather name="send"></i-feather>
server Server <i-feather name="server"></i-feather>
settings Settings <i-feather name="settings"></i-feather>
share-2 Share2 <i-feather name="share-2"></i-feather>
share Share <i-feather name="share"></i-feather>
shield-off ShieldOff <i-feather name="shield-off"></i-feather>
shield Shield <i-feather name="shield"></i-feather>
shopping-bag ShoppingBag <i-feather name="shopping-bag"></i-feather>
shopping-cart ShoppingCart <i-feather name="shopping-cart"></i-feather>
shuffle Shuffle <i-feather name="shuffle"></i-feather>
sidebar Sidebar <i-feather name="sidebar"></i-feather>
skip-back SkipBack <i-feather name="skip-back"></i-feather>
skip-forward SkipForward <i-feather name="skip-forward"></i-feather>
slack Slack <i-feather name="slack"></i-feather>
slash Slash <i-feather name="slash"></i-feather>
sliders Sliders <i-feather name="sliders"></i-feather>
smartphone Smartphone <i-feather name="smartphone"></i-feather>
smile Smile <i-feather name="smile"></i-feather>
speaker Speaker <i-feather name="speaker"></i-feather>
square Square <i-feather name="square"></i-feather>
star Star <i-feather name="star"></i-feather>
stop-circle StopCircle <i-feather name="stop-circle"></i-feather>
sun Sun <i-feather name="sun"></i-feather>
sunrise Sunrise <i-feather name="sunrise"></i-feather>
sunset Sunset <i-feather name="sunset"></i-feather>
table Table <i-feather name="table"></i-feather>
tablet Tablet <i-feather name="tablet"></i-feather>
tag Tag <i-feather name="tag"></i-feather>
target Target <i-feather name="target"></i-feather>
terminal Terminal <i-feather name="terminal"></i-feather>
thermometer Thermometer <i-feather name="thermometer"></i-feather>
thumbs-down ThumbsDown <i-feather name="thumbs-down"></i-feather>
thumbs-up ThumbsUp <i-feather name="thumbs-up"></i-feather>
toggle-left ToggleLeft <i-feather name="toggle-left"></i-feather>
toggle-right ToggleRight <i-feather name="toggle-right"></i-feather>
tool Tool <i-feather name="tool"></i-feather>
trash-2 Trash2 <i-feather name="trash-2"></i-feather>
trash Trash <i-feather name="trash"></i-feather>
trello Trello <i-feather name="trello"></i-feather>
trending-down TrendingDown <i-feather name="trending-down"></i-feather>
trending-up TrendingUp <i-feather name="trending-up"></i-feather>
triangle Triangle <i-feather name="triangle"></i-feather>
truck Truck <i-feather name="truck"></i-feather>
tv Tv <i-feather name="tv"></i-feather>
twitch Twitch <i-feather name="twitch"></i-feather>
twitter Twitter <i-feather name="twitter"></i-feather>
type Type <i-feather name="type"></i-feather>
umbrella Umbrella <i-feather name="umbrella"></i-feather>
underline Underline <i-feather name="underline"></i-feather>
unlock Unlock <i-feather name="unlock"></i-feather>
upload-cloud UploadCloud <i-feather name="upload-cloud"></i-feather>
upload Upload <i-feather name="upload"></i-feather>
user-check UserCheck <i-feather name="user-check"></i-feather>
user-minus UserMinus <i-feather name="user-minus"></i-feather>
user-plus UserPlus <i-feather name="user-plus"></i-feather>
user-x UserX <i-feather name="user-x"></i-feather>
user User <i-feather name="user"></i-feather>
users Users <i-feather name="users"></i-feather>
video-off VideoOff <i-feather name="video-off"></i-feather>
video Video <i-feather name="video"></i-feather>
voicemail Voicemail <i-feather name="voicemail"></i-feather>
volume-1 Volume1 <i-feather name="volume-1"></i-feather>
volume-2 Volume2 <i-feather name="volume-2"></i-feather>
volume-x VolumeX <i-feather name="volume-x"></i-feather>
volume Volume <i-feather name="volume"></i-feather>
watch Watch <i-feather name="watch"></i-feather>
wifi-off WifiOff <i-feather name="wifi-off"></i-feather>
wifi Wifi <i-feather name="wifi"></i-feather>
wind Wind <i-feather name="wind"></i-feather>
x-circle XCircle <i-feather name="x-circle"></i-feather>
x-octagon XOctagon <i-feather name="x-octagon"></i-feather>
x-square XSquare <i-feather name="x-square"></i-feather>
x X <i-feather name="x"></i-feather>
youtube Youtube <i-feather name="youtube"></i-feather>
zap-off ZapOff <i-feather name="zap-off"></i-feather>
zap Zap <i-feather name="zap"></i-feather>
zoom-in ZoomIn <i-feather name="zoom-in"></i-feather>
zoom-out ZoomOut <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