├── .gitignore ├── .jshintrc ├── LICENSE ├── README.md ├── angular-material-icons.css ├── angular-material-icons.js ├── angular-material-icons.min.js ├── bower.json ├── demo.js ├── gulpfile.js ├── index.html ├── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules 3 | bower_components 4 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | // Closely follows https://github.com/jshint/jshint/blob/master/examples/.jshintrc 3 | 4 | // ----- Enforcing options ----- 5 | 6 | // true: Prohibit bitwise operators (&, |, ^, etc.) 7 | "bitwise": true, 8 | 9 | // true: Identifiers must be in camelCase 10 | // Allow for snake_case identifiers 11 | "camelcase": false, 12 | 13 | // true: Require {} for every new block or scope 14 | "curly": true, 15 | 16 | // true: Require triple equals (===) for comparison 17 | "eqeqeq": true, 18 | 19 | // true: Require adherance to ECMAScript 3 specification 20 | // Set to true if you need your program to be executable in older browsers such as IE 6-9 21 | "es3": true, 22 | 23 | // true: Require filtering for..in loops with obj.hasOwnProperty() 24 | "forin": true, 25 | 26 | // true: prohibits overwriting prototypes of native objects such as Array, Date etc. 27 | "freeze": true, 28 | 29 | // true: Require immediate invocations to be wrapped in parens e.g. `(function () { } ());` 30 | "immed": true, 31 | 32 | // {int} Number of spaces to use for indentation 33 | "indent": 4, 34 | 35 | // true: Require variables/functions to be defined before being used 36 | // nofunc: Allow use of a function before it is defined (see https://github.com/johnpapa/angularjs-styleguide#style-y034) 37 | "latedef": "nofunc", 38 | 39 | // {int} Max cyclomatic complexity per function 40 | "maxcomplexity": 10, 41 | 42 | // {int} Max depth of nested blocks (within functions) 43 | "maxdepth": 5, 44 | 45 | // {int} Maximum error before stopping (default is 50) 46 | "maxerr": 50, 47 | 48 | // {int} Max number of characters per line 49 | "maxlen": 120, 50 | 51 | // {int} Max number of formal params allowed per function 52 | "maxparams": 10, 53 | 54 | // {int} Max number statements per function 55 | "maxstatements": 50, 56 | 57 | // true: Require capitalization of all constructor functions e.g. `new F()` 58 | "newcap": true, 59 | 60 | // true: Prohibit use of `arguments.caller` and `arguments.callee` 61 | "noarg": true, 62 | 63 | // true: prohibits the use of the comma operator 64 | // This is triggering false positives (see https://github.com/jshint/jshint/issues/2044) 65 | "nocomma": false, 66 | 67 | // true: Prohibit use of empty blocks 68 | "noempty": true, 69 | 70 | // true: Prohibit "non-breaking whitespace" characters 71 | "nonbsp": true, 72 | 73 | // true: Prohibit use of constructors for side-effects (without assignment) 74 | "nonew": true, 75 | 76 | // true: Prohibit use of `++` & `--` 77 | "plusplus": false, 78 | 79 | // Quotation mark consistency: 80 | // false : do nothing (default) 81 | // true : ensure whatever is used is consistent 82 | // "single" : require single quotes 83 | // "double" : require double quotes 84 | "quotmark": "single", 85 | 86 | // true: prohibits the use of the grouping operator for single-expression statements 87 | "singleGroups": false, 88 | 89 | // true: Requires all functions run in ES5 Strict Mode 90 | "strict": true, 91 | 92 | // true: Require all non-global variables to be declared (prevents global leaks) 93 | "undef": true, 94 | 95 | // true: Require all defined variables be used 96 | "unused": true, 97 | 98 | // ----- Relaxing options ----- 99 | 100 | // true: Tolerate Automatic Semicolon Insertion (no semicolons) 101 | "asi": false, 102 | 103 | // true: Tolerate assignments where comparisons would be expected 104 | "boss": false, 105 | 106 | // true: Allow debugger statements e.g. browser breakpoints 107 | "debug": false, 108 | 109 | // true: Tolerate use of `== null` 110 | "eqnull": false, 111 | 112 | // true: Allow ES5 syntax (ex: getters and setters) 113 | // Setting explicitly to true throws a warning: "ES5 option is now set per default" 114 | // "es5": true, 115 | 116 | // true: Allow ES.next (ES6) syntax (ex: `const`) 117 | "esnext": false, 118 | 119 | // true: Tolerate use of `eval` and `new Function()` 120 | "evil": false, 121 | 122 | // true: Tolerate `ExpressionStatement` as Programs 123 | "expr": false, 124 | 125 | // true: Tolerate defining variables inside control statements 126 | "funcscope": false, 127 | 128 | // true: Allow global "use strict" (also enables 'strict') 129 | "globalstrict": false, 130 | 131 | // true: Tolerate using the `__iterator__` property 132 | "iterator": false, 133 | 134 | // true: Tolerate omitting a semicolon for the last statement of a 1-line block 135 | "lastsemic": false, 136 | 137 | // true: Tolerate possibly unsafe line breakings 138 | "laxbreak": false, 139 | 140 | // true: Tolerate comma-first style coding 141 | "laxcomma": false, 142 | 143 | // true: Tolerate functions being defined in loops 144 | "loopfunc": false, 145 | 146 | // true: Allow Mozilla specific syntax (extends and overrides esnext features) 147 | // (ex: `for each`, multiple try/catch, function expression…) 148 | "moz": false, 149 | 150 | // true: Tolerate multi-line strings 151 | "multistr": false, 152 | 153 | // true: Tolerate invalid typeof operator values 154 | "notypeof": false, 155 | 156 | // true: Tolerate generator functions with no yield statement in them 157 | "noyield": false, 158 | 159 | // true: Tolerate using the `__proto__` property 160 | "proto": false, 161 | 162 | // true: Tolerate script-targeted URLs 163 | "scripturl": false, 164 | 165 | // true: Allows re-define variables later in code e.g. `var x=1; x=2;` 166 | "shadow": false, 167 | 168 | // true: Tolerate using `[]` notation when it can still be expressed in dot notation 169 | "sub": false, 170 | 171 | // true: Tolerate `new function () { ... };` and `new Object;` 172 | "supernew": false, 173 | 174 | // true: Tolerate using this in a non-constructor function 175 | "validthis": false, 176 | 177 | // true: Suppresses warnings about the use of the with statement 178 | "withstmt": false, 179 | 180 | // ----- Environments ----- 181 | 182 | // Web Browser (window, document, etc) 183 | "browser": true, 184 | 185 | // Browserify (node.js code in the browser) 186 | "browserify": false, 187 | 188 | // CouchDB 189 | "couch": false, 190 | 191 | // Development/debugging (alert, confirm, etc) 192 | "devel": false, 193 | 194 | // Dojo Toolkit 195 | "dojo": false, 196 | 197 | // Jasmine 198 | "jasmine": false, 199 | 200 | // jQuery 201 | "jquery": false, 202 | 203 | // Mocha 204 | "mocha": false, 205 | 206 | // MooTools 207 | "mootools": false, 208 | 209 | // Node.js 210 | "node": false, 211 | 212 | // Widely adopted globals (escape, unescape, etc) 213 | "nonstandard": false, 214 | 215 | // PhantomJS 216 | "phantom": false, 217 | 218 | // Prototype and Scriptaculous 219 | "prototypejs": false, 220 | 221 | // QUnit 222 | "qunit": false, 223 | 224 | // Rhino 225 | "rhino": false, 226 | 227 | // ShellJS 228 | "shelljs": false, 229 | 230 | // defines globals for typed array constructors 231 | "typed": false, 232 | 233 | // Web Workers 234 | "worker": false, 235 | 236 | // Windows Scripting Host 237 | "wsh": false, 238 | 239 | // Yahoo User Interface 240 | "yui": false, 241 | 242 | // ----- Globals ----- 243 | // false: variable as read-only 244 | "globals": { 245 | "angular": false, 246 | "SVGMorpheus": false, 247 | "JSON": false 248 | } 249 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 urmilparikh 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![NPM](https://nodei.co/npm/angular-material-icons.png?downloadRank=true)](https://nodei.co/npm/angular-material-icons/) 2 | 3 | angular-material-icons 4 | ====================== 5 | 6 | AngularJS directive to use Material Design icons with custom fill-color and size. 7 | 8 | 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. 9 | 10 | Changes to icon will go through delightful morphing if [SVG-Morpheus](https://github.com/alexk111/SVG-Morpheus) is also included in your application. 11 | 12 | ## Installation 13 | This library is available via bower and npm 14 | * `bower install angular-material-icons` 15 | * `npm install angular-material-icons` 16 | 17 | ## Configure own icons 18 | add many icons 19 | ```javascript 20 | angular.module('moduleName').config(function (ngMdIconServiceProvider) { 21 | ngMdIconServiceProvider.addShapes({ 22 | 'signal_wifi_0_bar': '', 23 | 'signal_wifi_1_bar': '', 24 | }); 25 | }); 26 | ``` 27 | 28 | optionally You can add viewBox for icon if not want to do it in templates 29 | * attribute view-box from template has higher priority so if given will override configured by service 30 | * if not given viewBox in config and template will use default "0 0 24 24" 31 | ```javascript 32 | angular.module('moduleName').config(function (ngMdIconServiceProvider) { 33 | ngMdIconServiceProvider 34 | .addShape('evCross', '') 35 | .addViewBox('evCross', '0 0 612 612'); 36 | }); 37 | ``` 38 | 39 | ## Demo 40 | 41 | Checkout the [live demo](https://klarsys.github.io/angular-material-icons/) for usage instructions and a preview of all icons included in the set. 42 | 43 | ## Licenses 44 | 45 | This package is released under [MIT license](https://raw.githubusercontent.com/klarsys/angular-material-icons/master/LICENSE). 46 | 47 | Icons are released under [Attribution 4.0 International](http://creativecommons.org/licenses/by/4.0/) license. -------------------------------------------------------------------------------- /angular-material-icons.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Angular Material Design 3 | * https://github.com/angular/material 4 | * @license MIT 5 | * v0.9.7 6 | */ 7 | /* mixin definition ; sets LTR and RTL within the same style call */ 8 | 9 | md-autocomplete button ng-md-icon { 10 | position: absolute; 11 | top: 50%; 12 | left: 50%; 13 | -webkit-transform: translate3d(-50%, -50%, 0) scale(0.9); 14 | transform: translate3d(-50%, -50%, 0) scale(0.9); 15 | } 16 | 17 | md-autocomplete button ng-md-icon path { 18 | stroke-width: 0; 19 | } 20 | 21 | .md-button.ng-md-icon { 22 | padding: 0; 23 | background: none; 24 | } 25 | 26 | .md-button.md-fab ng-md-icon { 27 | margin-top: 0; 28 | } 29 | 30 | md-checkbox .ng-md-icon { 31 | transition: 240ms; 32 | position: absolute; 33 | top: 0; 34 | left: 0; 35 | width: 18px; 36 | height: 18px; 37 | border: 2px solid; 38 | border-radius: 2px; 39 | } 40 | 41 | md-checkbox.md-checked .ng-md-icon { 42 | border: none; 43 | } 44 | 45 | md-checkbox.md-checked .ng-md-icon:after { 46 | -webkit-transform: rotate(45deg); 47 | transform: rotate(45deg); 48 | position: absolute; 49 | left: 6px; 50 | top: 2px; 51 | display: table; 52 | width: 6px; 53 | height: 12px; 54 | border: 2px solid; 55 | border-top: 0; 56 | border-left: 0; 57 | content: ''; 58 | } 59 | 60 | .md-chips .md-chip .md-chip-remove ng-md-icon { 61 | height: 18px; 62 | width: 18px; 63 | position: absolute; 64 | top: 50%; 65 | left: 50%; 66 | -webkit-transform: translate3d(-50%, -50%, 0); 67 | transform: translate3d(-50%, -50%, 0); 68 | } 69 | 70 | ng-md-icon { 71 | margin: auto; 72 | background-repeat: no-repeat no-repeat; 73 | display: inline-block; 74 | vertical-align: middle; 75 | fill: currentColor; 76 | height: 24px; 77 | width: 24px; 78 | } 79 | 80 | ng-md-icon svg { 81 | pointer-events: none; 82 | display: block; 83 | } 84 | 85 | ng-md-icon[md-font-icon] { 86 | line-height: 1; 87 | width: auto; 88 | } 89 | 90 | ng-md-icon[disabled] svg { 91 | fill: rgba(0, 0, 0, 0.26); 92 | } 93 | 94 | md-input-container > ng-md-icon { 95 | position: absolute; 96 | top: 5px; 97 | left: 2px; 98 | } 99 | 100 | md-input-container > ng-md-icon + input { 101 | margin-left: 36px; 102 | } 103 | 104 | md-input-container.md-icon-float > ng-md-icon { 105 | top: 26px; 106 | left: 2px; 107 | } 108 | 109 | md-input-container.md-icon-float > ng-md-icon + input { 110 | margin-left: 36px; 111 | } 112 | 113 | @media screen and (-ms-high-contrast: active) { 114 | md-input-container.md-default-theme > ng-md-icon { 115 | fill: #fff; 116 | } 117 | } 118 | 119 | md-list-item > div.md-primary > ng-md-icon, 120 | md-list-item > div.md-secondary > ng-md-icon, 121 | md-list-item > ng-md-icon:first-child, 122 | md-list-item > ng-md-icon.md-secondary, 123 | md-list-item .md-list-item-inner > div.md-primary > ng-md-icon, 124 | md-list-item .md-list-item-inner > div.md-secondary > ng-md-icon, 125 | md-list-item .md-list-item-inner > ng-md-icon:first-child, 126 | md-list-item .md-list-item-inner > ng-md-icon.md-secondary { 127 | width: 24px; 128 | margin-top: 16px; 129 | margin-bottom: 12px; 130 | box-sizing: content-box; 131 | } 132 | 133 | [dir=ltr] md-list-item > ng-md-icon:first-child, 134 | [dir=ltr] md-list-item .md-list-item-inner > ng-md-icon:first-child{ 135 | -webkit-margin-end: 32px; 136 | margin-right: 32px; 137 | } 138 | 139 | 140 | [dir=rtl] md-list-item > ng-md-icon:first-child, 141 | [dir=rtl] md-list-item .md-list-item-inner > ng-md-icon:first-child{ 142 | -webkit-margin-end: 32px; 143 | margin-left: 32px; 144 | } 145 | 146 | md-list-item.md-2-line > ng-md-icon:first-child, 147 | md-list-item.md-2-line > .md-no-style > ng-md-icon:first-child { 148 | -webkit-align-self: flex-start; 149 | -ms-flex-item-align: start; 150 | align-self: flex-start; 151 | } 152 | 153 | md-list-item.md-3-line > ng-md-icon:first-child, 154 | md-list-item.md-3-line > .md-no-style > ng-md-icon:first-child { 155 | margin-top: 16px; 156 | } 157 | 158 | md-tabs-wrapper md-prev-button ng-md-icon, 159 | md-tabs-wrapper md-next-button ng-md-icon { 160 | position: absolute; 161 | top: 50%; 162 | left: 50%; 163 | -webkit-transform: translate3d(-50%, -50%, 0); 164 | transform: translate3d(-50%, -50%, 0); 165 | } 166 | 167 | md-tabs-wrapper md-next-button ng-md-icon { 168 | -webkit-transform: translate3d(-50%, -50%, 0) rotate(180deg); 169 | transform: translate3d(-50%, -50%, 0) rotate(180deg); 170 | } 171 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-material-icons", 3 | "version": "0.7.2", 4 | "authors": [ 5 | "Urmil Parikh " 6 | ], 7 | "description": "AngularJS directive to use Material Design icons with custom fill color and size.", 8 | "main": [ 9 | "angular-material-icons.min.js", 10 | "angular-material-icons.css" 11 | ], 12 | "keywords": [ 13 | "angular", 14 | "material", 15 | "design", 16 | "icon", 17 | "fill", 18 | "size", 19 | "color", 20 | "white", 21 | "morph", 22 | "svg", 23 | "custom" 24 | ], 25 | "license": "MIT", 26 | "homepage": "https://github.com/klarsys/angular-material-icons", 27 | "dependencies": { 28 | "angular": ">1.3.x" 29 | }, 30 | "ignore": [ 31 | "**/.*", 32 | "node_modules", 33 | "bower_components", 34 | "test", 35 | "tests" 36 | ] 37 | } 38 | -------------------------------------------------------------------------------- /demo.js: -------------------------------------------------------------------------------- 1 | /* 2 | * angular-material-icons v0.7.2 3 | * (c) 2014-2016 Klar Systems 4 | * License: MIT 5 | */ 6 | 7 | /* jshint -W097, -W101 */ 8 | 'use strict'; 9 | 10 | angular.module('demoapp', ['ngMdIcons']) 11 | .controller('democtrl', ['$scope', function($scope) { 12 | var icons = [ 13 | // 14 | //Material Icons 15 | // 16 | 'amazon', 'apple', 'facebook-box', 'facebook-messenger', 'facebook', 'github-box', 'github-circle', 'google-plus-box', 'google-plus', 'hangouts', 'linkedin-box', 'linkedin', 'login', 'logout', 'office', 'twitter', 'whatsapp', 'windows', 'pin', 'pin_off', 17 | 18 | // 19 | //Custom Icons 20 | // 21 | 'signal_wifi_0_bar', 'signal_wifi_1_bar', 'signal_wifi_2_bar', 'signal_wifi_3_bar', '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', 'signal_cellular_0_bar', 'signal_cellular_1_bar', 'signal_cellular_2_bar', 'signal_cellular_3_bar', 'now_wallpaper', 'now_widgets', 'battery_20', 'battery_30', 'battery_50', 'battery_60', 'battery_80', 'battery_90', 'battery_alert', 'battery_charging_20', 'battery_charging_30', 'battery_charging_50', 'battery_charging_60', 'battery_charging_80', 'battery_charging_90', 'account_child', 22 | 23 | 24 | // 25 | //Google Material Icons 26 | // 27 | 28 | //action 29 | '3d_rotation', 'accessibility', 'accessible', 'account_balance', 'account_balance_wallet', 'account_box', 'account_circle', 'add_shopping_cart', 'alarm', 'alarm_add', 'alarm_off', 'alarm_on', 'all_out', 'android', 'announcement', 'aspect_ratio', 'assessment', 'assignment', 'assignment_ind', 'assignment_late', 'assignment_return', 'assignment_returned', 'assignment_turned_in', 'autorenew', 'backup', 'book', 'bookmark', 'bookmark_outline', 'bug_report', 'build', 'cached', 'camera_enhanced', 'card_giftcard', 'card_membership', 'card_travel', 'change_history', 'check_circle', 'chrome_reader_mode', 'class', 'code', 'compare_arrows', 'copyright', 'credit_card', 'dashboard', 'date_range', 'delete', 'delete_forever', 'description', 'dns', 'done', 'done_all', 'donut_large', 'donut_small', 'eject', 'euro_symbol', 'event', 'event_seat', 'exit_to_app', 'explore', 'extension', 'face', 'favorite', 'favorite_border', 'feedback', 'find_in_page', 'find_replace', 'fingerprint', 'flight_land', 'flight_takeoff', 'flip_to_back', 'flip_to_front', 'g_translate', 'gavel', 'get_app', 'gif', 'grade', 'group_work', 'help', 'help_outline', 'highlight_off', 'history', 'home', 'hourglass_empty', 'hourglass_full', 'http', 'https', 'important_devices', 'info', 'info_outline', 'input', 'invert_colors', 'label', 'label_outline', 'language', 'launch', 'lightbulb_outline', 'line_style', 'line_weight', 'list', 'lock', 'lock_open', 'lock_outline', 'loyalty', 'markunread_mailbox', 'motorcycle', 'note_add', 'offline_pin', 'opacity', 'open_in_browser', 'open_in_new', 'open_with', 'pageview', 'pan_tool', 'payment', 'perm_camera_mic', 'perm_contact_calendar', 'perm_data_setting', 'perm_device_information', 'perm_identity', 'perm_media', 'perm_phone_msg', 'perm_scan_wifi', 'pets', 'picture_in_picture', 'picture_in_picture_alt', 'play_for_work', 'polymer', 'power_settings_new', 'pregnant_woman', 'print', 'query_builder', 'question_answer', 'receipt', 'record_voice_over', 'redeem', 'remove_shopping_cart', 'reorder', 'report_problem', 'restore', 'restore_page', 'room', 'rounded_corner', 'rowing', 'schedule', 'search', 'settings', 'settings_applications', 'settings_backup_restore', 'settings_bluetooth', 'settings_brightness', 'settings_cell', 'settings_ethernet', 'settings_input_antenna', 'settings_input_component', 'settings_input_composite', 'settings_input_hdmi', 'settings_input_svideo', 'settings_overscan', 'settings_phone', 'settings_power', 'settings_remote', 'settings_voice', 'shop', 'shop_two', 'shopping_basket', 'shopping_cart', 'speaker_notes', 'speaker_notes_off', 'spellcheck', 'star_rate', 'stars', 'store', 'subject', 'supervisor_account', 'swap_horiz', 'swap_vert', 'swap_vertial_circle', 'system_update_alt', 'tab', 'tab_unselected', 'theaters', 'thumb_down', 'thumb_up', 'thumbs_up_down', 'timeline', 'toc', 'today', 'toll', 'touch_app', 'track_changes', 'translate', 'trending_down', 'trending_flat', 'trending_up', 'turned_in', 'turned_in_not', 'update', 'verified_user', 'view_agenda', 'view_array', 'view_carousel', 'view_column', 'view_day', 'view_headline', 'view_list', 'view_module', 'view_quilt', 'view_stream', 'view_week', 'visibility', 'visibility_off', 'watch_later', 'work', 'youtube_searched_for', 'zoom_in', 'zoom_out', 30 | 31 | //alert 32 | 'add_alert','error','error_outline','warning', 33 | 34 | //av 35 | 'add_to_queue','airplay','album','art_track','av_timer','branding_watermark','call_to_action','closed_caption','equalizer','explicit','fast_forward','fast_rewind','featured_play_list','featured_video','fibre_dvr','fiber_manual_record','fibre_new','fibre_pin','fibre_smart_record','forward_10','forward_30','forward_5','games','hd','hearing','high_quality','my_library_add','my_library_books','my_library_music','loop','mic','mic_none','mic_off','movie','music_video','new_releases','not_interested','note','pause','pause_circle_filled','pause_circle_outline','play_arrow','play_circle_fill','play_circle_outline','playlist_add','playlist_add_check','playlist_play','queue','queue_music','queue_play_next','radio','recent_actors','remove_from_queue','repeat','repeat_one','replay','replay_10','replay_30','replay_5','shuffle','skip_next','skip_previous','slow_motion_video','snooze','sort_by_alpha','stop','subscriptions','subtitles','surround_sound','video_call','video_label','video_library','videocam','videocam_off','volume_down','volume_mute','volume_off','volume_up','web','web_asset', 36 | 37 | //communication 38 | 'business', 'call', 'call_end', 'call_made', 'call_merge', 'call_missed', 'call_missed_outgoing', 'call_received', 'call_split', 'chat', 'chat_bubble', 'chat_bubble_outline', 'clear_all', 'comment', 'contact_mail', 'contact_phone', 'contacts', 'dialer_sip', 'dialpad', 'email', 'forum', 'import_contacts', 'import_export', 'invert_colors_off', 'live_help', 'location_off', 'location_on', 'mail_outline', 'message', 'no_sim', 'phone', 'phonelink_erase', 'phonelink_lock', 'phonelink_ring', 'phonelink_setup', 'portable_wifi_off', 'present_to_all', 'ring_volume', 'rss_feed', 'screen_share', 'stay_current_landscape', 'stay_current_portrait', 'stay_primary_landscape', 'stay_primary_portrait', 'stop_screen_share', 'swap_calls', 'textsms', 'voicemail', 'vpn_key', 39 | 40 | //content 41 | 'add', 'add_box', 'add_circle', 'add_circle_outline', 'archive', 'backspace', 'block', 'clear', 'content_copy', 'content_cut', 'content_paste', 'create', 'delete_sweep', 'drafts', 'filter_list', 'flag', 'font_download', 'forward', 'gesture', 'inbox', 'link', 'low_priority', 'mail', 'markunread', 'move_to_inbox', 'next_week', 'redo', 'remove', 'remove_circle', 'remove_circle_outline', 'reply', 'reply_all', 'report', 'save', 'select_all', 'send', 'sort', 'text_format', 'unarchive', 'undo', 'weekend', 42 | 43 | //device 44 | 'access_alarms', 'access_alarm', 'access_time', 'add_alarm', 'airplanemode_on', 'airplanemode_inactive', 'battery_charging_full', 'battery_full', 'battery_std', 'battery_unknown', 'bluetooth', 'bluetooth_connected', 'bluetooth_disabled', 'bluetooth_searching', 'brightness_auto', 'brightness_high', 'brightness_low', 'brightness_medium', 'data_usage', 'developer_mode', 'devices', 'dvr', 'gps_fixed', 'gps_not_fixed', 'gps_off', 'graphic_eq', 'location_disabled', 'location_searching', 'network_cell', 'network_wifi', 'nfc', 'screen_lock_landscape', 'screen_lock_portrait', 'screen_lock_rotation', 'screen_rotation', 'sd_storage', 'settings_system_daydream', 'signal_cellular_4_bar', 'signal_cellular_connected_no_internet_4_bar', 'signal_cellular_no_sim', 'signal_cellular_null', 'signal_cellular_off', 'signal_wifi_4_bar', 'signal_wifi_4_bar_lock', 'signal_wifi_off', 'storage', 'usb', 'wallpaper', 'wifi_lock', 'wifi_tethering', 45 | 46 | //editor 47 | 'attach_file', 'attach_money', 'border_all', 'border_bottom', 'border_clear', 'border_color', 'border_horizontal', 'border_inner', 'border_left', 'border_outer', 'border_right', 'border_style', 'border_top', 'border_vertical', 'bubble_chart', 'drag_handle', 'format_align_center', 'format_align_justify', 'format_align_left', 'format_align_right', 'format_bold', 'format_clear', 'format_color_fill', 'format_color_reset', 'format_color_text', 'format_indent_decrease', 'format_indent_increase', 'format_italic', 'format_line_spacing', 'format_list_bulleted', 'format_list_numbered', 'format_paint', 'format_quote', 'format_shapes', 'format_size', 'format_strikethrough', 'format_textdirection_l_to_r', 'format_textdirection_r_to_l', 'format_underline', 'functions', 'highlight', 'insert_chart', 'insert_comment', 'insert_drive_file', 'insert_emoticon', 'insert_invitation', 'insert_link', 'insert_photo', 'linear_scale', 'merge_type', 'mode_comment', 'mode_edit', 'monetization_on', 'money_off', 'multiline_chart', 'pie_chart', 'pie_chart_outline', 'publish', 'short_text', 'show_chart', 'space_bar', 'strikethrough_s', 'text_fields', 'title', 'vertical_align_bottom', 'vertical_align_center', 'vertical_align_top', 'wrap_text', 48 | 49 | //file 50 | 'attachment', 'cloud', 'cloud_circle', 'cloud_done', 'cloud_download', 'cloud_off', 'cloud_queue', 'cloud_upload', 'create_new_folder', 'file_download', 'file_upload', 'folder', 'folder_open', 'folder_shared', 51 | 52 | //hardware 53 | 'cast', 'cast_connected', 'computer', 'desktop_mac', 'desktop_windows', 'developer_dashboard', 'device_hub', 'devices_other', 'dock', 'gamepad', 'headset', 'headset_mic', 'keyboard', 'keyboard_arrow_down', 'keyboard_arrow_left', 'keyboard_arrow_right', 'keyboard_arrow_up', 'keyboard_backspace', 'keyboard_capslock', 'keyboard_hide', 'keyboard_return', 'keyboard_tab', 'keyboard_voice', 'laptop', 'laptop_chromebook', 'laptop_mac', 'laptop_windows', 'memory', 'mouse', 'phone_android', 'phone_iphone', 'phonelink', 'phonelink_off', 'power_input', 'router', 'scanner', 'security', 'sim_card', 'smartphone', 'speaker', 'speaker_group', 'tablet', 'tablet_android', 'tablet_mac', 'toys', 'tv', 'vidiogame_asset', 'watch', 54 | 55 | //image 56 | 'add_a_photo', 'add_to_photos', 'adjust', 'assistant_photo', 'audiotrack', 'blur_circular', 'blur_linear', 'blur_off', 'blur_on', 'brightness_1', 'brightness_2', 'brightness_3', 'brightness_4', 'brightness_5', 'brightness_6', 'brightness_7', 'broken_image', 'brush', 'burst_mode', 'camera', 'camera_alt', 'camera_front', 'camera_rear', 'camera_roll', 'center_focus_strong', 'center_focus_weak', 'collections', 'collections_bookmark', 'color_lens', 'colorize', 'compare', 'control_point', 'control_point_duplicate', 'crop', 'crop_16_9', 'crop_3_2', 'crop_5_4', 'crop_7_5', 'crop_din', 'crop_free', 'crop_landscape', 'crop_original', 'crop_portrait', 'crop_rotate', 'crop_square', 'dehaze', 'details', 'edit', 'exposure', 'exposure_neg_1', 'exposure_neg_2', 'exposure_plus_1', 'exposure_plus_2', 'exposure_zero', 'filter', 'filter_1', 'filter_2', 'filter_3', 'filter_4', 'filter_5', 'filter_6', 'filter_7', 'filter_8', 'filter_9', 'filter_9_plus', 'filter_b_and_w', 'filter_center_focus', 'filter_drama', 'filter_frames', 'filter_hdr', 'filter_none', 'filter_tilt_shift', 'filter_vintage', 'flare', 'flash_auto', 'flash_off', 'flash_on', 'flip', 'gradient', 'grain', 'grid_off', 'grid_on', 'hdr_off', 'hdr_on', 'hdr_strong', 'hdr_weak', 'healing', 'image', 'image_aspect_ratio', 'iso', 'landscape', 'leak_add', 'leak_remove', 'lens', 'linked_camera', 'looks', 'looks_3', 'looks_4', 'looks_5', 'looks_6', 'looks_one', 'looks_two', 'loupe', 'monochrome_photos', 'movie_creation', 'movie_filter', 'music_note', 'nature', 'nature_people', 'navigate_before', 'navigate_next', 'palette', 'panorama', 'panorama_fisheye', 'panorama_horizontal', 'panorama_vertical', 'panorama_wide_angle', 'photo', 'photo_album', 'photo_camera', 'photo_filter', 'photo_library', 'photo_size_select_actual', 'photo_size_select_large', 'photo_size_select_small', 'picture_as_pdf', 'portrait', 'remove_red_eye', 'rotate_90_degrees_ccw', 'rotate_left', 'rotate_right', 'slideshow', 'straighten', 'style', 'switch_camera', 'switch_video', 'tag_faces', 'texture', 'timelapse', 'timer', 'timer_10', 'timer_3', 'timer_off', 'tonality', 'transform', 'tune', 'view_comfy', 'view_compact', 'vignette', 'wb_auto', 'wb_cloudy', 'wb_incandescent', 'wb_irradescent', 'wb_sunny', 57 | 58 | //maps 59 | 'add_location', 'beenhere', 'directions', 'directions_bike', 'directions_bus', 'directions_car', 'directions_ferry', 'directions_subway', 'directions_train', 'directions_transit', 'directions_walk', 'edit_location', 'ev_station', 'flight', 'hotel', 'layers', 'layers_clear', 'local_activity', 'local_airport', 'local_atm', 'local_bar', 'local_cafe', 'local_car_wash', 'local_convenience_store', 'local_dining', 'local_drink', 'local_florist', 'local_gas_station', 'local_grocery_store', 'local_hospital', 'local_hotel', 'local_laundry_service', 'local_library', 'local_mall', 'local_movies', 'local_offer', 'local_parking', 'local_pharmacy', 'local_phone', 'local_pizza', 'local_play', 'local_post_office', 'local_print_shop', 'local_restaurant', 'local_see', 'local_shipping', 'local_taxi', 'map', 'my_location', 'navigation', 'near_me', 'person_pin_circle', 'person_pin', 'pin_drop', 'place', 'rate_review', 'restaurant', 'restaurant_menu', 'satellite', 'store_mall_directory', 'streetview', 'subway', 'terrain', 'traffic', 'train', 'tram', 'transfer_within_a_station', 'zoom_out_map', 60 | 61 | //navigation 62 | 'apps', 'arrow_back', 'arrow_downward', 'arrow_drop_down', 'arrow_drop_down_circle', 'arrow_drop_up', 'arrow_forward', 'arrow_upward', 'cancel', 'check', 'chevron_left', 'chevron_right', 'close', 'expand_less', 'expand_more', 'first_page', 'fullscreen', 'fullscreen_exit', 'last_page', 'menu', 'more_horiz', 'more_vert', 'refresh', 'subdirectory_arrow_left', 'subdirectory_arrow_right', 63 | 64 | //notification 65 | 'adb', 'airline_seat_flat', 'airline_seat_angled', 'airline_seat_individual_suite', 'airline_seat_legroom_extra', 'airline_seat_legroom_normal', 'airline_seat_legroom_reduced', 'airline_seat_recline_extra', 'airline_seat_recline_normal', 'bluetooth_audio', 'confirmation_number', 'disc_full', 'do_not_disturb', 'do_not_disturb_alt', 'do_not_disturb_off', 'do_not_disturb_on', 'drive_eta', 'enhanced_encryption', 'event_available', 'event_busy', 'event_note', 'folder_special', 'live_tv', 'mms', 'more', 'network_check', 'network_locked', 'no_encryption', 'ondemand_video', 'personal_video', 'phone_bluetooth_speaker', 'phone_forwarded', 'phone_in_talk', 'phone_locked', 'phone_missed', 'phone_paused', 'power', 'priority_high', 'sd_card', 'sim_card_alert', 'sms', 'sms_failed', 'sync', 'sync_disabled', 'sync_problem', 'system_update', 'tap_and_play', 'time_to_leave', 'vibration', 'voice_chat', 'vpn_lock', 'wc', 'wifi', 66 | 67 | //places 68 | 'ac_unit', 'airport_shuttle', 'all_inclusive', 'beach_access', 'business_center', 'casino', 'child_care', 'child_friedly', 'fitness_center', 'free_breakfast', 'golf_course', 'hot_tub', 'kitchen', 'pool', 'room_service', 'rv_hookup', 'smoke_free', 'smoke_rooms', 'spa', 69 | 70 | //social 71 | 'cake', 'domain', 'group', 'group_add', 'location_city', 'mood', 'mood_bad', 'notifications', 'notifications_none', 'notifications_off', 'notifications_active', 'notifications_paused', 'pages', 'party_mode', 'people', 'people_outline', 'person', 'person_add', 'person_outline', 'plus_one', 'poll', 'public', 'school', 'sentiment_dissatisfied', 'sentiment_neutral', 'sentiment_satisfied', 'sentiment_very_dissatisfied', 'sentiment_very_satisfied', 'share', 'whatshot', 72 | 73 | //toggle 74 | 'check_box', 'check_box_outline_blank', 'indeterminate_check_box', 'radio_button_unchecked', 'radio_button_checked', 'star', 'star_half', 'star_border' 75 | ]; 76 | var colors = ['lightgreen', 'pink', 'wheat', '#cc99ff', '#abcdef']; 77 | $scope.cnt = Math.floor(Math.random() * icons.length); 78 | $scope.icon = icons[$scope.cnt]; 79 | $scope.fill = colors[0]; 80 | $scope.size = 48; 81 | 82 | $scope.clickIcon = 'thumb_up'; 83 | $scope.clickIconMorph = function() { 84 | if ($scope.clickIcon === 'thumb_up') { 85 | $scope.clickIcon = 'thumb_down'; 86 | } 87 | else { 88 | $scope.clickIcon = 'thumb_up'; 89 | } 90 | }; 91 | 92 | setInterval(function() { 93 | var random = Math.random(); 94 | if (random < 0.2) { 95 | $scope.size = 28 + 4 * Math.floor(Math.random() * 9); 96 | } else { 97 | $scope.cnt++; 98 | if ($scope.cnt >= icons.length) { 99 | $scope.cnt = 0; 100 | } 101 | $scope.icon = icons[$scope.cnt]; 102 | $scope.fill = colors[Math.floor(Math.random() * colors.length)]; 103 | } 104 | $scope.$apply(); 105 | }, 1700); 106 | }]) 107 | .config(['ngMdIconServiceProvider', function(ngMdIconServiceProvider) { 108 | ngMdIconServiceProvider 109 | // Add single icon 110 | .addShape('standby', '') 111 | // Get an existing icon 112 | .addShape('custom-delete', ngMdIconServiceProvider.getShape('delete')) 113 | // Add multiple icons 114 | .addShapes({ 115 | 'marker': '', 116 | 'live_circle': '' 117 | }); 118 | }]); 119 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'), 4 | uglify = require('gulp-uglify'), 5 | $ = require('gulp-load-plugins')({lazy: true}); 6 | 7 | gulp.task('lint', function() { 8 | return gulp.src([ 9 | 'angular-material-icons.js', 10 | 'demo.js' 11 | ]) 12 | .pipe($.jshint()) 13 | .pipe($.jshint.reporter('jshint-stylish', {verbose: true})); 14 | }); 15 | 16 | gulp.task('minify', function() { 17 | return gulp.src([ 18 | 'angular-material-icons.js' 19 | ]) 20 | .pipe($.uglify()) 21 | .pipe($.rename('angular-material-icons.min.js')) 22 | .pipe(gulp.dest('.')); 23 | }); 24 | 25 | gulp.task('default', ['lint', 'minify']); 26 | 27 | module.exports = gulp; 28 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Angular Material Icons 16 | 17 | 18 | 19 | 20 | 70 | 71 | 72 | 73 | 74 | 75 | Fork me on GitHub 76 | 77 |

