Feature request: Add indicator slot

[Spinnenzunge]

Hi there.

It would be great if the ion-icon component would allow for an indicator slot so we could use ion-icon somehow like this:

<ion-icon name="home">
  <ion-icon slot="indicator" name="alert-circle-outline"></ion-icon>
</ion-icon>

This would allow us to assign markup to the inside of an ion-icon. I am currently trying to find a good solution to add icons with indicators (other icons on top of the existing one). And I can not really find a good solution without creating a custom component, which I do not want to because it breaks all my styling in items, buttons etc. that excpects an ion-icon component and not a "custom-component".

[Spinnenzunge]

Any plans on implementing this feature request?

[christian-bromann]

@Spinnenzunge hey 👋 can you please explain the use case of this?

[ionitron-bot[bot]]

This issue has been labeled as community feedback wanted. This label is added to issues that we would like to hear from the community on before moving forward with any final decision on the feature request.

If the requested feature is something you would find useful for your applications, please react to the original post with 👍 (+1). If you would like to provide an additional use case for the feature, please post a comment.

The team will review this feedback and make a final decision. Any decision will be posted on this thread, but please note that we may ultimately decide not to pursue this feature.

Thank you!

[Spinnenzunge]

We are using our own icons with ionic framework as a way of branding our app. Our icon library supports indicator icons, these are svg icons of their own, that have the same viewBox as the normal icons but are designed to be placed in the bottom right corner of the svg viewBox. This allows us to "overlay" these indicator icons over the normal icons with e.g. error, success, etc. indicators. With the method of overlaying indicators over the normal icons we have the option to mark every icon we have with a set of indicators without having to design them all separately

Now of course technically there are multiple solutions to do that. One solution would be to create a custom component that wraps the icon and renders an indicator positioned absolute over the ion-icon. The problem is, that ionic framework has a lot of components that expects an ion-icon in its slot (e.g. in the list) and not a custom-component. Solving it with pure css would also work but is not that maintainable when adding new indicators etc.

So i would love to see indicator support added directly to ion-icon. Either by working with something like indicator slot or just allowing content projection of ion-icon in ion-icon. Having indicators on icons is something I am sure other consumers would love to see as well as this is a common UI design pattern. You could even consider adding indicator icons directly to ionicons icon lib to enhance ionicons even more

I hope I could clarify the use case better.

[christian-bromann]

Thanks for clarifying. What do you think of selecting a set of indicator, e.g. warning, error and success and add a property to allow to add these indicator to each icon, e.g. via:

<ion-icon name="home" indicator="success" />

Would you see more types of indicators?

[Spinnenzunge]

Sounds great, the only input I have is that it would be great to enable consumers to also provide asset src and not just named icon as well as expose the rendered indicator element as part for styling purposes, as our personal use case lies specifically in using our own branded indicators. But if that would be possible, having an indicator attribute sounds really promising

[skamradt]

The issue I see here is that the icon really needs to be cut to allow for the overlay, and the depth of the cut can change based on the geometry of the overlay. It is possible to use clipping, but this might create sharp edges in otherwise rounded icons. Maybe a few geometries can be set as standard ones. The triangle and circle seem to be most common with a square being another option. Rounded versions should be created for standard icons, sharp for sharp icons. Another thing that I noticed, the overlay appears to be slightly outside of the bounding box of the icon. The issue here would be general usage and alignment in things like buttons, toolbars, etc. It would be best to maintain the bounding box and not adjust icon position to minimize the impact. This may mean that the negative space to the bottom right on the overlay is practically non-existent.

[Spinnenzunge]

@skamradt what you are writing is imho mostly a design issue. the screenshot i applied in my feature request is a specific design of our app and not necessarily a problem with something ionicons will come up with, as the design of indicators may be a completely different one. for our use case it would be important that we could provide our own indicator svgs and have the possibility to overwrite custom styling (clipping, etc.) by being able to select shadow dom parts and overwrite them.

[skamradt]

I have been experimenting using masking/clipping for overlays and it is very possible. The general procedure is to have a shape you "cut out" using a mask that is slightly bigger than your selected indicator, then apply the indicator into the rect that is left.

Here is an example, note the stroke-width in the grouped path is set to 2 for the cut out:

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <mask id="maskit">
    <rect x="0" y="0" width="24" height="24" fill="white"/>
    <g transform="translate(12,12)" stroke="black" stroke-width="2">
      <path d="M5.65599 2.73693C4.70219 1.75824 3.15912 1.75349 2.20944 2.72795C1.25976 3.7024 1.26439 5.28574 2.2182 6.26443L5.74895 9.8873C5.8954 10.0376 6.13284 10.0376 6.27929 9.8873L9.7917 6.28538C10.7392 5.30775 10.7362 3.72885 9.7822 2.74999C8.82669 1.76955 7.28289 1.76479 6.33151 2.74099L5.99605 3.08587L5.65599 2.73693Z"/>
    </g>
  </mask>
  <path d="M8.94922 8.5998C8.94922 4.98559 11.885 2.0498 15.4992 2.0498C19.0963 2.0498 22.0492 4.86866 22.0492 8.4998C22.0492 12.114 19.1134 15.0498 15.4992 15.0498C14.9689 15.0498 14.4451 14.9738 13.9484 14.846C13.9241 15.515 13.3741 16.0498 12.6992 16.0498H10.9492V17.7998C10.9492 18.4902 10.3896 19.0498 9.69922 19.0498H7.94922V20.2998C7.94922 21.2663 7.16572 22.0498 6.19922 22.0498H3.69922C2.73272 22.0498 1.94922 21.2663 1.94922 20.2998V18.1282C1.94922 17.3989 2.23895 16.6994 2.75467 16.1837L8.99046
 9.94791C9.04493 9.89344 9.07749 9.80529 9.05969 9.70382C8.99939 9.36017 8.94922 8.98701 8.94922 8.5998ZM18.2493 6.99982C18.2493 6.30946 17.6896 5.74982 16.9993 5.74982C16.3089 5.74982 15.7493 6.30946 15.7493 6.99982C15.7493 7.69017 16.3089 8.24982 16.9993 8.24982C17.6896 8.24982 18.2493 7.69017 18.2493 6.99982Z" fill="gold" mask="url(#maskit)"/>
  <g transform="translate(12,12)">
    <path d="M5.65599 2.73693C4.70219 1.75824 3.15912 1.75349 2.20944 2.72795C1.25976 3.7024 1.26439 5.28574 2.2182 6.26443L5.74895 9.8873C5.8954 10.0376 6.13284 10.0376 6.27929 9.8873L9.7917 6.28538C10.7392 5.30775 10.7362 3.72885 9.7822 2.74999C8.82669 1.76955 7.28289 1.76479 6.33151 2.74099L5.99605 3.08587L5.65599 2.73693Z" fill="red"/>
  </g>
</svg>

this renders as the following:

(using icons from Microsoft Fluent UI 24 & 12 via my SVGIconViewer project)

You may need to resize the indicators to match the viewbox of the primary icon. In the example above, 12x12 (heart) is a fourth of the 24x24 (key), so it renders without having to do any resizing, the translate transform just moves it from top left to bottom right by translating 0,0 to 12,12 and drawing from there.