klarsys / angular-material-icons Goto Github PK
View Code? Open in Web Editor NEWAngularJS directive to use Material Design icons with custom fill-color and size.
License: MIT License
AngularJS directive to use Material Design icons with custom fill-color and size.
License: MIT License
I'm using ng-md-icon on Fab Speed Dial, on first page load that icon look like dotted in this preview :
But after i hover on fab button, then is look fine.
This my code :
<md-fab-speed-dial md-direction="up" md-open="this.isOpen" class="md-scale md-fab-bottom-right md-hover-full" ng-mouseenter="this.isOpen=true" ng-mouseleave="this.isOpen=false">
<md-fab-trigger>
<md-button aria-label="menu" class="md-fab md-warn md-mini">
<md-tooltip md-direction="left">Menu</md-tooltip>
<ng-md-icon icon="menu" class="md-default-theme"></ng-md-icon>
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button aria-label="Twitter" class="md-fab md-raised md-mini">
<md-tooltip md-direction="left">Twitter</md-tooltip>
<ng-md-icon icon="twitter" class="md-default-theme"></ng-md-icon>
</md-button>
<md-button aria-label="Facebook" class="md-fab md-raised md-mini">
<md-tooltip md-direction="left">Facebook</md-tooltip>
<ng-md-icon icon="facebook" class="md-default-theme"></ng-md-icon>
</md-button>
<md-button aria-label="Google Hangout" class="md-fab md-raised md-mini">
<md-tooltip md-direction="left">Hangout</md-tooltip>
<ng-md-icon icon="hangouts" class="md-default-theme"></ng-md-icon>
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
Need help
Thanks
ng-md-icon inside md-button not centered like normal md-icon in md-button
Try latest bower version and icons: trending_neutral are not displayed anymore.
Is this supported to use in angular2?
Currently, the library is heavy => more than 200 ko (because it comes with all available icons) whereas you might use only few of them.
What about an option to build (bower) the library :
Hi,
Do you plan to update to the latest version of google/material-design-icons? The 2.1 update says that 96 new icons have been added. One of the forks even have the update: https://github.com/dresslerit/angular-material-icons/tree/google-icon-v2.1-update
Thanks!
I installed angular material design icon through bower. Angular can't find the module to load although its already there in bower_components in my project and also specified as a dependency in bower.json
Not sure If I am missing something but the error led me here. Is this a naming convention issue with 'ngMdIcons'? as mentioned here.
Is it possible to pass class name like md-primary, md-accent , .. as specified in Angular Material instead of filling color by our own?
Hi there
Please allow angular 1.4 in dependencies
Let's say I have my own icon stored in my assets folder. Could I load my icon from there?
<md-icon icon="src/assets/logo.png" ></md-icon>
Sort of like what Angualr Material have for their icons:
<md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
First, I'm sorry but I forget to exec the build command, so the min file has currently not the person_pin.
Secondly, I'm currently changing the array at gh-pages because they dont show the new icons. Its in progress.
Greetings Noah
It would be great if the shapes object could be an angular constant or value so that we could add our own custom svg icons to the list.
ngMaterial use has its own <md-icon>
directive, and most of its components and css are setup for it.
when using ng-md-icon styling for icons are goan.
example:
<md-list>
<md-list-item ng-repeat="item in menu" role="link" md-ink-ripple>
<ng-md-icon icon="{{item.icon}}" aria-label="{{item.title}}"></ng-md-icon>
<p>{{item.title}}</p>
</md-list-item>
<md-divider></md-divider>
</md-list>
no padding or margin will be applied on ng-md-icon.
Hi,
why we dont we bower component?
Edit : Didnt know that bower component was available, though I found out via github site,not Readme, I would advice adding bower and npm install instructions on Readme
When we use the Bower to get the angular material icons by using bower command like "bower install angular-material-icons" and If I use those JS & CSS in my application then icon's are not loading. It just displaying the icon name directly, not displaying the icon.
If I use the url to load the JS & CSS then it is working.
I need this to work with Bower only, because my app don't want to use the Internet to open app
Would it be possible to use the following icons instead?
I need the fix for issue #33. Since this issue is not in the latest v0.5, I am including the latest from github:
https://github.com/klarsys/angular-material-icons.git#c1a75b690d9dfd6d681f7d1c74f8ef9275b046a7
However including this version is giving me a runtime error:
[$injector:strictdi] function(ngMdIconService) is not using explicit annotation and cannot be invoked in strict mode
Please help.
This library / directive looks really awesome - great work! I'm curious if this was released before or after Angular Material and how the two interact? It seems like the two are both valuable, while trying to do quite different things. Also both seem relatively complex, I would imagine merging them into one would be difficult. Thoughts? Am I missing something?
JSHint is currently reporting 22 errors (see below). These should be fixed. I recommend introducing a simple gulp script that can be run before checking in any code. See https://github.com/archfirst/angular-material-template for my preferred setup. If you'd like, I can set this up and send a pull request.
$ jshint *.js
angular-material-icons.js: line 7, col 1, Use the function form of "use strict".
angular-material-icons.js: line 83, col 10, Missing semicolon.
angular-material-icons.js: line 9, col 1, 'angular' is not defined.
angular-material-icons.js: line 61, col 29, 'SVGMorpheus' is not defined.
angular-material-icons.js: line 109, col 22, 'angular' is not defined.
angular-material-icons.min.js: line 276, col 405, Expected an assignment or function call and instead saw an expression.
angular-material-icons.min.js: line 277, col 176, Expected an assignment or function call and instead saw an expression.
angular-material-icons.min.js: line 277, col 177, Missing semicolon.
angular-material-icons.min.js: line 277, col 300, Missing semicolon.
angular-material-icons.min.js: line 277, col 304, Missing semicolon.
angular-material-icons.min.js: line 277, col 416, Expected an assignment or function call and instead saw an expression.
angular-material-icons.min.js: line 277, col 417, Missing semicolon.
angular-material-icons.min.js: line 278, col 18, Expected an assignment or function call and instead saw an expression.
angular-material-icons.min.js: line 278, col 19, Missing semicolon.
angular-material-icons.min.js: line 278, col 58, Expected an assignment or function call and instead saw an expression.
angular-material-icons.min.js: line 278, col 100, Expected an assignment or function call and instead saw an expression.
angular-material-icons.min.js: line 278, col 215, Missing semicolon.
angular-material-icons.min.js: line 278, col 256, Expected an assignment or function call and instead saw an expression.
angular-material-icons.min.js: line 278, col 294, Expected an assignment or function call and instead saw an expression.
angular-material-icons.min.js: line 278, col 295, Missing semicolon.
angular-material-icons.min.js: line 278, col 297, Missing semicolon.
demo.js: line 19, col 10, Missing semicolon.
22 errors
Hi buddy,
the current release of angular-material-icons
still has angular 1.3 dependency.
You have to release again to let bower read the new dep allowing angular 1.4.
Although it is not a big deal for bower
and npm
it breaks dependencies for rails apps that uses https://rails-assets.org/
I found that all the icons are offset above where they should be in 0.9.0-rc2 (I assume this isn't going to change). The fix I found to get this working properly with angular material is the following CSS snippet:
ng-md-icon {
fill: currentColor;
vertical-align: middle;
display: inline-block;
line-height: 1;
}
This fixes the icon color not being inherited from the text and the bad positioning.
I try to use md-ng-icon directive inside md-button of Angular Material and button tag of Lumx. I keep on to receive the following error when I implement ng-click event at md-button or button tag:
Uncaught TypeError: a.target.className.indexOf is not a function
This error message occurred at bubble_compiled.js:176
Here is my template segment:
Hi, I'm having this problem and I do not have ideia about how to solve this.
I have an md-fab-toolbar as an md-card header, using "menu" icon but when the toolbar collapses, the icon disappear. Does somebody knows whats is going on?
then:
then:
Even when I click again, the icon does not appear anymore, I need to refresh the page to do so
In this statement
https://github.com/klarsys/angular-material-icons/blob/v0.6.0/angular-material-icons.js#L68-L72
error is swallowed without logging. this made my debugging difficult today.
today I made a blunder of enclosing the attributes of json in the options attribute within single quotes
(which is not allowed as per json rules) so my JSON.parse failed.
as this was so silent(due to swallowing) I could not find the reason without putting a debug point. Had you logged the error it would have been easier to debug .
Is there any reason why this error is swallowed without logging ?
So I did nothing but follow the steps you have here:
https://klarsys.github.io/angular-material-icons/
I've include both libs (cuz i want animation):
<script src="//cdn.jsdelivr.net/angular-material-icons/0.4.0/angular-material-icons.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/SVG-Morpheus/0.1.8/svg-morpheus.js"></script>
I get no load errors at all so for sure both libs are loaded...
then i have your directive WITH the option attr. that should trigger the anination auto-magically :)
I see the icon fine but there is no animation. questions:
why?
are you internally using the code that I see needs to be used when using this animation library natively:
var myIcons = new SVGMorpheus('#myIconSet');
can you give me some code that works properly or tell me how to better debug why? is the animation just supposed to happen for me? i'm not sure what the triggers are may can you explain how that works?
sorry bout all the queries i just really dig the way this looks :)
Using the example of the original angular-material but using ng-md-icon for the burger svg causes to display it wrong vertically aligned.
Comparing the svg parameters of both svg elements there are some differences:
md-icon:
<svg ... x="0px" y="0px" width="100%" height="100%" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" fit="" preserveAspectRatio="xMidYMid meet" style="pointer-events: none; display: block;">...</svg>
ng-md-icon:
<svg ... viewBox="0 0 24 24" width="24" height="24">...</svg>
If the original attributes are set it displays correctly. Is this a bug or are there other workarounds to get it working?
Thx
The current angular-material-icons.min.js
in bower repo is broken.
I found ng-md-icon cannot vertical align middle while in the md-fab as the code i wrote:
<md-button class="md-fab md-primary md-fab-bottom-right" ng-href="tel:{{nativeInfo.customerPhone}}">
<ng-md-icon icon="call" style="fill:white" size="20"></ng-md-icon>
</md-button>
After Intercepted the html code generated, I found the inner svg element has no any display property set. I tried to fix this by adding the "display:block" as the css following:
.md-button.md-fab ng-md-icon svg{
display: block;
}
May I have your confirmation or suggestion ?
in bower.json the version spec is
"angular": ">1.3.x"
So any 1.3 angular version is not enough - meaning 1.4 is required.
Is this on purpose or is it a typo? (could be >=1.3.x)
I would be very interested to see an extension of the icon set using the community-led iconography set material desgin icons. The project is updated and extended regularly. Note that the path description of this set is not minimized (many vectors end with .333333334) so this would severly increase the filesize if not handled.
https://github.com/klarsys/angular-material-icons/blob/master/angular-material-icons.js#L713
At end of line there's missing equal sign
r"4.8"
→ r="4.8"
Hi!
Is it possible to have a nice SVGMorpheus effect with ONE rotation on click?
I don't want to change the icon, I only want to have the cool effect ;)
When setting the size of an icon it was not being centered in an element when it should have been (using layout-align="center center"). Setting the icon size to "48" produced an icon with the correct size, but the parent ng-md-icon element still had css properties (height/width) set to 24px.
A potential solution is as follows around line 38:
// size
if (attr.size !== undefined) {
size = attr.size;
}
changes to:
// size
if (attr.size !== undefined) {
size = attr.size;
element.css('height', size + 'px');
element.css('width', size + 'px);
}
This inlined the css styles and fixed the issue.
Cheers
Simon
Hi when I am trying to use picture_as_pdf icon I am unable to see the icon. It shows a 'question mark'.
Here is my one line code
<ng-md-icon
ng-if="isPdf" icon="picture-as-pdf"></ng-md-icon>
Can you tell me the correct string name for using pdf icon?
Shouldn't viewBox be the same size as the icon declaration size.
If I use size="20" the render is:
<ng-md-icon icon="person" size="20">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path d="....."></path></svg>
</ng-md-icon>
I suppose it would be better:
<ng-md-icon icon="person" size="20">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20"><path d="....."></path></svg>
</ng-md-icon>
Thanks
I was surprised to find that the select all icon was missing from this project. But after looking at the actual code, it appears to be there. It just wasn't included in the demo.
Would you be willing to accept a parameterized icon set similar to $mdIconProvider
? I would prefer to avoid including this library if it's going to inject a 200kb file that I don't have the ability to scale down for my specific build.
Much like the animations in font awesome, I'd like to have a rotating refresh
icon. Is this possible with this library currently?
First shoutout: great work with this compilation and for thoughtful SVG-morpheus integration
To improve styling the svg element the SVG should not be wrapped in the , for example alignment isn´t quite possible while svg is hosted in the "ng-md-icon" element
If I use angular-material-icons:
buffer.js:825
throw new TypeError('value is out of bounds');
^
TypeError: value is out of bounds
at checkInt (buffer.js:825:11)
at Buffer.writeUInt16LE (buffer.js:883:5)
at /usr/lib/node_modules/ionic/node_modules/ionic-app-lib/node_modules/archiver/node_modules/zip-stream/lib/headers.js:41:32
at Array.forEach (native)
at ZipHeaderCentralFooter.ZipHeader.toBuffer (/usr/lib/node_modules/ionic/node_modules/ionic-app-lib/node_modules/archiver/node_modules/zip-stream/lib/headers.js:28:15)
at Object.exports.encode (/usr/lib/node_modules/ionic/node_modules/ionic-app-lib/node_modules/archiver/node_modules/zip-stream/lib/headers.js:198:24)
at ZipStream._writeCentralDirectory (/usr/lib/node_modules/ionic/node_modules/ionic-app-lib/node_modules/archiver/node_modules/zip-stream/lib/zip-stream.js:220:22)
at ZipStream.finalize (/usr/lib/node_modules/ionic/node_modules/ionic-app-lib/node_modules/archiver/node_modules/zip-stream/lib/zip-stream.js:270:8)
at Zip.finalize (/usr/lib/node_modules/ionic/node_modules/ionic-app-lib/node_modules/archiver/lib/modules/zip/index.js:39:15)
at Archiver._onQueueEnd (/usr/lib/node_modules/ionic/node_modules/ionic-app-lib/node_modules/archiver/lib/modules/core/index.js:91:26)
Hi, ng-md-icon is not working with input icons:
normaly from material angularjs:
<md-input-container md-no-float>
<md-icon md-svg-src="/demo-partials/input/demoIcons/icons/ic_phone_24px.svg"></md-icon>
<input ng-model="user.phone" type="text" placeholder="Phone Number">
</md-input-container>
with icons:
<md-input-container md-no-float>
<ng-md-icon icon="phone"></ng-md-icon>
<input ng-model="user.phone" type="text" placeholder="Phone Number">
</md-input-container>
because the ng-md-icon is not the mg-icon element for material styles.
is there a solution for?
I know this is happily supported in Chrome, Firefox and all other evergreen browsers. What about IE8/IE9? Thanks.
I was testing this with one of my ownh icons, but i wasn't able to get the right height, even though I user the same code as the icons that are used in the solution.:
Also the icon is not located correctly:
<div><ng-md-icon icon="account_child" size="48"></ng-md-icon><br>account_child</div> <div class="test"> <ng-md-icon icon="Ajax123" size="48"></ng-md-icon><br>Ajax123 </div>
http://i65.tinypic.com/2znzb5i.png
The error is within the code in de d attribute of the path, If I replace the value in the d attribute of Ajax123 with the value of the d attribute of account_child it is working correctly.
My svg is originally 100x100
Hi,
I am trying to create a custom accordion with + and - buttons which will animate(with morpheus) on show and hide. Since the elements in the accordion are dynamically created, I am trying to change the individual icon, which resides in the group that was just shown or hidden.
So for this case I am not able to use icon={{scopeVariable}}.
I need to select the individual icon element(which I am doing) and then changing the icon attribute using:
if($('.'+classOfGrp+ptn).css('display') == 'none'){
var myEl = angular.element( document.querySelector( '#'+'ptn-group-icon-'+ptn ) );
myEl.attr('icon',"remove_circle");
}
else{
var myEl = angular.element( document.querySelector( '#'+'ptn-group-icon-'+ptn ) );
myEl.attr('icon',"add_circle");
}
When I inspect the element in Chrome, I could see that the attribute got changed. But nothing happens visually. The default icon stays there even though the icon attribute has changed in the dom.
Please help me with a workaround for my scenario. Thanks a lot.
component.ts(6,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
../node_modules/@angular/core/src/application_ref.d.ts(79,88): error TS2304: Cannot find name 'Promise'.
../node_modules/@angular/core/src/application_ref.d.ts(137,42): error TS2304: Cannot find name 'Promise'.
../node_modules/@angular/core/src/application_ref.d.ts(196,33): error TS2304: Cannot find name 'Promise'.
../node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts(24,15): error TS2304: Cannot find name 'Map'.
../node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts(26,16): error TS2304: Cannot find name 'Map'.
../node_modules/@angular/core/src/di/reflective_provider.d.ts(115,123): error TS2304: Cannot find name 'Map'.
../node_modules/@angular/core/src/di/reflective_provider.d.ts(115,165): error TS2304: Cannot find name 'Map'.
../node_modules/@angular/core/src/facade/async.d.ts(34,33): error TS2304: Cannot find name 'Promise'.
../node_modules/@angular/core/src/facade/async.d.ts(35,45): error TS2304: Cannot find name 'Promise'.
../node_modules/@angular/core/src/facade/collection.d.ts(1,25): error TS2304: Cannot find name 'MapConstructor'.
../node_modules/@angular/core/src/facade/collection.d.ts(2,25): error TS2304: Cannot find name 'SetConstructor'.
../node_modules/@angular/core/src/facade/collection.d.ts(4,27): error TS2304: Cannot find name 'Map'.
../node_modules/@angular/core/src/facade/collection.d.ts(4,39): error TS2304: Cannot find name 'Map'.
../node_modules/@angular/core/src/facade/collection.d.ts(7,9): error TS2304: Cannot find name 'Map'.
../node_modules/@angular/core/src/facade/collection.d.ts(8,30): error TS2304: Cannot find name 'Map'.
../node_modules/@angular/core/src/facade/collection.d.ts(11,43): error TS2304: Cannot find name 'Map'.
../node_modules/@angular/core/src/facade/collection.d.ts(12,27): error TS2304: Cannot find name 'Map'.
../node_modules/@angular/core/src/facade/collection.d.ts(14,23): error TS2304: Cannot find name 'Map'.
../node_modules/@angular/core/src/facade/collection.d.ts(15,25): error TS2304: Cannot find name 'Map'.
../node_modules/@angular/core/src/facade/collection.d.ts(100,41): error TS2304: Cannot find name 'Set'.
../node_modules/@angular/core/src/facade/collection.d.ts(101,22): error TS2304: Cannot find name 'Set'.
../node_modules/@angular/core/src/facade/collection.d.ts(102,25): error TS2304: Cannot find name 'Set'.
../node_modules/@angular/core/src/facade/lang.d.ts(11,17): error TS2304: Cannot find name 'Map'.
../node_modules/@angular/core/src/facade/lang.d.ts(12,17): error TS2304: Cannot find name 'Set'.
../node_modules/@angular/core/src/facade/lang.d.ts(68,59): error TS2304: Cannot find name 'Map'.
../node_modules/@angular/core/src/facade/promise.d.ts(9,14): error TS2304: Cannot find name 'Promise'.
../node_modules/@angular/core/src/facade/promise.d.ts(15,32): error TS2304: Cannot find name 'Promise'.
../node_modules/@angular/core/src/facade/promise.d.ts(16,38): error TS2304: Cannot find name 'Promise'.
../node_modules/@angular/core/src/facade/promise.d.ts(17,35): error TS2304: Cannot find name 'Promise'.
../node_modules/@angular/core/src/facade/promise.d.ts(17,93): error TS2304: Cannot find name 'Promise'.
../node_modules/@angular/core/src/facade/promise.d.ts(18,34): error TS2304: Cannot find name 'Promise'.
../node_modules/@angular/core/src/facade/promise.d.ts(18,50): error TS2304: Cannot find name 'Promise'.
../node_modules/@angular/core/src/facade/promise.d.ts(19,32): error TS2304: Cannot find name 'Promise'.
../node_modules/@angular/core/src/facade/promise.d.ts(19,149): error TS2304: Cannot find name 'Promise'.
../node_modules/@angular/core/src/facade/promise.d.ts(20,43): error TS2304: Cannot find name 'Promise'.
../node_modules/@angular/core/src/linker/compiler.d.ts(13,59): error TS2304: Cannot find name 'Promise'.
../node_modules/@angular/core/src/linker/component_resolver.d.ts(9,58): error TS2304: Cannot find name 'Promise'.
../node_modules/@angular/core/src/linker/component_resolver.d.ts(13,49): error TS2304: Cannot find name 'Promise'.
../node_modules/@angular/core/src/linker/dynamic_component_loader.d.ts(61,148): error TS2304: Cannot find name 'Promise'.
../node_modules/@angular/core/src/linker/dynamic_component_loader.d.ts(102,144): error TS2304: Cannot find name 'Promise'.
../node_modules/@angular/core/src/linker/dynamic_component_loader.d.ts(107,139): error TS2304: Cannot find name 'Promise'.
../node_modules/@angular/core/src/linker/dynamic_component_loader.d.ts(108,135): error TS2304: Cannot find name 'Promise'.
../node_modules/@angular/core/src/linker/systemjs_component_resolver.d.ts(18,53): error TS2304: Cannot find name 'Promise'.
../node_modules/@angular/core/src/linker/systemjs_component_resolver.d.ts(26,53): error TS2304: Cannot find name 'Promise'.
../node_modules/rxjs/Observable.d.ts(10,66): error TS2304: Cannot find name 'Promise'.
../node_modules/rxjs/Observable.d.ts(66,60): error TS2304: Cannot find name 'Promise'.
../node_modules/rxjs/Observable.d.ts(66,70): error TS2304: Cannot find name 'Promise'.
[Finished in 2.0s]
And My tsconfig.ts file code is Here
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}
I need to use some material icons that are not in the latest release. All the icons I need are already on the master branch. I just need a new release created so that I can use them through npm.
How can I enable SVG morpheus only when Icon(Button ) is clicked , thanks
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.