[enhancement] Get a button content more flexible

[ruisebastiao]

https://github.com/GustavoCostaW/ngc-float-button/blob/e65233722faae6d92344971315a06b256ef709aa/components/ngc-float-button.component.ts#L28-L30

I think the content of the button should be more flexible, in my case i want to use a Font Awesome icon so i propose to have something like this:

<a class="fab-toggle" (click)="toggle()">
   <ng-content select="[fab-content]"></ng-content>
</a>

so i can use it like:

 <ngc-float-item-button content="Add shower" (click)="addShower()">
    <i class="fa fa-shower" fab-content></i>
</ngc-float-item-button>

[GustavoCostaW]

Hey @ruisebastiao thx for the issue, that's great feedback, but the ngc-float-button needs to AngularMaterial and AngularMaterial needs to Google Material Icons, Angular Material uses Google Material Icons in component for example.

I will investigate how I can add custom icon in ngc-float-button

[Marshal27]

In my scenario I needed access to my iconRegistry. I modified the HTML markup in the template of this library to the following and it gave the library the flexibility I needed. If you import fontawesome into the iconRegistry this may work for you.

Here is link to thread on stack overflow that outlines using iconRegistry to import fontAwesome that may help. https://stackoverflow.com/questions/43837076/how-to-correctly-register-font-awesome-for-md-icon

and here is the modification I made.

• Would be nice for the Icon Input to be able to handle the use of svgIcon in the future without a manual modification.

original <mat-icon>{{icon}}</mat-icon>\n modification <mat-icon [svgIcon]=\"icon\"></mat-icon>\n

[tendigitdude]

@xxNoxiouSxx please were you able to get svgIcon to work with it?

[Marshal27]

@tendigitdude

ngc-float-button.component.ts I modified the template template: <nav class="fab-menu" [class.active]="(state | async).display"> <button mat-mini-fab (click)="toggle()" [style.backgroundColor]="color"> <mat-icon [svgIcon]="icon"></mat-icon> </button> <ng-content></ng-content> </nav> and then just pass your svg icon to the component via the icon input <ngc-float-button icon="svgIcon">

this is a basic example of the concept. in my final implementation I needed to be able to dynamically change the icon by state and some other items... this required me to go further by creating additional inputs in the component for primary and secondary svgIcons and then modify the template logic further.