Upgraded to latest v3.0.0 and my icons are now way larger

[jpgarza93]

Hello, I recently updated from version 2.4.1 to 3.0.0, and now all my app icons appear much larger due to the new sizing mechanism. Previously, my app was using specific width and height values. Is there a setting I can adjust to ensure that the icon sizes behave the same as they did in version 2.4.1? This way, I can gradually transition my icons to use IconSize instead of the fixed width and height.

I am on AvaloniaUI, thanks

[jpgarza93]

Code in both versions:

<Style Selector="controls|IconText > materialIcons|MaterialIcon">
    <Setter Property="Width" Value="16" />
    <Setter Property="Height" Value="16" />
</Style>

<PackageVersion Include="Material.Icons.Avalonia" Version="2.4.1" />

<PackageVersion Include="Material.Icons.Avalonia" Version="3.0.0" />

[SKProCH]

Yeah, before that viewbox and path has some internal padding due to viewbox behavior. For now it should be constrained property.

To kinda mimic previous behavior you can experiment with a Padding property on MaterialIcon.

@sn4k3 probably you also can take a look?

[Whiletru3]

Hello,

Same request here, I want to keep pixel perfect icons using v3.0.0 vs 2.4.1

Here is what I have :

 <avalonia:MaterialIcon Background="Transparent"
                        Width="20"
                        Height="20"
                        VerticalAlignment="Center"
                        Foreground="White"
                        Kind="ChevronDown" />

What should I change to keep the pixel perfect ? I have more than 370 icons in my app so the change need to be "generic".
Thanks

[SKProCH]

Currently there is no way to make it pixel perfect with the previous implementation. As for

so the change need to be "generic".

You can write style and put it to App.axaml, App.Styles section, something like this:

<Style Selector="MaterialIcon">
  <Setter Property="Padding" Value="2" />
<Style/>

[SKProCH]

Currently there is no way to make it pixel perfect with the previous implementation. To kinda mimic previous behavior you can experiment with a Padding property on MaterialIcon.

If you want to globally it your app, you can write style and put it to App.axaml, App.Styles section, something like this:

<Style Selector="MaterialIcon">
  <Setter Property="Padding" Value="2" />
<Style/>

This issue would be tracked at #68

[jpgarza93]

Sounds good, thank you

[jpgarza93]

This didn’t quite work for me, so I created my own template. In case this helps someone else:

<!--
    Custom MaterialIcon ControlTheme — restores v2 rendering model.

    Material.Icons.Avalonia v3 changed the template Path from
        Width="24" Height="24" (no Stretch)  →  Stretch="Uniform" (no Width/Height)
    This causes each icon's built-in whitespace from the 24×24 design grid to be
    removed, making icons inconsistently sized (each icon has different geometry bounds).

    This theme restores the v2 approach: a 24×24 viewport with Stretch="None" so every
    icon preserves its natural proportions within the Material Design grid.

    Must be loaded AFTER <materialIcons:MaterialIconStyles /> to override the library theme.
