Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

angular-material support documentation unclear #3994

oliversalzburg opened this Issue Mar 5, 2019 · 3 comments


None yet
3 participants
Copy link

commented Mar 5, 2019

The Angular Material example given under Frameworks at does not work unless you use the file specifically linked at that location.

As was already noted years ago, the provided .svg (from npm for example) marks individual glyphs with the glyph-name attribute, while the MdIconService will try to look up glyphs by their id property. So unless you use that specific file, you're going to run into trouble. That is not clear enough IMHO.

Downloading a separate .svg, that is not bound to the npm package, is a poor solution, as the (non-existent) connection is not clear to every developer.

The MdIconService can't be easily decorated to accept alternative lookup approaches, due to the poorly designed code. And the remaining integration methods are not obvious, broken or require extensive build steps to implement them.

Overall, a pretty poor state. I'd suggest a better approach, but I haven't found it yet.


This comment has been minimized.

Copy link

commented Mar 5, 2019

Unfortunately I don't use that package, so wasn't aware of this. Open to any suggestions or PR's to the documentation. Is there anything I can do to update @mdi/angular-material to be more useful?

When possible for application size if it's possible try to use @mdi/js is our suggestion.

Should probably invest some time into wrapping up a component like @mdi/react, but that would be for Angular 6.


This comment has been minimized.

Copy link

commented Mar 5, 2019

I tried several approaches. I built a component and service based on the suggested mdi.js, loaded the .svg manually and registered all SVG data in the MdiService. But I still couldn't use it, because the styling of the SVG content was off (it extended beyond the viewbox). I assumed the same would happen with the custom mdi.svg from the documentation.

Ultimately, the most reliable and easiest approach was to use the SCSS to produce a custom CSS (with the correct paths to the font files) and then use the mdIcon component like so:

<md-icon class="mdi mdi-plus">

This has the side-effect of adding the default class material-icons to the md-icon node. This appears to be required and the .material-icons class is ideally copied from the Material Icons into your own project. Missing to include this class will cause the icons to be scaled incorrectly in angular-material.

Initially, I assumed it would be beneficial to declare a custom icon font in the $mdIconProvider, so it would automatically add the mdi class to the mdIcon, but this is counter-productive, as it results in only the mdi class on the node (no material-icons class).

So, unless I missed anything, the SVG approach does not yield any usable results, no matter how you spin it.


This comment has been minimized.

Copy link

commented Mar 31, 2019

This seems to be related to the viewBox issue discussed in #4047.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.