MahApps/MahApps.Metro.IconPacks

Setting background to fully enclosed parts of icon to prevent trransparency

Mgamerz opened this issue · 2 comments

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.

@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

@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