How to set shape attribute of clr-icon

Question

I am using <clr-icon shape=""/>. I would like to make its shape dynamic. If I specify <clr-icon [shape]="shapeValue"/> it throws an error shape is not a known property of clr-icon

Answer 1

This is not really a function of clarity, it's because the component clr-icon makes use of the shape HTML attribute without declaring it an @Input (it's not an angular component, it's a WebComponent)

To be able to set an HTML attribute dynamically, you have to use a special format, [attr.shape] so that Angular will not look for an @Input property.

See https://plnkr.co/edit/8qepCA9kgaQejzwXdp5H?p=preview