https://github.com/klarsys/angular-material-icons

AngularJS directive to use Material Design icons with custom fill-color and size.
https://github.com/klarsys/angular-material-icons

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/klarsys/angular-material-icons
• Owner: klarsys
• License: mit
• Created: 2014-12-28T06:49:23.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2017-10-21T04:56:04.000Z (over 7 years ago)
• Last Synced: 2024-05-17T11:02:12.440Z (8 months ago)
• Language: HTML
• Homepage:
• Size: 629 KB
• Stars: 558
• Watchers: 28
• Forks: 158
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-material-design - angular-material-icons - Material icons offer (Icons / Dev)

README

        
[![NPM](https://nodei.co/npm/angular-material-icons.png?downloadRank=true)](https://nodei.co/npm/angular-material-icons/)

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': '',

        'signal_wifi_1_bar': '',

    });

});

```

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', '')

        .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.