Angular Material Icons v0.7.2

78 | AngularJS directive to use Material Design icons with custom fill-color and size. 79 |
    80 |
  • For production, use minified version directly from CDN: 81 | 82 |
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.7.2/angular-material-icons.min.js"></script> 83 |
    84 |
    85 | For other purposes, project files are available via bower / npm or can be cloned directly from github. 86 |
    {{command}} 87 |
  • 88 |
  • Inject ngMdIcons to your angularjs application: 89 |
    angular.module('demoapp', ['ngMdIcons']); 90 |
  • 91 |
  • Use ng-md-icon directive in your html, specifying fill-color through css: 92 |
    <ng-md-icon icon="..." style="fill: ..." size="..."></ng-md-icon> 93 |
    94 |
    95 |

    icon="send"
    96 |

    icon="send"
    style="fill: pink"
    97 |

    icon="{{icon}}"
    style="fill: {{fill}}"
    98 |

    icon="send"
    style="fill: #abcdef"
    99 |
    100 |

    size="20"
    101 |

    -- no size --
    (default is 24)
    102 |

    size="{{size}}"
    103 |

    size="64"
    104 |
    105 |
  • 106 |
  • This directive is tested on Chrome, Firefox, Safari and Edge. 107 |
    For IE, use ng-attr-style instead of style. Also refer AngularJS documentation on IE Compatibility. 108 |
  • 109 |
  • 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. 110 |
    Refer code for this page (index.html and demo.js) for details. 111 |
    <script src="//cdnjs.cloudflare.com/ajax/libs/SVG-Morpheus/0.3.2/svg-morpheus.js"></script> 112 |
    113 |
    When SVG-Morpheus is included, you can use options attribute to control morphing options. 114 |
    115 |
    116 |

    options=
    '{"duration": 375}'
    (default is 750)
    117 |

    options=
    '{"rotation": "none"}'
    (default is clock)
    118 |

    options=
    '{"rotation": "counterclock"}'
    119 |

    Example:
    Morph on ng-click
    120 |
    121 |
    Note that options attribute is a JSON parse-able string so surround keys with double-quotes. 122 |
  • 123 |
  • Advanced: Refer demo.js to register custom icons for your project or to access default icon shapes from a controller or another service. 124 |
    125 |

    standby
    126 |

    custom-delete
    127 |

    marker
    128 |

    live_circle
    129 |
  • 130 |
