JSPM – angular-feather@5.0.0

Package Exports

angular-feather

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (angular-feather) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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({
  declarations: icons,
  exports: icons
})
export class IconsModule { }

Note: declarations is necessary as per angular-feather 5.0.0

3. Use it in template

After importing the IconsModule where appropriate, use the icons.

<i-camera></i-camera>
<i-heart></i-heart>
<i-github></i-github>

Live Demo

Styling icons

As per angular-feather 5.0.0, the icon components are exposing CSS custom properties for styling purpose. The following properties are exposed:

CSS Custom Property	Default
--width	24px
--height	24px
--fill	none
--stroke	currentColor
--stroke-width	2px
--stroke-linecap	round
--stroke-linejoin	round

For example, to make icons bigger you can define a class defining the --height and --width properties.

.big {
  --height: 50px;
  --width: 50px;
}

<icon-heart class="big"></icon-heart>

Available icons

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

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

FAQ

1. Can I import all icons at once?

See issue 1

angular-feather

Package Exports

Readme

angular-feather

Description

Usage

Live Demo

Styling icons

Available icons

FAQ

License