Grid css/layout is not loading correctly when Icon component is also used

[mddifilippo89]

state-persistence-main.zip

Issue found in 24.1.32

[gmurray81]

@damyanpetev @ChronosSF

my theory is that some change has been made to the angular grid css that isn't updated in the pre-built grid theme for the Angular Elements grid and this is causing the icons to break.

If I add this style to the blazor sample that @mddifilippo89 linked:

<style>
    .igx-icon.material {
        font-family: 'Material Icons';
        font-weight: normal;
        font-style: normal;
        font-size: 24px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
    }
</style>

Then the icons load. Was there some change to the class that gets applied to the igx-icons in igx-grid that needs to be reconciled with the pre-built angular elements css?

[MayaKirova]

At first glance there's a mismatch between the classes applied to the icons.

For Blazor:

For Angular:

I'm guessing there's some version mismatch, since if the same classes as in Angular are applied to the Blazor icon it shows correctly.

[MayaKirova]

Actually, looking at the sample, it seems to be registering some icons as material:

                this.IconRef.RegisterIconFromText("restore", restoreIcon, "material");
                this.IconRef.RegisterIconFromText("save", saveIcon, "material");
                this.IconRef.RegisterIconFromText("clear", clearIcon, "material");
                this.IconRef.RegisterIconFromText("forward", forwardIcon, "material");
                this.IconRef.RegisterIconFromText("delete", deleteIcon, "material");
                this.IconRef.RegisterIconFromText("refresh", refreshIcon, "material");

This seems to break some of the existing icons, changing their class to "material" as well.

[damyanpetev]

The .material-icons class used in the Grids is provided from the style loaded from Material Icons font (e.g. from https://fonts.googleapis.com/icon?family=Material+Icons) which is normally a requirement for the Grid. It's also included by default IIRC.

@mddifilippo89 Is this similar sample to the we were looking at yest/monday for Grid state, because the one I threw around I had also tested updated to 24.1.32 and saw no issues with icons. Lemme see what's different in this one.

---

Edit: Nvm, the sample is with other registered icons and IgbIcon in addition and yes there are two issues it seems, both related to the new icon sync functionality:

Grid icons break partially when IgbIcon is present due to internal icon references conflicting, That should be corrected in the WC source where the sync occurs.

The second is with the collection name being "material" which also messes with the existing such collection on the Grid side, switching that over to "material-svg" for example leaves just the few conflicts from the first issue and loads most icons. However, that should be fixed in the Elements sync code most likely, perhaps even the main icon service.

[MayaKirova]

Related to: https://github.com/IgniteUI/igniteui-angular/issues/14657 And this: https://github.com/IgniteUI/igniteui-webcomponents/issues/1359