131 | 132 |

Full list of icons:

133 | 134 |

From MaterialDesignIcons.com

135 |

amazon
136 |

apple
137 |

facebook-box
138 |

facebook-messenger
139 |

facebook
140 |

github-box
141 |

github-circle
142 |

google-plus-box
143 |

google-plus
144 |

hangouts
145 |

linkedin-box
146 |

linkedin
147 |

login
148 |

logout
149 |

office
150 |

twitter
151 |

whatsapp
152 |

windows
153 |

pin
154 |

pin_off
155 | 156 |

Custom

157 |

signal_wifi_0_bar
158 |

signal_wifi_1_bar
159 |

signal_wifi_2_bar
160 |

signal_wifi_3_bar
161 |

signal_cellular_connected
_no_internet_0_bar
162 |

signal_cellular_connected
_no_internet_1_bar
163 |

signal_cellular_connected
_no_internet_2_bar
164 |

signal_cellular_connected
_no_internet_3_bar
165 |

signal_cellular_0_bar
166 |

signal_cellular_1_bar
167 |

signal_cellular_2_bar
168 |

signal_cellular_3_bar
169 |

now_wallpaper
170 |

now_widgets
171 |

battery_20
172 |

battery_30
173 |

battery_50
174 |

battery_60
175 |

battery_80
176 |

