In our project we used material icons and now we want to switch to the new material symbols.
By default, the <mat-icon> tag - as it is used by the fab-menu project - uses material icons. However, we would like to get rid of the material icons in our project.
It would be nice if users of the fab-menu were able to use material symbols.
I think there are several ways how you can specify that the <mat-icon> tag shall use material symbols and whether you want to use the outlined, rounded or sharp version. One possibility is to use CSS classes. E.g. <mat-icon class="material-symbols-outlined">edit</mat-icon>.
One solution approach might be to offer a new @Input in the MatFabMenuComponent which allows users to pass one (or several?) CSS classes which are then applied to the <mat-icon> tags in mat-fab-menu.component.html and mat-mini-fab-menu.component.html. I think this could also enable further customization for other use cases.
In our project we used material icons and now we want to switch to the new material symbols.
By default, the
<mat-icon>tag - as it is used by the fab-menu project - uses material icons. However, we would like to get rid of the material icons in our project.It would be nice if users of the fab-menu were able to use material symbols.
I think there are several ways how you can specify that the
<mat-icon>tag shall use material symbols and whether you want to use the outlined, rounded or sharp version. One possibility is to use CSS classes. E.g.<mat-icon class="material-symbols-outlined">edit</mat-icon>.One solution approach might be to offer a new
@Inputin theMatFabMenuComponentwhich allows users to pass one (or several?) CSS classes which are then applied to the<mat-icon>tags inmat-fab-menu.component.htmlandmat-mini-fab-menu.component.html. I think this could also enable further customization for other use cases.