Angular Material Icons (original) (raw)

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

• For production, use minified version directly from CDN:
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.7.1/angular-material-icons.min.js"></script>
  For other purposes, project files are available via bower / npm or can be cloned directly from github.
  {{command}}
• Inject ngMdIcons to your angularjs application:
  angular.module('demoapp', ['ngMdIcons']);
• Use ng-md-icon directive in your html, specifying fill-color through css:
  <ng-md-icon icon="..." style="fill: ..." size="..."></ng-md-icon>
  icon="send"
  style="fill: pink"
  icon="{{icon}}"
  style="fill: {{fill}}"
  icon="send"
  style="fill: #abcdef"

-- no size --
(default is 24)

• This directive is tested on Chrome, Firefox, Safari and Edge.
  For IE, use ng-attr-style instead of style. Also refer AngularJS documentation on IE Compatibility.
• Optional: Include SVG-Morpheus in your project and changes to icon attribute that you do through your controller will go through delightful morphing as seen above.
  Refer code for this page (index.html and demo.js) for details.
  <script src="//cdnjs.cloudflare.com/ajax/libs/SVG-Morpheus/0.3.2/svg-morpheus.js"></script>
  When SVG-Morpheus is included, you can use options attribute to control morphing options.
  options=
  '{"duration": 375}'
  (default is 750)
  options=
  '{"rotation": "none"}'
  (default is clock)
  options=
  '{"rotation": "counterclock"}'
  Example:
  Morph on ng-click
  Note that options attribute is a JSON parse-able string so surround keys with double-quotes.
• Advanced: Refer demo.js to register custom icons for your project or to access default icon shapes from a controller or another service.

Full list of icons:

From MaterialDesignIcons.com

Custom

signal_cellular_connected
_no_internet_0_bar

signal_cellular_connected
_no_internet_1_bar

signal_cellular_connected
_no_internet_2_bar

signal_cellular_connected
_no_internet_3_bar

From Material Design icons by Google

Action

Alert

Av

Communication

Content

Device

signal_cellular_connected_no_internet_4_bar

Editor

format_textdirection_l_to_r

format_textdirection_r_to_l

File

Hardware

Image

Maps

transfer_within_a_station

Navigation

airline_seat_individual_suite

airline_seat_legroom_extra

airline_seat_legroom_normal

airline_seat_legroom_reduced

airline_seat_recline_extra

airline_seat_recline_normal

Places

Social

sentiment_very_dissatisfied

Toggle