battery_90
177 |

battery_alert
178 |

battery_charging_20
179 |

battery_charging_30
180 |

battery_charging_50
181 |

battery_charging_60
182 |

battery_charging_80
183 |

battery_charging_90
184 |

account_child
185 | 186 |

From Material Design icons by Google

187 |

Action

188 |

3d_rotation
189 |

accessibility
190 |

accessible
191 |

account_balance
192 |

account_balance_wallet
193 |

account_box
194 |

account_circle
195 |

add_shopping_cart
196 |

alarm
197 |

alarm_add
198 |

alarm_off
199 |

alarm_on
200 |

all_out
201 |

android
202 |

announcement
203 |

aspect_ratio
204 |

assessment
205 |

assignment
206 |

assignment_ind
207 |

assignment_late
208 |

assignment_return
209 |

assignment_returned
210 |

assignment_turned_in
211 |

autorenew
212 |

backup
213 |

book
214 |

bookmark
215 |

bookmark_outline
216 |

bug_report
217 |

build
218 |

cached
219 |

camera_enhanced
220 |

card_giftcard
221 |

card_membership
222 |

card_travel
223 |

change_history
224 |

check_circle
225 |

chrome_reader_mode
226 |

class
227 |

code
228 |

compare_arrows
229 |

copyright
230 |

