Open ruisebastiao opened 6 years ago
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
I will investigate how I can add custom icon in ngc-float-button
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.
original
<mat-icon>{{icon}}</mat-icon>\n
modification
<mat-icon [svgIcon]=\"icon\"></mat-icon>\n
@xxNoxiouSxx please were you able to get svgIcon to work with it?
@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">
</nav>
and then just pass your svg icon to the component via the icon input
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.
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:
so i can use it like: