Mat Icon doesn't encapsulate svg styles

[marc-wilson]

Bug, feature request, or proposal:

Bug? Maybe a proposal?

What is the expected behavior?

SVG Icons that are added to the matIconRegistry should have isolated styles. Currently, I have some SVG's that have some inline css and when I add them to a page using the <mat-icon svgIcon="<name>"></mat-icon> it overwrites other styles on the page. This shouldn't happen. The styling in the svg should only work within the mat-icon and not touch other things outside of it.

What is the current behavior?

Inline CSS within an SVG that is added to the mat-icon registry overwrittes other mat-icons/styles on the page.

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

I would love to provide a stackblitz for this but stackblitz won't let me add an svg icon.

1.) Create 2 svg files with some inline css (example below)
2.) Add it to the MatIconRegistry
3.) Render both svg's on a page using the <mat-icon svgIcon="<name>"></mat-icon> syntax

Notice how svg icon #1 overwrites svg icon #2

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

It shouldn't do this. If you add the SVG Icon using object or img, it works just fine.

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

Currently on version 6.1 but present in all versions that I've worked with.

Is there anything else we should know?

SVG Icon #1:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve">
<style type="text/css">
	.st0{fill:blue;}
</style>
<path class="st0" d="M400,266.8V0L0,400l133.2,133.2L400,266.8z"/>
<path class="st0" d="M400,533.2V800l400-400L666.8,266.8L400,533.2z"/>
</svg>

SVG Icon #2:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve">
<style type="text/css">
	.st0{fill:red;}
</style>
<path class="st0" d="M400,266.8V0L0,400l133.2,133.2L400,266.8z"/>
<path class="st0" d="M400,533.2V800l400-400L666.8,266.8L400,533.2z"/>
</svg>

app.module.ts:

export class AppModule {
  constructor(_matIconRegistry: MatIconRegistry, _domSanitizer: DomSanitizer) {
    _matIconRegistry.addSvgIcon(
      'svg1',
      _domSanitizer.bypassSecurityTrustResourceUrl('../assets/icons/svg1.svg')
    );
    _matIconRegistry.addSvgIcon(
      'svg2',
      _domSanitizer.bypassSecurityTrustResourceUrl('../assets/icons/svg2.svg')
    );
}

component.html:

<mat-icon svgIcon="svg1"></mat-icon>
<mat-icon svgIcon="svg2"></mat-icon>

[jelbourn]

This is working as intended. All of the Angular Material components are ViewEncapsulation.None in order to make customization easier. I would recommend against including any broad styles in SVG assets, and instead separating the responsibilities of image content and custom styles.

[marc-wilson]

So it is not recommended to have styles within an SVG? Forgive my ignorance as I've done very little with SVG's but the SVG's in question (for this scenario) came directly from our designers. Are you saying that SVG's should be cleansed of all inline CSS and every SVG that requires some type of style be done within its own file? I guess in my scenario, I could just move it out of the <style> tag and put it directly on the path. That would be another way to prevent it from messing with other components.

Also, is there any way to use a different ViewEncapsulation on the MatIcon Component?

[jelbourn]

The view encapsulation cannot be changed downstream.

I would personally recommend avoiding inline styles inside an SVG element if you plan on inlining the SVG.

[angular-automatic-lock-bot]

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