feat(material/icon): Ability to update icon's SVG when you register it using `MatIconRegistry`

azerafati commented 2 years ago

Description

When we use a mat-icon with a SVG registered through MatIconRegistry, mat-icon shows the SVG but won't update itself if we change it later, meaning we add a new SVG with the same name.

I believe the problem goes back to this line. https://github.com/angular/components/blob/6d8693d0b66e2835795858544a5dce594e76fb6f/src/material/icon/icon.ts#L441

Which seems logical to avoid performance issues. Probably we need to provide a way to reload the icons if we ever wanted to. I did this hack and it's working. Check out the second icon in the example stackblitz.

  @ViewChild(MatIcon) icon: MatIcon;
  ...

  iconRegistry.addSvgIconLiteral(
    'icon-name',
    sanitizer.bypassSecurityTrustHtml(NEW_SVG)
  );

   // @ts-ignore
  this.icon._updateSvgIcon(this.icon._svgIcon);

I would suggest adding a method to MatIcon component:

  reloadSvgIcon(): void{
      this._updateSvgIcon(this._svgIcon);
  }

Reproduction

Register the icon after it has been rendered. You can check out an example here on this stackblitz

Expected Behavior

When doing iconRegistry.addSvgIconLiteral('svg-icon', ...); it is expcted to see the already rendered mat-icon with svgIcon="svg-icon" to get updated and show the newly added SVG in iconRegistry.

Actual Behavior

mat-icon component won't show the new SVG.

Environment

Angular: 13.1.1
CDK/Material: 13.1.1
Browser(s): Chrome 98
Operating System : Ubuntu

Piyush132000 commented 2 years ago

Hii, if anyone not working on it then I would like to contribute I am new and want to contribute to the community.

Please reply.

angular-robot[bot] commented 2 years ago

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

angular-robot[bot] commented 2 years ago

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

angular / components