Clarity: Provide support to dynamically set the shape property of a clr-icon

[dennitsa]

Select one ... (check one with "x")

[ ] bug
[ x] feature request
[ ] enhancement

Expected behavior

It would be nice to be able to pass in the shape of a clarity icon.
This way we won't have to define multiple icons and exclude them with *ngIf or other similar mechanism, instead we could define an icon with interpolated shape and based on logic in the controller class set its value.

Actual behavior

Trying to write something like this in the html template:

<clr-icon shape="{{iconShape}}"></clr-icon>
or
<clr-icon [shape]="iconShape"></clr-icon>

Causes browser to fail with

Can't bind to 'shape' since it isn't a known property of 'clr-icon'.

Reproduction of behavior

Here is example on plnkr(see app.component.ts and app.component.html files for the change): https://plnkr.co/edit/H5dy79?p=preview

Environment details

• Angular version: 2.2.3

• Clarity version: 0.7.3

• OS and version:

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

[adityarb88]

@dennitsa: you have to use attribute binding to do that. Please check this plnkr: https://plnkr.co/edit/3Z9gCqlBHuQreWM4tYRz?p=preview

<clr-icon [attr.shape]="iconShape"></clr-icon>

More info here: https://angular.io/docs/ts/latest/guide/template-syntax.html

[dennitsa]

Great, thanks!

[stanleyxu2005]

Just FYI for angular 1 users: we can use <clr-icon ng-attr-shape="{{iconShape}}"></clr-icon>

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.