request(feature:color-picker) Customizable selected color icon

[motabass]

There should be a way to use color-picker without material-icon-font loaded
Because in our Project we do not use the Material-Icon-Font due to only using SVGs for icons it would be great if we could change the icon shown on the currently selected color in the picker to any other mat-icon using an SVG. Rigth now material icon "done" is used but shows up as "done"-text when material-icon-font is not loaded.

[tiaguinho]

Hi @motabass
As you can see on the related commit, I implement a way to change the selected color icon.
On #133 I also implement an option to disable the selected icon.

Let me know if this solve your problem.

[motabass]

Hi @tiaguinho

Thanks for your work. This solves our Problem by being able to disable the icon. Though it would be awesome if we could use any SVG registered in MatIconRegistry, not only Material-Font-Icons because we don't use the Material-Font at all. It should be pretty easy to implement it the same way as SELECTED_COLOR_ICON. Could be SELECTED_COLOR_SVG_ICON

[tiaguinho]

You can register SVG in MatIconRegistry https://material.angular.io/components/icon/overview#svg-icons.
If you do this, you can use the icon as SELECTED_COLOR_ICON.

You can test this possibility by cloning the repository and trying on the demo app.

Can you make this test?

Thank you.

[motabass]

I think it should not work with SVGs the way its implemented right now. Check the SVG example here: https://material.angular.io/components/icon/examples

mat-icon uses svgIcon-Input for SVG. Font ligatures only work with icon fonts as stated here:
https://material.angular.io/components/icon/api#MatIcon

So it would have to be
<mat-icon *ngIf="selectedColor === color; else emptyIcon" [svgIcon]="selectedIcon"></mat-icon>
to work...which would in turn not work with Font-Ligatures. Thats why there is a need for a Seperate flag i think.

I'm not much of a fan of the mat-icon API but thats the way they decided to do it.

[motabass]

Are you looking into this or should i maybe open a new Issue for the SVG-Feature?

[tiaguinho]

Please open a new issue.
I'll try to implement this feature today. 😉

[motabass]

Thats great! I opened the Issue:

#134