Unable to change signpost icon of Clarity Design System

Question

I am unable to change the icon of the signpost element i.e. clr-signpost of Clarity Design System (Version: 0.9.0), both in Chrome & IE. The signpost is showing the default info (i) icon. No error is displayed in console.

In my Angular 4 project I am using the signpost element inside a column of a datatable of PrimeNG (Version: 4.1.1).

Does anyone have any ideas in this issue?

Here is the HTML:

<!-- PrimeNG Datatable -->
<p-datatable>
   ....
   ....
   <p-column field="story" [style]="{'overflow':'visible', 'text-align':'center'}" header="Story" styleClass="col-button">
       <ng-template let-item="rowData" pTemplate="body">
           <div style="padding: 0px; margin: 0px; text-align:center;">                                
                <clr-signpost>
                    <clr-icon clrSignpostTrigger shape="avatar"></clr-icon>
                    <clr-signpost-content *clrIfOpen>
                       <p><code class="clr-code">{{item.story}}</code></p>
                    </clr-signpost-content>
                </clr-signpost>
           </div>                                                    
      </ng-template>
   </p-column>               
</p-dataTable> 

Answer 1

We added custom signpost triggers in an alpha release of v10. It looks like you are using v9 and Signposts only have a default trigger. If you upgrade to v10 or later you will enable the custom trigger declaration on your component.