IgbTreeGrid – グリッドのアイコンを Material Icons から Material Symbols に変更したい

IgbTreeGrid のフィルター、ツールバー、ツリーの展開/折りたたみなどで使われるアイコンは、既定では Material Icons（と Ignite UI 独自の imx-icons）で表示されます。これを Material Symbols に変更するには、IgbIcon の RegisterIconFromTextAsync で Material Symbols の SVG を登録し、SetIconRefAsync でグリッド内部のアイコンの参照先をそのアイコンに差し替えます。

IgbTreeGrid の設定

アイコンの登録や参照先の変更はアプリ全体で共有されます。そのため、API を呼び出すための非表示の IgbIcon を1つ配置し、@ref で参照を取得します。このサンプルでは、アイコンセットを切り替えるボタン（IgbButtonGroup）も置いています。ツリーグリッドでは Excel スタイル フィルターとツールバーを有効にし、変更されたアイコンを確認できるようにしています。

<IgbIcon @ref="iconRegistry" hidden />

<IgbButtonGroup Selection="ButtonGroupSelection.SingleRequired" Select="OnIconSetSelected"
                Disabled="@(!IsIconRegistryReady)">
    <IgbToggleButton Value="@nameof(IconSet.MaterialIcons)" ...>Material Icons (デフォルト)</IgbToggleButton>
    <IgbToggleButton Value="@nameof(IconSet.MaterialSymbols)" ...>Material Symbols</IgbToggleButton>
</IgbButtonGroup>

<IgbTreeGrid Data="Employees" PrimaryKey="Id" ForeignKey="ParentId" ...
             AllowFiltering="true" FilterMode="FilterMode.ExcelStyleFilter">
    <IgbGridToolbar>
        ...
    </IgbGridToolbar>
    <IgbColumn Field="Name" ... />
    ...
</IgbTreeGrid>

RegisterIconFromTextAsync による Material Symbols の登録

まず、Material Symbols の SVG 文字列を用意します。SVG はフォントのような可変軸（weight / grade など）を持たないため、使いたいスタイルで書き出された SVG を使います（このサンプルでは Outlined、weight 700、grade 200 の SVG を使用しています）。登録先のコレクション名は materialSymbols としています。

public static class MaterialSymbolsSvgs
{
    public const string Collection = "materialSymbols";

    public static IReadOnlyDictionary<string, string> All { get; } = new Dictionary<string, string>
    {
        ["add"] = @"<svg xmlns=""http://www.w3.org/2000/svg"" height=""24"" viewBox=""0 -960 960 960"" width=""24""><path d=""...""/></svg>",
        ["arrow_back"] = @"<svg ...>...</svg>",
        ...
    };
}

初回レンダリング後に EnsureReady で IgbIcon の準備が整うのを待ちます。その後、RegisterIconFromTextAsync(名前, SVG, コレクション名) で各 SVG を登録します。この時点ではアイコンが登録されるだけで、グリッドの表示はまだ変わりません。

private IgbIcon? iconRegistry;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (!firstRender || this.iconRegistry is null)
    {
        return;
    }

    await this.iconRegistry.EnsureReady();
    await RegisterMaterialSymbolsAsync(this.iconRegistry);

    this.IsIconRegistryReady = true;
    this.StateHasChanged();
}

// Material Symbols の SVG を独自コレクションとして登録する
private static Task RegisterMaterialSymbolsAsync(IgbIcon icon) =>
    Task.WhenAll(MaterialSymbolsSvgs.All.Select(svg =>
        icon.RegisterIconFromTextAsync(svg.Key, svg.Value, MaterialSymbolsSvgs.Collection)));

SetIconRefAsync によるアイコン参照先の変更

グリッドは内部で、tree_expand、filter_list、pin などのエイリアス名でアイコンを参照しています。これらのエイリアスは default コレクションに属し、実際のアイコン（material コレクションの Material Icons や imx-icons コレクションのアイコン）を指しています。このサンプルでは、エイリアス、既定の参照先、置き換える Material Symbols の名前を対応表にまとめています。

public sealed record GridIconAlias(string Alias, string DefaultName, string DefaultCollection, string SymbolName);

public static class GridIconAliases
{
    public static IReadOnlyList<GridIconAlias> All { get; } =
    [
        new("tree_expand", "chevron_right", "material", "chevron_right"),
        new("tree_collapse", "expand_more", "material", "expand_more"),
        new("filter_list", "filter_list", "material", "filter_list"),
        new("pin", "pin-left", "imx-icons", "keep"),
        new("unpin", "unpin-left", "imx-icons", "keep_off"),
        new("filter_contains", "contains", "imx-icons", "match_word"),
        ...
    ];
}

次に、SetIconRefAsync(エイリアス, "default", IgbIconMeta) で各エイリアスの参照先を差し替えます。IgbIconMeta の Name と Collection に、登録した Material Symbols のアイコン名と materialSymbols を指定すると、グリッドのアイコンが Material Symbols に切り替わります。既定の参照先を指定し直せば、Material Icons に戻ります。

private async Task OnIconSetSelected(IgbComponentValueChangedEventArgs args)
{
    if (this.iconRegistry is null || !Enum.TryParse<IconSet>(args.Detail, out var iconSet))
    {
        return;
    }

    this.CurrentIconSet = iconSet;
    await ApplyIconSetAsync(this.iconRegistry, iconSet);
}

// グリッド内部のアイコンエイリアスの参照先を、選択されたアイコンセットに切り替える
private static Task ApplyIconSetAsync(IgbIcon icon, IconSet iconSet) =>
    Task.WhenAll(GridIconAliases.All.Select(alias =>
        icon.SetIconRefAsync(alias.Alias, "default", iconSet switch
        {
            IconSet.MaterialSymbols => CreateIconMeta(alias.SymbolName, MaterialSymbolsSvgs.Collection),
            _ => CreateIconMeta(alias.DefaultName, alias.DefaultCollection),
        })));

#pragma warning disable BL0005
private static IgbIconMeta CreateIconMeta(string name, string collection) =>
    new() { Name = name, Collection = collection };
#pragma warning restore BL0005

実行結果

「Material Symbols」ボタンを押すと、ツリーの展開/折りたたみ、列のフィルター、ツールバー、Excel スタイル フィルターのメニューなどのアイコンが Material Symbols に切り替わります。「Material Icons (デフォルト)」ボタンを押すと、元のアイコンに戻ります。