Material Stepper Icon: Custom SVG change

[krezzsy]

What is the expected behavior?

When mat-icon "svgIcon" property is updated for custom svg, the updated icon should be updated on the page.

What is the current behavior?

When mat-icon "svgIcon" property is updated via interpolation or renderer 2 the custom svg is not re-rendered. I'm able to see that "svgIcon" value of mat-icon changes in debug mode, but the svg isn't changed.

What are the steps to reproduce?

html:

<mat-step #addressCheckoutStep>
      <ng-template matStepLabel>
        <mat-icon svgIcon="{{addressSvgIcon}}">Address</mat-icon>
      </ng-template>
      <app-address></app-address>
</mat-step>

ts component:

onClick(){
    this.addressSvgIcon = 'another-svg-icon';
  }

Both svg icons are added to mat-icon-registry and displayable. The issue is related only to dynamic change of "svgIcon" property.

[jelbourn]

@krezzsy can you share a reproduction in stackblitz?

[krezzsy]

@jelbourn https://stackblitz.com/edit/angular-stepper-custom-icons-1xxv1t

[PayaamEmami]

I'm also running into this issue.

I have one mat-icon that is suppose to render different svgIcons dependent upon the value passed into the component, however even though the value is changing the icon is not rendering properly.

In my case, when I have two icons on the same page, they only properly render when they are the same svgIcon value. If they are different, one of them will not properly render.

[krezzsy]

@jelbourn any updates on it?

[PayaamEmami]

I resolved my issue thanks to this comment .

The only difference for me was that my SVGs were using the same id attribute AND the same class attribute. I only had to change the class name for one of the SVG files and it resolved the issue.

Both of my SVG's had a class named "cls-1", so I changed one of them to "cls-2":

SVG1:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 134"><defs><style>.cls-1{fill:#fff;fill-rule:evenodd;}</style></defs><title>Glitch_White_RGB</title><path class="cls-1" d="M89,77l-9,23v94h32v17h18l17-17h26l35-35V77H89Zm107,76-20,20H144l-17,17V173H100V89h96v64Zm-20-41v35H164V112h12Zm-32,0v35H132V112h12Z" transform="translate(-80 -77)"/></svg>

SVG2:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 134"><defs><style>.cls-2{fill:#6441a4;fill-rule:evenodd;}</style></defs><title>Glitch</title><path class="cls-2" d="M89,77l-9,23v94h32v17h18l17-17h26l35-35V77H89Zm107,76-20,20H144l-17,17V173H100V89h96v64Zm-20-41v35H164V112h12Zm-32,0v35H132V112h12Z" transform="translate(-80 -77)"/></svg>

In my case, I was using Twitch's SVG files downloaded from their official branding page.

@krezzsy I noticed in your stackblitz example your SVG's are using the same id attribute value just like the example I linked. Does changing it help resolve your issue?

[krezzsy]

@PayaamEmami Thanks, that helps!

[PayaamEmami]

@krezzsy Awesome! Should we have @jelbourn close this issue?

[krezzsy]

The issue has been resolved

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