ENH-000170675 How to extend the icon component

[webmapLee]

Description

i want to define a custom icon,but i don't know how to do it ? i find nothing about it in the documentation

Blocked issues: #9743

Acceptance Criteria

define custom icon

Relevant Info

No response

Which Component

calcite-icon

Example Use Case

No response

Esri Support context

Request for allowing custom icons to be used in the Menu Item component in Calcite Design System v 2.12

Salesforce ID: ENH-000170675

Salesforce Submitter: Disha Jha

Salesforce Submit Date: 9/11/2024 5:14 PM

Salesforce Bug Type: Product

Salesforce Severity: Low

Use Case:

Primary Audience:

Developer, Viewers

What does the customer want?

The customer wants to be able to use custom icons (PNG, JPG and SVG formats) in the Calcite Menu Item.

Why does the customer want this?

The customer has a Calcite-Menu in their web application in which they want to incorporate icons such as the ‘Facebook’ icon which is not available under the default Calcite icons. Hence, they would like to be able to use their own icons by adding the custom icon URLs. If they can do so, they would be able to use a wider range of icons in their custom applications.

Attached Files: Yes

Description of Enhancement: Currently, the Calcite Menu Item only supports the icons available here: https://developers.arcgis.com/calcite-design-system/icons/ The above icons can be added by passing corresponding strings to the iconStart and iconEnd properties in the Menu Item.

Repro Data: (n/a)

Work Around: (n/a)

Product: Calcite Design System

Functional Category: Calcite Design System

Client Platform: (n/a)

Version Found: 2.12

Planned Version Fixed: (n/a)

Comment: (n/a)

[webmapLee]

I looked at the source code of calcite-components，as follows:

here the method of fetchIcon, fetch icon path from icon json file,can you support the custom path

[driskull]

Hi @webmapLee.

At this time, we don't support using any icons that aren't apart of the calcite-ui-icons https://github.com/esri/calcite-ui-icons/ which are the official icons of the Calcite design system.

We may allow for use of 3rd party or custom icons at some point. At this time, I would recommend using an SVG in place of the calcite-icon component.

[webmapLee]

how to define svg in the calcite-icon, is it like this?

<calcite-icon>
<svg path='****'/>
</calcite-icon>

[geospatialem]

A few related requests for consideration while working towards a solution:

• Allow custom icons in Button #9743
• Allow custom icons in Dropdown #9331
• Add content-start slot to Combobox Item #9322
• Allow custom icons in Action #10616 Added on October 25, 2024 with the new issue request

[macandcheese]

Maybe components that accept icon property / properties could also have an iconAsset prop that just accepts a path to asset to display. Or even parse the provided value to the existing props and determine if it’s valid Calcite UI name or a location path?