search

angular-material-extensions / fab-menu

Angular Component that represents a menu of buttons triggered by a floating action button | built with material design
https://angular-material-extensions.github.io/fab-menu/
MIT License
48 stars 17 forks source link

Support material symbols #56

Open epictecch opened 1 year ago

epictecch commented 1 year ago

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.

epictecch commented 1 year ago

Just came across another component which offers a very nice solution for the same problem. ngx-mat-select-search offers the possibility to pass a whole item which is then used as replacement for the default icon like this: https://github.com/bithost-gmbh/ngx-mat-select-search/blob/a6f5776f1e9b98eb45cbad84332649bd8e3590c2/src/app/mat-select-search/mat-select-search.component.html#L47