credit_card
231 |

dashboard
232 |

date_range
233 |

delete
234 |

delete_forever
235 |

description
236 |

dns
237 |

done
238 |

done_all
239 |

donut_large
240 |

donut_small
241 |

eject
242 |

euro_symbol
243 |

event
244 |

event_seat
245 |

exit_to_app
246 |

explore
247 |

extension
248 |

face
249 |

favorite
250 |

favorite_border
251 |

feedback
252 |

find_in_page
253 |

find_replace
254 |

fingerprint
255 |

flight_land
256 |

flight_takeoff
257 |

flip_to_back
258 |

flip_to_front
259 |

g_translate
260 |

gavel
261 |

get_app
262 |

gif
263 |

grade
264 |

group_work
265 |

help
266 |

help_outline
267 |

highlight_off
268 |

history
269 |

home
270 |

hourglass_empty
271 |

hourglass_full
272 |

http
273 |

https
274 |

important_devices
275 |

info
276 |

info_outline
277 |

input
278 |

invert_colors
279 |

label
280 |

label_outline
281 |

language
282 |

launch
283 |

lightbulb_outline
284 |

line_style
285 |

line_weight
286 |

list
287 |

lock
288 |

lock_open
289 |

lock_outline
290 |

loyalty
291 |

markunread_mailbox
292 |

