A collection of icon libraries to use in your angular apps
npm install angular-icons
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 IconsYou can include an icon from one of the above libraries by using the provided directives:
-
ba-iconic
- ba-open-iconic
- ba-ionicon
- ba-material-iconEach 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 examplesStyling 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 objectEach 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 iconsA directive used to load an icon from Material Icons.