Support custom SVG icon in umb-child-selector component

[bjarnef]

Prerequisites

• I have added steps to test this contribution in the description below

If there's an existing issue for this PR then this fixes #10340

Description

When using custom SVG icons these were not show in <umb-child-selector> component.
Furthermore this PR also replace the search filter markup with <umb-search-filter> component.

The compass icon is a custom font icon from my Material Design Icon Pack, the coffee icon a custom SVG icon and the rest Umbraco core icons.

---

This item has been added to our backlog AB#12146

[umbrabot]

Hi there @bjarnef, thank you for this contribution! 👍

While we wait for one of the Core Collaborators team to have a look at your work, we wanted to let you know about that we have a checklist for some of the things we will consider during review:

• It's clear what problem this is solving, there's a connected issue or a description of what the changes do and how to test them
• The automated tests all pass (see "Checks" tab on this PR)
• The level of security for this contribution is the same or improved
• The level of performance for this contribution is the same or improved
• Avoids creating breaking changes; note that behavioral changes might also be perceived as breaking
• If this is a new feature, Umbraco HQ provided guidance on the implementation beforehand
• The contribution looks original and the contributor is presumably allowed to share it

Don't worry if you got something wrong. We like to think of a pull request as the start of a conversation, we're happy to provide guidance on improving your contribution.

If you realize that you might want to make some changes then you can do that by adding new commits to the branch you created for this work and pushing new commits. They should then automatically show up as updates to this pull request.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

[bjarnef]

Okay, I noticed a minor issue in list of datatypes / property editors, because items doesn't have the umb-card-grid-item class, but previous just used .umb-card-grid i in less.

Furthermore I noticed if using a custom SVG icon in a property editor, e.g. icon-coffee-cup this wasn't shown either.

[bjarnef]

It now looks like this.

[bjarnef]

I also noticed it is a similar issue if using property editor as macro parameter editor: https://our.umbraco.com/documentation/extending/macro-parameter-editors/

Fixed in a4d6847

[bjarnef]

A custom SVG icon was missing here as well - fixed in a54b0b1

[bjarnef]

@nul800sebastiaan is it too late to fix this in 8.14.0 release?

[nul800sebastiaan]

@bjarnef Awesome! But yes, about 2 hours too late for the 8.14 release, not to worry, we'll get it into a patch release instead 👍 Thanks for the help, you're a star!

[bjarnef]

Oh no! 😱 ... no espresso for me then ☕
Hopefully in the next patch releases then 🩹

[nathanwoulfe]

Beautiful, thank you @bjarnef

It still bugs me that we pass the icon string into the umbIcon directive twice (once as the icon attribute, and again in the class). Probably not worth worrying about now, given it would be a pretty big change, but I'm sure we could be using the class attribute only for additional styling (color, size etc), then adding the icon attribute into the class string when we're rendering. Ideally the new UI will drop support for legacy icons, so the umbIcon component would be up for a rebuild anyway