question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to register and sanitize svg icons globally for use by all components?

See original GitHub issue

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

A way to register and sanitize svg icons globally for use by all components.

What is the current behavior?

Currently following the demo at: https://github.com/angular/material2/tree/master/src/demo-app/icon

Each component needs 2 imports:

import {DomSanitizer} from '@angular/platform-browser';
import {MdIconRegistry} from '@angular/material';

and constructor code for each icon:

constructor(mdIconRegistry: MdIconRegistry, sanitizer: DomSanitizer) {
    mdIconRegistry.addSvgIcon('icon1',sanitizer.bypassSecurityTrustResourceUrl('assets/icon1.svg'));
    mdIconRegistry.addSvgIcon('icon2',sanitizer.bypassSecurityTrustResourceUrl('assets/icon2.svg'));
}

What is the use-case or motivation for changing an existing behavior?

To reduce boilerplate and repetition. Our company uses a library of individual custom svg icons used by different applications and frameworks.
Would like to be able to register all icons upfront for easy use in any component template.

Which versions of Angular, Material, OS, browsers are affected?

All

Is there anything else we should know?

#2521

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:6
  • Comments:12 (7 by maintainers)

github_iconTop GitHub Comments

8reactions
mtrdp642commented, Jan 12, 2017

As long as you register the icons in the root component (usually app.component.ts), the icons are able to be used for all child components. Example

4reactions
pavel-agarkovcommented, Jul 18, 2018

Registration inside module constructor works as well. Also you will be able to use icons registered this way in other modules if they import the module with registration.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Creating SVG Icon Components And SVG Icon Sprites In ...
I decided it was time to start wrapping my head around SVG - in particular SVG icons - and how they can be...
Read more >
How to use SVGs in React | Sanity.io guide
This article will explore how to use SVG in React in three examples.
Read more >
How To Use Custom SVG Icons in Angular Material
Now, we can register our custom "unicorn" icon with the MatIconRegistry service provided by Angular Material. Open app.component.ts : nano src/ ...
Read more >
How to add customizable SVG Icons in Svelte JS App
Step 3: Using inside Svelte components ... With a little bit of work, we can use SVG icons in a better way with...
Read more >
Dynamically Loading SVG Icons with Vue.js
After we've installed vue-svgicon , we can use it to automatically generate icon components of SVG files for us.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found