-->
<Styles
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:materialIcons="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
    xmlns:system="clr-namespace:System;assembly=netstandard">

    <Styles.Resources>
        <system:TimeSpan x:Key="MaterialIconAnimationDuration">0:0:2</system:TimeSpan>
    </Styles.Resources>

    <Style Selector="materialIcons|MaterialIcon">
        <!--  v2 default size  -->
        <Setter Property="Width" Value="16" />
        <Setter Property="Height" Value="16" />

        <Setter Property="Template">
            <ControlTemplate>
                <Border
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    CornerRadius="{TemplateBinding CornerRadius}">
                    <Viewbox Name="PART_IconViewbox">
                        <!--
                            Key difference from v3: Width/Height="24" + no Stretch (default=None).
                            The geometry renders at its natural coordinates within the 24×24
                            Material Design viewport, preserving per-icon whitespace.
                        -->
                        <Path
                            Width="24"
                            Height="24"
                            Data="{Binding Drawing.Geometry, RelativeSource={RelativeSource TemplatedParent}}"
                            Fill="{TemplateBinding Foreground}" />
                    </Viewbox>
                </Border>
            </ControlTemplate>
        </Setter>
    </Style>

    <!--  .Fill class: Viewbox fills all available space  -->
    <Style Selector="materialIcons|MaterialIcon.Fill /template/ Viewbox">
        <Setter Property="Width" Value="{x:Static system:Double.NaN}" />
        <Setter Property="Height" Value="{x:Static system:Double.NaN}" />
    </Style>

    <!--  .collapse-null class: hide when Kind is null  -->
    <Style Selector="materialIcons|MaterialIcon.collapse-null">
        <Setter Property="IsVisible" Value="{Binding Kind, RelativeSource={RelativeSource Self}, Converter={x:Static ObjectConverters.IsNotNull}}" />
    </Style>

    <!--  ═══ Animations ═══  -->

    <Style Selector="materialIcons|MaterialIcon[Animation=Spin] /template/ Viewbox#PART_IconViewbox">
        <Style.Animations>
            <Animation IterationCount="INFINITE" Duration="{StaticResource MaterialIconAnimationDuration}">
                <KeyFrame Cue="0%">
                    <Setter Property="RotateTransform.Angle" Value="0" />
                </KeyFrame>
                <KeyFrame Cue="100%">
                    <Setter Property="RotateTransform.Angle" Value="360" />
                </KeyFrame>
            </Animation>
        </Style.Animations>
    </Style>

    <Style Selector="materialIcons|MaterialIcon[Animation=SpinCcw] /template/ Viewbox#PART_IconViewbox">
        <Style.Animations>
            <Animation
                IterationCount="INFINITE"
                PlaybackDirection="Reverse"
                Duration="{StaticResource MaterialIconAnimationDuration}">
                <KeyFrame Cue="0%">
                    <Setter Property="RotateTransform.Angle" Value="0" />
                </KeyFrame>
                <KeyFrame Cue="100%">
                    <Setter Property="RotateTransform.Angle" Value="360" />
                </KeyFrame>
            </Animation>
        </Style.Animations>
    </Style>

    <Style Selector="materialIcons|MaterialIcon[Animation=Pulse] /template/ Viewbox#PART_IconViewbox">
        <Style.Animations>
            <Animation IterationCount="INFINITE" Duration="0:0:2">
                <Animation.Easing>
                    <materialIcons:PulseEasing />
                </Animation.Easing>
                <KeyFrame Cue="0%">
                    <Setter Property="RotateTransform.Angle" Value="0" />
                </KeyFrame>
                <KeyFrame Cue="100%">
                    <Setter Property="RotateTransform.Angle" Value="360" />
                </KeyFrame>
            </Animation>
        </Style.Animations>
    </Style>

    <Style Selector="materialIcons|MaterialIcon[Animation=PulseCcw] /template/ Viewbox#PART_IconViewbox">
        <Style.Animations>
            <Animation
                IterationCount="INFINITE"
                PlaybackDirection="Reverse"
                Duration="0:0:2">
                <Animation.Easing>
                    <materialIcons:PulseEasing />
                </Animation.Easing>
                <KeyFrame Cue="0%">
                    <Setter Property="RotateTransform.Angle" Value="0" />
                </KeyFrame>
                <KeyFrame Cue="100%">
                    <Setter Property="RotateTransform.Angle" Value="360" />
                </KeyFrame>
            </Animation>
        </Style.Animations>
    </Style>

    <Style Selector="materialIcons|MaterialIcon[Animation=FadeOutIn] /template/ Viewbox#PART_IconViewbox">
        <Style.Animations>
            <Animation IterationCount="INFINITE" Duration="0:0:4">
                <KeyFrame Cue="0%">
                    <Setter Property="Opacity" Value="0.5" />
                </KeyFrame>
                <KeyFrame Cue="50%">
                    <Setter Property="Opacity" Value="1" />
                </KeyFrame>
                <KeyFrame Cue="100%">
                    <Setter Property="Opacity" Value="0.5" />
                </KeyFrame>
            </Animation>
        </Style.Animations>
    </Style>

    <Style Selector="materialIcons|MaterialIcon[Animation=FadeInOut] /template/ Viewbox#PART_IconViewbox">
        <Style.Animations>
            <Animation IterationCount="INFINITE" Duration="0:0:4">
                <KeyFrame Cue="0%">
                    <Setter Property="Opacity" Value="1" />
                </KeyFrame>
                <KeyFrame Cue="50%">
                    <Setter Property="Opacity" Value="0.5" />
                </KeyFrame>
                <KeyFrame Cue="100%">
                    <Setter Property="Opacity" Value="1" />
                </KeyFrame>
            </Animation>
        </Style.Animations>
    </Style>

</Styles>

[SKProCH]

@jpgarza93 is setting the Width/Height for Path to 24 is crucial to make everything renders as previously? Or there is also some other changes are required?

I've done some sizing changes in #70, which also includes the 24 fixed size. If only that is sufficient, I can merge only that, and while working on other sizing changes.

[sn4k3]

I'm also experimenting and looks like set 24x24 and remove Stretch will do it. The native icons are always 24x24 boxes: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>window-minimize</title><path d="M20,14H4V10H20" /></svg> so it's safe to leave it as 24x24 on Path

Old code would produce this (Check window minimize, maximize, close):

Your new Stretch in PR wont hurt to have, but it could do at Path level instead of ViewBox with defaults unset (None) and same as Direction. Then removing the new Measure code and uncomment the extra styles would fix it.

[SKProCH]

I merged #73 the fixed Width/Height=24 for a Path, and this is making the sizing the same as in 2.x.x (for my tests and use cases at least).

This is published as https://www.nuget.org/packages/Material.Icons/3.0.2-nightly.0.1, so check it and share your feedback.

Issue tracked in #68