Polpo-icons
This library extends MatIcons to accept icons from any material icons theme (default, outlined, two-tone, round, sharp). All of those icons listed in material design page is not working in the font-icons. Look into better alternatives for the support of more icons.
There is typescript types defined for all of the material icons(not 100% accurate).
Example:
donut_small--outlinedAngular content change lifecycle hook is also implemented, so it accepts angular interpolation in html
Example:
{{icon}}This library was generated with Angular CLI version 7.2.15.
How to implement
Reference css styles from Google's Material Icons.
This line should be placed into the index.html inside the <head></head> tags:
Then import the PoIconsModule from 'po-icons' to the module you want to use it in(app.module.ts).
Now use <po-icon></po-icon> from any of your module's component.html.
Remember syntax '--theme' after icon name to apply theme.
Customization
There are 3 optional attributes to modify po-icon content:
- color: string; (color style like: '#000')
- bgColor: string; (color style like: '#000')
- size: number; (number in pixels. modifies font-size or svg width/height.)
use like following:
account-login--open-iconicMore details
Do not use for production. This is experimental library.
Better alternatives
- Make own svg sprite.
- Pros: most flexible (modifications, animations, extendability...).
- Cons: svg may affect performance and svg sprites are supported only by newest browsers
- Use material design's non-spec-app (.png)
- Pros: get all newest icons in use from the material-design page.
- Cons: png is not flexible.
Demo
Git repository for the source-code and demo: https://github.com/polpo93/po-icons