Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Setting background to fully enclosed parts of icon to prevent trransparency #216

Closed
Mgamerz opened this issue Aug 24, 2020 · 2 comments
Closed

Comments

@Mgamerz
Copy link

Mgamerz commented Aug 24, 2020

Is your feature request related to a problem? Please describe.
I am using the IonIcon pack (not sure if this is specific to it or others), but I'm wondering if there is a way to 'fill' the fully enclosed transparent areas of an icon. Here's an example.

image

As you can see, the middle of the checkmark just looks bad as it has no background. I'm not sure how I could fill this in with a color. Setting the background fills the area outside the icon, so it also looks bad. I use several icons in this place, so manually filling it isn't really an option unless I just use static images, but since I already have an icon that I would like to use I figured maybe I could use that instead.

Describe the solution you'd like
Have something like an 'EnclosedBackground' icon, which is the 'background' color of the fully enclosed area. This is probably a very simple idea in theory but is probably way more difficult if not reinventing the whole wheel in practice.

Describe alternatives you've considered
I've tried to shrink the icon and use generic 'shapes' (like Circle, Triangle) but the ionicon pack doesn't include any icons for these kinds of shapes. They also don't work if I decide to change what icon I'd like to use.

Additional context
This isn't really pressing but I'm not really sure how I would accomplish this, or if maybe I'm missing something.

@timunie
Copy link
Contributor

timunie commented Sep 28, 2020

@Mgamerz would it be an option for you to use Inkscape and use the Icon then from your App.xaml? I can provide a short sample with details if you like.

I do it that way to have two colored icons.

Happy coding
TIm

@punker76
Copy link
Member

punker76 commented May 7, 2024

@Mgamerz I know it's late, but you can use different icon packs together to get a workaround for this:

<Grid VerticalAlignment="Center" HorizontalAlignment="Center">

    <iconPacks:PackIconMaterial Kind="CheckboxBlankCircle" Width="128" Height="128" Foreground="Green" HorizontalAlignment="Center" VerticalAlignment="Center" />
    <iconPacks:PackIconIonicons Kind="CheckmarkiOS" Width="80" Height="80" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" />

</Grid>

image

@punker76 punker76 closed this as completed May 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

No branches or pull requests

3 participants