motorcycle
293 |

note_add
294 |

offline_pin
295 |

opacity
296 |

open_in_browser
297 |

open_in_new
298 |

open_with
299 |

pageview
300 |

pan_tool
301 |

payment
302 |

perm_camera_mic
303 |

perm_contact_calendar
304 |

perm_data_setting
305 |

perm_device_information
306 |

perm_identity
307 |

perm_media
308 |

perm_phone_msg
309 |

perm_scan_wifi
310 |

pets
311 |

picture_in_picture
312 |

picture_in_picture_alt
313 |

play_for_work
314 |

polymer
315 |

power_settings_new
316 |

pregnant_woman
317 |

print
318 |

query_builder
319 |

question_answer
320 |

receipt
321 |

record_voice_over
322 |

redeem
323 |

remove_shopping_cart
324 |

reorder
325 |

report_problem
326 |

restore
327 |

restore_page
328 |

room
329 |

rounded_corner
330 |

rowing
331 |

schedule
332 |

search
333 |

settings
334 |

settings_applications
335 |

settings_backup_restore
336 |

settings_bluetooth
337 |

settings_brightness
338 |

settings_cell
339 |

settings_ethernet
340 |

settings_input_antenna
341 |

settings_input_component
342 |

settings_input_composite
343 |

settings_input_hdmi
344 |

settings_input_svideo
345 |

settings_overscan
346 |

settings_phone
347 |

settings_power
348 |

settings_remote
349 |

settings_voice
350 |

shop
351 |

shop_two
352 |

shopping_basket
353 |

shopping_cart
354 |

speaker_notes
355 |

speaker_notes_off
356 |

spellcheck
357 |

star_rate
358 |

stars
359 |

store
360 |

subject
361 |

supervisor_account
362 |

swap_horiz
363 |

swap_vert
364 |

swap_vertial_circle
365 |

system_update_alt
366 |

tab
367 |

tab_unselected
368 |

theaters
369 |

thumb_down
370 |

thumb_up
371 |

thumbs_up_down
372 |

timeline
373 |

toc
374 |

today
375 |

toll
376 |

touch_app
377 |

track_changes
378 |

translate
379 |

trending_down
380 |

trending_flat
381 |

trending_up
382 |

turned_in
383 |

turned_in_not
384 |

update
385 |

verified_user
386 |

view_agenda
387 |

view_array
388 |

view_carousel
389 |

view_column
390 |

view_day
391 |

view_headline
392 |

view_list
393 |

view_module
394 |

view_quilt
395 |

view_stream
396 |

view_week
397 |

visibility
398 |

visibility_off
399 |

watch_later
400 |

work
401 |

youtube_searched_for
402 |

zoom_in
403 |

zoom_out
404 | 405 |

Alert

406 |

add_alert
407 |

error
408 |

error_outline
409 |

warning
410 | 411 |

Av

412 |

add_to_queue
413 |

airplay
414 |

album
415 |

art_track
416 |

av_timer
417 |

branding_watermark
418 |

call_to_action
419 |

closed_caption
420 |

equalizer
421 |

explicit
422 |

fast_forward
423 |

fast_rewind
424 |

featured_play_list
425 |

featured_video
426 |

fibre_dvr
427 |

fiber_manual_record
428 |

fibre_new
429 |

fibre_pin
430 |

fibre_smart_record
431 |

forward_10
432 |

forward_30
433 |

forward_5
434 |

games
435 |

hd
436 |

hearing
437 |

high_quality
438 |

my_library_add
439 |

my_library_books
440 |

my_library_music
441 |

loop
442 |

mic
443 |

mic_none
444 |

mic_off
445 |

movie
446 |

music_video
447 |

new_releases
448 |

not_interested
449 |

note
450 |

pause
451 |

pause_circle_filled
452 |

pause_circle_outline
453 |

play_arrow
454 |

play_circle_fill
455 |

play_circle_outline
456 |

playlist_add
457 |

playlist_add_check
458 |

playlist_play
459 |

queue
460 |

queue_music
461 |

queue_play_next
462 |

radio
463 |

recent_actors
464 |

remove_from_queue
465 |

repeat
466 |

repeat_one
467 |

replay
468 |

replay_10
469 |

replay_30
470 |

replay_5
471 |

shuffle
472 |

skip_next
473 |

skip_previous
474 |

slow_motion_video
475 |

snooze
476 |

sort_by_alpha
477 |

stop
478 |

subscriptions
479 |

subtitles
480 |

surround_sound
481 |

video_call
482 |

video_label
483 |

video_library
484 |

videocam
485 |

videocam_off
486 |

volume_down
487 |

volume_mute
488 |

volume_off
489 |

volume_up
490 |

web
491 |

web_asset
492 | 493 |

Communication

494 |

business
495 |

call
496 |

call_end
497 |

call_made
498 |

call_merge
499 |

call_missed
500 |

call_missed_outgoing
501 |

call_received
502 |

call_split
503 |

chat
504 |

chat_bubble
505 |

chat_bubble_outline
506 |

clear_all
507 |

comment
508 |

contact_mail
509 |

contact_phone
510 |

contacts
511 |

dialer_sip
512 |

dialpad
513 |

email
514 |

forum
515 |

import_contacts
516 |

import_export
517 |

invert_colors_off
518 |

live_help
519 |

location_off
520 |

location_on
521 |

mail_outline
522 |

message
523 |

no_sim
524 |

phone
525 |

phonelink_erase
526 |

phonelink_lock
527 |

phonelink_ring
528 |

