klarsys / angular-material-icons Goto Github PK

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.

ng-md-icon inside md-button not centered like normal md-icon in md-button

I know this is happily supported in Chrome, Firefox and all other evergreen browsers. What about IE8/IE9? Thanks.

Is it possible to pass class name like md-primary, md-accent , .. as specified in Angular Material instead of filling color by our own?

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

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!

The current angular-material-icons.min.js in bower repo is broken.

How can I enable SVG morpheus only when Icon(Button ) is clicked , thanks

Would it be possible to use the following icons instead?

https://www.google.com/design/icons/

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

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!
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 ;)

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.

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

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

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

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.

Hi,

Angular Material's "md-icon" supports a disabled look but it doesn't look like ng-md-icons does.

See demo.

I've set "ng-disabled="true" on the "md-button" directive but it doesn't make the icon look disabled.

A fix for this went into Angular Material's repo.

Thanks,
Cathal.

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?

Much like the animations in font awesome, I'd like to have a rotating refresh icon. Is this possible with this library currently?

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

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

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

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.

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)

Please see demo

The icon should be centered inside the md-button.

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.

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.

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 ?

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>

Try latest bower version and icons: trending_neutral are not displayed anymore.

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/

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 :

• either without any icon, the developper being responsible to declare the icons he wants with ngMdIconServiceProvider.addShapes
• or with the expected icons only.

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

Is this supported to use in angular2?

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:

1. why?

2. are you internally using the code that I see needs to be used when using this animation library natively:
   var myIcons = new SVGMorpheus('#myIconSet');

3. 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 :)

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 ?

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

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 there
Please allow angular 1.4 in dependencies

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"

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)

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.

It would be nice to add an option to align icon to the center of containing element.

This would make it easier to align with other inline items:

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.

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?

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