angular-icons

A collection of icon libraries to use in your angular apps


Install

``
npm install angular-icons
`

You will also need to install the icon assets:
`
npm install ionicons
npm install material-design-icons
npm install open-iconic
`

Usage

The following icon libraries are supported by Angular Icons:
- Iconic
- Open Iconic
- Ionicons
- Material Icons

You can include an icon from one of the above libraries by using the provided directives:
- ba-iconic
- ba-open-iconic
- ba-ionicon
- ba-material-icon

Each of the directives has an icon attribute which can be used to easily load an icon:
-
- Full list of supported icons can be found here
- Check the Iconic website for examples
-
- Full list of supported icons can be found here
- Check the Open Iconic website for examples
-
- Full list of supported icons can be found here
- Check the Ionicons website for examples
-
- Full list of supported icons can be found here
- Check the Material Icons website for examples

Styling of the icons is provided as part of Angular Base Apps.

angularIcons.iconic (Module)

$3

You can use the IconicProvider to configure the default path to the iconic assets. The following methods exist:
- setAssetPath(path) - sets the full path to the icons
- useful if hosting the icons locally or if using a non-supported CDN
- setCdn(cdn) - sets the CDN to use for the icons
- the icons are hosted on the following CDNs: npmcdn (default), jsdelivr

$3

A directive used to load an icon from Iconic. The directive has the following supported attributes:
- icon-dir: changes the directory for the icons (default specified by Iconic service)
- src: full path to the icon (including svg extension)
- size: use the values small, medium, or large to size the icon (by default all iconic icons are responsive and will fill to fit their entire container)
- dyn-icon: use this attribute to define the name of the icon using an expression
- dyn-icon-attrs: use this attribute to define the icon attributes using an object

Each icon from iconic may also provide a set of attributes to further customize the icon. For instance the data-direction attribute can be used for the chevron icon to specify the direction of the chevron.

angularIcons.openIconic (Module)

$3

You can use the OpenIconicProvider to configure the default path to the open iconic assets. The following methods exist:
- setAssetPath(path) - sets the full path to the icons
- useful if hosting the icons locally or if using a non-supported CDN
- setCdn(cdn) - sets the CDN to use for the icons
- the icons are hosted on the following CDNs: npmcdn (default), jsdelivr

$3

A directive used to load an icon from Open Iconic.

angularIcons.ionicons (Module)

$3

You can use the IoniconsProvider to configure the default path to the ionicons assets. The following methods exist:
- setAssetPath(path) - sets the full path to the icons
- useful if hosting the icons locally or if using a non-supported CDN
- setCdn(cdn) - sets the CDN to use for the icons
- the icons are hosted on the following CDNs: npmcdn (default), jsdelivr

$3

A directive used to load an icon from Ionicon.

angularIcons.materialIcons (Module)

$3

You can use the MaterialIconsProvider to configure the default path to the material icons assets. The following methods exist:
- setAssetPath(path) - sets the full path to the icons
- useful if hosting the icons locally or if using a non-supported CDN
- setCdn(cdn)` - sets the CDN to use for the icons
- the icons are hosted on the following CDNs: npmcdn (default), jsdelivr

$3

A directive used to load an icon from Material Icons.