phonelink_setup
529 |

portable_wifi_off
530 |

present_to_all
531 |

ring_volume
532 |

rss_feed
533 |

screen_share
534 |

stay_current_landscape
535 |

stay_current_portrait
536 |

stay_primary_landscape
537 |

stay_primary_portrait
538 |

stop_screen_share
539 |

swap_calls
540 |

textsms
541 |

voicemail
542 |

vpn_key
543 | 544 |

Content

545 |

add
546 |

add_box
547 |

add_circle
548 |

add_circle_outline
549 |

archive
550 |

backspace
551 |

block
552 |

clear
553 |

content_copy
554 |

content_cut
555 |

content_paste
556 |

create
557 |

delete_sweep
558 |

drafts
559 |

filter_list
560 |

flag
561 |

font_download
562 |

forward
563 |

gesture
564 |

inbox
565 |

link
566 |

low_priority
567 |

mail
568 |

markunread
569 |

move_to_inbox
570 |

next_week
571 |

redo
572 |

remove
573 |

remove_circle
574 |

remove_circle_outline
575 |

reply
576 |

reply_all
577 |

report
578 |

save
579 |

select_all
580 |

send
581 |

sort
582 |

text_format
583 |

unarchive
584 |

undo
585 |

weekend
586 | 587 |

Device

588 |

access_alarms
589 |

access_alarm
590 |

access_time
591 |

add_alarm
592 |

airplanemode_on
593 |

airplanemode_inactive
594 |

battery_charging_full
595 |

battery_full
596 |

battery_std
597 |

battery_unknown
598 |

bluetooth
599 |

bluetooth_connected
600 |

bluetooth_disabled
601 |

bluetooth_searching
602 |

brightness_auto
603 |

brightness_high
604 |

brightness_low
605 |

brightness_medium
606 |

data_usage
607 |

developer_mode
608 |

devices
609 |

dvr
610 |

gps_fixed
611 |

gps_not_fixed
612 |

gps_off
613 |

graphic_eq
614 |

location_disabled
615 |

location_searching
616 |

network_cell
617 |

network_wifi
618 |

nfc
619 |

screen_lock_landscape
620 |

screen_lock_portrait
621 |

screen_lock_rotation
622 |

screen_rotation
623 |

sd_storage
624 |

settings_system_daydream
625 |

signal_cellular_4_bar
626 |

signal_cellular_connected_no_internet_4_bar
627 |

signal_cellular_no_sim
628 |

signal_cellular_null
629 |

signal_cellular_off
630 |

signal_wifi_4_bar
631 |

signal_wifi_4_bar_lock
632 |

signal_wifi_off
633 |

storage
634 |

usb
635 |

wallpaper
636 |

wifi_lock
637 |

wifi_tethering
638 | 639 |

Editor

640 |

attach_file
641 |

attach_money
642 |

border_all
643 |

border_bottom
644 |

border_clear
645 |

border_color
646 |

border_horizontal
647 |

border_inner
648 |

border_left
649 |

border_outer
650 |

border_right
651 |

border_style
652 |

border_top
653 |

border_vertical
654 |

bubble_chart
655 |

drag_handle
656 |

format_align_center
657 |

format_align_justify
658 |

format_align_left
659 |

format_align_right
660 |

format_bold
661 |

format_clear
662 |

format_color_fill
663 |

format_color_reset
664 |

format_color_text
665 |

format_indent_decrease
666 |

format_indent_increase
667 |

format_italic
668 |

format_line_spacing
669 |

format_list_bulleted
670 |

format_list_numbered
671 |

format_paint
672 |

format_quote
673 |

format_shapes
674 |

format_size
675 |

format_strikethrough
676 |

format_textdirection_l_to_r
677 |

format_textdirection_r_to_l
678 |

format_underline
679 |

functions
680 |

highlight
681 |

insert_chart
682 |

insert_comment
683 |

insert_drive_file
684 |

insert_emoticon
685 |

insert_invitation
686 |

insert_link
687 |

insert_photo
688 |

linear_scale
689 |

merge_type
690 |

mode_comment
691 |

mode_edit
692 |

monetization_on
693 |

money_off
694 |

multiline_chart
695 |

pie_chart
696 |

pie_chart_outline
697 |

publish
698 |

short_text
699 |

show_chart
700 |

space_bar
701 |

strikethrough_s
702 |

text_fields
703 |

title
704 |

vertical_align_bottom
705 |

vertical_align_center
706 |

vertical_align_top
707 |

wrap_text
708 | 709 |

File

710 |

attachment
711 |

cloud
712 |

cloud_circle
713 |

cloud_done
714 |

cloud_download
715 |

cloud_off
716 |

cloud_queue
717 |

cloud_upload
718 |

create_new_folder
719 |

file_download
720 |

file_upload
721 |

folder
722 |

folder_open
723 |

folder_shared
724 | 725 |

Hardware

726 |

cast
727 |

cast_connected
728 |

computer
729 |

desktop_mac
730 |

desktop_windows
731 |

developer_dashboard
732 |

device_hub
733 |

devices_other
734 |

dock
735 |

gamepad
736 |

headset
737 |

headset_mic
738 |

keyboard
739 |

keyboard_arrow_down
740 |

keyboard_arrow_left
741 |

keyboard_arrow_right
742 |

keyboard_arrow_up
743 |

keyboard_backspace
744 |

keyboard_capslock
745 |

keyboard_hide
746 |

keyboard_return
747 |

keyboard_tab
748 |

keyboard_voice
749 |

laptop
750 |

laptop_chromebook
751 |

laptop_mac
752 |

laptop_windows
753 |

memory
754 |

mouse
755 |

phone_android
756 |

phone_iphone
757 |

phonelink
758 |

phonelink_off
759 |

power_input
760 |

router
761 |

scanner
762 |

security
763 |

sim_card
764 |

smartphone
765 |

speaker
766 |

speaker_group
767 |

tablet
768 |

tablet_android
769 |

tablet_mac
770 |

toys
771 |

tv
772 |

vidiogame_asset
773 |

watch
774 | 775 |

Image

776 |

add_a_photo
777 |

add_to_photos
778 |

adjust
779 |

assistant_photo
780 |

audiotrack
781 |

blur_circular
782 |

blur_linear
783 |

blur_off
784 |

blur_on
785 |

brightness_1
786 |

brightness_2
787 |

brightness_3
788 |

brightness_4
789 |

brightness_5
790 |

brightness_6
791 |

brightness_7
792 |

broken_image
793 |

brush
794 |

burst_mode
795 |

camera
796 |

camera_alt
797 |

camera_front
798 |

camera_rear
799 |

camera_roll
800 |

center_focus_strong
801 |

center_focus_weak
802 |

collections
803 |

collections_bookmark
804 |

color_lens
805 |

colorize
806 |

compare
807 |

control_point
808 |

control_point_duplicate
809 |

crop
810 |

crop_16_9
811 |

crop_3_2
812 |

crop_5_4
813 |

crop_7_5
814 |

crop_din
815 |

crop_free
816 |

crop_landscape
817 |

crop_original
818 |

crop_portrait
819 |

crop_rotate
820 |

crop_square
821 |

dehaze
822 |

details
823 |

edit
824 |

exposure
825 |

exposure_neg_1
826 |

exposure_neg_2
827 |

exposure_plus_1
828 |

exposure_plus_2
829 |

exposure_zero
830 |

filter
831 |

filter_1
832 |

filter_2
833 |

filter_3
834 |

filter_4
835 |

filter_5
836 |

filter_6
837 |

filter_7
838 |

filter_8
839 |

filter_9
840 |

filter_9_plus
841 |

filter_b_and_w
842 |

filter_center_focus
843 |

filter_drama
844 |

filter_frames
845 |

filter_hdr
846 |

filter_none
847 |

filter_tilt_shift
848 |

filter_vintage
849 |

flare
850 |

flash_auto
851 |

flash_off
852 |

flash_on
853 |

flip
854 |

gradient
855 |

grain
856 |

grid_off
857 |

grid_on
858 |

hdr_off
859 |

hdr_on
860 |

hdr_strong
861 |

hdr_weak
862 |

healing
863 |

image
864 |

image_aspect_ratio
865 |

iso
866 |

landscape
867 |

leak_add
868 |

leak_remove
869 |

lens
870 |

linked_camera
871 |

looks
872 |

looks_3
873 |

looks_4
874 |

looks_5
875 |

