# angular-material-icons

> AngularJS directive to use Material Design icons with custom fill color and size.

Latest version **0.7.1** (published 2016-07-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install angular-material-icons
pnpm add angular-material-icons
yarn add angular-material-icons
bun add angular-material-icons
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.7.1 |
| Published | 2016-07-08 |
| First published | 2015-01-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 (+10 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 553 |
| Author | Urmil Parikh |
| Maintainers | urmilparikh |
| Keywords | angular, material, design, icon, fill, size, color, white, morph, svg, custom |

## Links

- npm: https://www.npmjs.com/package/angular-material-icons
- Repository: https://github.com/klarsys/angular-material-icons
- Issues: https://github.com/klarsys/angular-material-icons/issues
- npm.io page: https://npm.io/package/angular-material-icons

## Dependencies (1)

- [angular](https://npm.io/package/angular.md) >=1.3.0

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 0.7.1 (latest) — 2016-07-08
- 0.7.0 — 2016-03-22
- 0.6.0 — 2015-09-15
- 0.5.0 — 2015-06-18
- 0.4.0 — 2015-02-05
- 0.3.0 — 2015-01-30
- 0.2.0 — 2015-01-12
- 0.1.1 — 2015-01-04
- 0.1.0 — 2015-01-04

## README

angular-material-icons
======================

AngularJS directive to use Material Design icons with custom fill-color and size.

This project encompasses all SVG icons from [Google's official Material Design Icon repository](https://github.com/google/material-design-icons) and few hand-picked icons from community-led [MaterialDesignIcons.com](http://materialdesignicons.com/) in form of angular directive that gives option to specify custom fill-color and size.

Changes to icon will go through delightful morphing if [SVG-Morpheus](https://github.com/alexk111/SVG-Morpheus) is also included in your application.

## Installation
This library is available via bower and npm
* `bower install angular-material-icons`
* `npm install angular-material-icons`

## Configure own icons
add many icons
```javascript
angular.module('moduleName').config(function (ngMdIconServiceProvider) {
    ngMdIconServiceProvider.addShapes({
        'signal_wifi_0_bar': '<path fill-opacity=".3" d="M12.01 21.49L23.64 7c-.45-.34-4.93-4-11.64-4C5.28 3 .81 6.66.36 7l11.63 14.49.01.01.01-.01z"/>',
        'signal_wifi_1_bar': '<path fill-opacity=".3" d="M12.01 21.49L23.64 7c-.45-.34-4.93-4-11.64-4C5.28 3 .81 6.66.36 7l11.63 14.49.01.01.01-.01z"/><path d="M6.67 14.86L12 21.49v.01l.01-.01 5.33-6.63C17.06 14.65 15.03 13 12 13s-5.06 1.65-5.33 1.86z"/>',
    });
});
```

optionally You can add viewBox for icon if not want to do it in templates
 * attribute view-box from template has higher priority so if given will override configured by service
 * if not given viewBox in config and template will use default "0 0 24 24"
```javascript
angular.module('moduleName').config(function (ngMdIconServiceProvider) {
    ngMdIconServiceProvider
        .addShape('evCross', '<polygon points="612,36.004 576.521,0.603 306,270.608 35.478,0.603 0,36.004 270.522,306.011 0,575.997 35.478,611.397 306,341.411 576.521,611.397 612,575.997 341.459,306.011"/>')
        .addViewBox('evCross', '0 0 612 612');
});
```

## Demo

Checkout the [live demo](https://klarsys.github.io/angular-material-icons/) for usage instructions and a preview of all icons included in the set.

## Licenses

This package is released under [MIT license](https://raw.githubusercontent.com/klarsys/angular-material-icons/master/LICENSE).

Icons are released under [Attribution 4.0 International](http://creativecommons.org/licenses/by/4.0/) license.

---
_Source: https://npm.io/package/angular-material-icons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._