[Feature Request][icon] Configurable styling of icons

[bashmish]

originally created by @ruphin on July 4, 2019

I need some way to be able to configure reusable icons exported by a shared library, at least the "fill" property so I can give them a color.

My use case is this:

import { userIcon, businessIcon } from 'my-lib/icons.js';

const profiles = [
  { icon: userIcon, name: 'Personal' },
  { icon: businessIcon, name: 'Business 1' },
  { icon: businessIcon, name: 'Business 2' },
];

html`<my-profile-selector .profileList="${profiles}"></my-profile-selector>`

The <my-profile-selector> will simply render the icons it gets into <lion-icon> elements. That means they need to be SVGs that are already colored, because the person who provides the profiles cannot use CSS to style the content of the <my-profile-selector>.

This works for me currently as a workaround:

import { businessIcon } from 'my-lib/icons.js';

const orangeBusinessIcon = `<div style="fill: orange;">${businessIcon}</div>`;

But it would be nicer if the reusable icons had some way to configure them.
Here is a strawman:

import { styledBusinessIcon } from 'my-lib/icons.js';

const orangeBusinessFinance = styledBusinessIcon(css`fill: ${orange}`);

[erikkroes]

Hi,

We are closing this issue because we're changing the way we handle feature requests. Your issue will get the "votes needed" label, and people can add 👍 reactions to vote and show interest. It will be reopened when this feature gets picked up.

This we way we clearly focus on bugs in our open issues. At the same time we can see what community interest there is for new features.

Thanks!