looks_6
876 |

looks_one
877 |

looks_two
878 |

loupe
879 |

monochrome_photos
880 |

movie_creation
881 |

movie_filter
882 |

music_note
883 |

nature
884 |

nature_people
885 |

navigate_before
886 |

navigate_next
887 |

palette
888 |

panorama
889 |

panorama_fisheye
890 |

panorama_horizontal
891 |

panorama_vertical
892 |

panorama_wide_angle
893 |

photo
894 |

photo_album
895 |

photo_camera
896 |

photo_filter
897 |

photo_library
898 |

photo_size_select_actual
899 |

photo_size_select_large
900 |

photo_size_select_small
901 |

picture_as_pdf
902 |

portrait
903 |

remove_red_eye
904 |

rotate_90_degrees_ccw
905 |

rotate_left
906 |

rotate_right
907 |

slideshow
908 |

straighten
909 |

style
910 |

switch_camera
911 |

switch_video
912 |

tag_faces
913 |

texture
914 |

timelapse
915 |

timer
916 |

timer_10
917 |

timer_3
918 |

timer_off
919 |

tonality
920 |

transform
921 |

tune
922 |

view_comfy
923 |

view_compact
924 |

vignette
925 |

wb_auto
926 |

wb_cloudy
927 |

wb_incandescent
928 |

wb_irradescent
929 |

wb_sunny
930 | 931 |

Maps

932 |

add_location
933 |

beenhere
934 |

directions
935 |

directions_bike
936 |

directions_bus
937 |

directions_car
938 |

directions_ferry
939 |

directions_subway
940 |

directions_train
941 |

directions_transit
942 |

directions_walk
943 |

edit_location
944 |

ev_station
945 |

flight
946 |

hotel
947 |

layers
948 |

layers_clear
949 |

local_activity
950 |

local_airport
951 |

local_atm
952 |

local_bar
953 |

local_cafe
954 |

local_car_wash
955 |

local_convenience_store
956 |

local_dining
957 |

local_drink
958 |

local_florist
959 |

local_gas_station
960 |

local_grocery_store
961 |

local_hospital
962 |

local_hotel
963 |

local_laundry_service
964 |

local_library
965 |

local_mall
966 |

local_movies
967 |

local_offer
968 |

local_parking
969 |

local_pharmacy
970 |

local_phone
971 |

local_pizza
972 |

local_play
973 |

local_post_office
974 |

local_print_shop
975 |

local_restaurant
976 |

local_see
977 |

local_shipping
978 |

local_taxi
979 |

map
980 |

my_location
981 |

navigation
982 |

near_me
983 |

person_pin_circle
984 |

person_pin
985 |

pin_drop
986 |

place
987 |

rate_review
988 |

restaurant
989 |

restaurant_menu
990 |

satellite
991 |

store_mall_directory
992 |

streetview
993 |

subway
994 |

terrain
995 |

traffic
996 |

train
997 |

tram
998 |

transfer_within_a_station
999 |

zoom_out_map
1000 | 1001 |

Navigation

1002 |

apps
1003 |

arrow_back
1004 |

arrow_downward
1005 |

arrow_drop_down
1006 |

arrow_drop_down_circle
1007 |

arrow_drop_up
1008 |

arrow_forward
1009 |

arrow_upwardF
1010 |

cancel
1011 |

check
1012 |

chevron_left
1013 |

chevron_right
1014 |

close
1015 |

expand_less
1016 |

expand_more
1017 |

first_page
1018 |

fullscreen
1019 |

fullscreen_exit
1020 |

last_page
1021 |

menu
1022 |

more_horiz
1023 |

more_vert
1024 |

refresh
1025 |

subdirectory_arrow_left
1026 |

subdirectory_arrow_right
1027 |

adb
1028 |

airline_seat_flat
1029 |

airline_seat_angled
1030 |

airline_seat_individual_suite
1031 |

airline_seat_legroom_extra
1032 |

airline_seat_legroom_normal
1033 |

airline_seat_legroom_reduced
1034 |

airline_seat_recline_extra
1035 |

airline_seat_recline_normal
1036 |

bluetooth_audio
1037 |

confirmation_number
1038 |

disc_full
1039 |

do_not_disturb
1040 |

do_not_disturb_alt
1041 |

do_not_disturb_off
1042 |

do_not_disturb_on
1043 |

drive_eta
1044 |

enhanced_encryption
1045 |

event_available
1046 |

event_busy
1047 |

event_note
1048 |

folder_special
1049 |

live_tv
1050 |

mms
1051 |

more
1052 |

network_check
1053 |

network_locked
1054 |

no_encryption
1055 |

ondemand_video
1056 |

personal_video
1057 |

phone_bluetooth_speaker
1058 |

phone_forwarded
1059 |

phone_in_talk
1060 |

phone_locked
1061 |

phone_missed
1062 |

phone_paused
1063 |

power
1064 |

priority_high
1065 |

sd_card
1066 |

sim_card_alert
1067 |

sms
1068 |

sms_failed
1069 |

sync
1070 |

sync_disabled
1071 |

sync_problem
1072 |

system_update
1073 |

tap_and_play
1074 |

time_to_leave
1075 |

vibration
1076 |

voice_chat
1077 |

vpn_lock
1078 |

wc
1079 |

wifi
1080 | 1081 |

Places

1082 |

ac_unit
1083 |

airport_shuttle
1084 |

all_inclusive
1085 |

beach_access
1086 |

business_center
1087 |

casino
1088 |

child_care
1089 |

child_friedly
1090 |

fitness_center
1091 |

free_breakfast
1092 |

golf_course
1093 |

hot_tub
1094 |

kitchen
1095 |

pool
1096 |

room_service
1097 |

rv_hookup
1098 |

smoke_free
1099 |

smoke_rooms
1100 |

spa
1101 | 1102 |

Social

1103 |

cake
1104 |

domain
1105 |

group
1106 |

group_add
1107 |

location_city
1108 |

mood
1109 |

mood_bad
1110 |

notifications
1111 |

notifications_none
1112 |

notifications_off
1113 |

notifications_active
1114 |

notifications_paused
1115 |

pages
1116 |

party_mode
1117 |

people
1118 |

people_outline
1119 |

person
1120 |

person_add
1121 |

person_outline
1122 |

plus_one
1123 |

poll
1124 |

public
1125 |

school
1126 |

sentiment_dissatisfied
1127 |

sentiment_neutral
1128 |

sentiment_satisfied
1129 |

sentiment_very_dissatisfied
1130 |

sentiment_very_satisfied
1131 |

share
1132 |

whatshot
1133 | 1134 |

Toggle

1135 |

check_box
1136 |

check_box_outline_blank
1137 |

indeterminate_check_box
1138 |

radio_button_unchecked
1139 |

radio_button_checked
1140 |

star
1141 |

star_half
1142 |

star_border
1143 | 1144 | 1145 | 1146 | 1147 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | require('./angular-material-icons'); 2 | module.exports = 'ngMdIcons'; 3 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-material-icons", 3 | "version": "0.7.2", 4 | "author": "Urmil Parikh", 5 | "description": "AngularJS directive to use Material Design icons with custom fill color and size.", 6 | "main": "index.js", 7 | "keywords": [ 8 | "angular", 9 | "material", 10 | "design", 11 | "icon", 12 | "fill", 13 | "size", 14 | "color", 15 | "white", 16 | "morph", 17 | "svg", 18 | "custom" 19 | ], 20 | "license": "MIT", 21 | "homepage": "https://github.com/klarsys/angular-material-icons", 22 | "peerDependencies": { 23 | "angular": ">=1.3.0" 24 | }, 25 | "devDependencies": { 26 | "gulp": "^3.9.0", 27 | "gulp-jshint": "^1.11.2", 28 | "gulp-load-plugins": "^1.0.0-rc.1", 29 | "gulp-rename": "^1.2.2", 30 | "gulp-uglify": "^1.3.0", 31 | "jshint-stylish": "^2.0.1", 32 | "angular": ">=1.3.0" 33 | }, 34 | "scripts": { 35 | "test": "echo \"Error: no test specified\" && exit 1" 36 | }, 37 | "repository": { 38 | "type": "git", 39 | "url": "https://github.com/klarsys/angular-material-icons.git" 40 | }, 41 | "bugs": { 42 | "url": "https://github.com/klarsys/angular-material-icons/issues" 43 | } 44 | } 45 | --------------------------------------------------------------------------------