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

md-icon used with addSvgIconSetInNamespace and <symbol> are invisible #4680

Closed
adamdport opened this issue May 19, 2017 · 2 comments · Fixed by #4699
Closed

md-icon used with addSvgIconSetInNamespace and <symbol> are invisible #4680

adamdport opened this issue May 19, 2017 · 2 comments · Fixed by #4699
Assignees

Comments

@adamdport
Copy link

Md-icons loaded using addSvgIconSetInNamespace appear in the DOM but are not visible. I suspect this is because the <symbol> tags are included, which will not be rendered without the <use> tag.

a symbol element itself is not rendered. Only instances of a symbol element (i.e., a reference to a symbol by a element) are rendered.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol

I made a plunkr to demonstrate the issue: https://plnkr.co/edit/KYyfI0uBq2GYM2ElC1k3?p=preview

@adamdport adamdport changed the title md-icon used with addSvgIconSetInNamespace are invisible md-icon used with addSvgIconSetInNamespace and <symbols> are invisible May 19, 2017
@adamdport adamdport changed the title md-icon used with addSvgIconSetInNamespace and <symbols> are invisible md-icon used with addSvgIconSetInNamespace and <symbol> are invisible May 19, 2017
@adamdport
Copy link
Author

After referencing the docs, I've managed to make it work by modifying my svg file to include a <defs> tag and renamed all my <symbol> tags to <svg>.

https://plnkr.co/edit/jHtKsmqrXXxoVF8tJhNb?p=preview

Is there any plan to support both formats?

@crisbeto crisbeto self-assigned this May 20, 2017
crisbeto added a commit to crisbeto/material2 that referenced this issue May 20, 2017
Fixes icons not being rendered if they're defined as a `<symbol>` inside the source file.

Fixes angular#4680.
tinayuangao pushed a commit that referenced this issue May 23, 2017
* fix(icon): handle icons as <symbol> nodes

Fixes icons not being rendered if they're defined as a `<symbol>` inside the source file.

Fixes #4680.

* chore: fix IE issues
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 5, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants