How can we integrate google material icons in AEM dialog?

[Arjit_Bansal]

I am trying to show Google material icons in AEM dialog.
Google icons - https://fonts.google.com/icons
I have seen a similar approach for font awesome using graphiciconselect in ACS commons.

<icon
   jcr:primaryType="nt:unstructured"
   sling:resourceType="acs-commons/components/authoring/graphiciconselect"
   fieldDescription="Configure icon"
   fieldLabel="Icon"
   name="./icon">

   <datasource
   jcr:primaryType="nt:unstructured"
   sling:resourceType="acs-commons/components/utilities/genericlist/datasource"
   path="/etc/acs-commons/lists/font-awesome-icons"/> 

Please let me know how I can achieve this use case. Is this a general use-case or is this not recommended and should we include icons in some other way? 

[Raja_Reddy]

Hi @Arjit_Bansal 

Instead of using the `graphiciconselect` component from ACS Commons, you can create a custom component to achieve this.

Here's an example of how you can create a custom component to include Google Material Icons in an AEM dialog:

1. Create a new component under your project's `/apps` folder, for example: `/apps/myproject/components/authoring/materialiconselect`.

2. Create a new dialog for your component, for example: `/apps/myproject/components/authoring/materialiconselect/dialog`.

3. In the dialog, add a field for the icon selection. You can use a `select` or `pathfield` widget to allow authors to select the desired icon. For example:

```xml
<icon
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
fieldLabel="Icon"
name="./icon"
rootPath="/etc/material-icons"
allowBlank="true"
showTags="true"
mode="select"
/>

In this example, the `rootPath` property is set to `/etc/material-icons`, which is the location where you can store the Google Material Icons in AEM.

4. Create a new folder in the repository to store the Google Material Icons. For example: `/etc/material-icons`.

5. Under the `/etc/material-icons` folder, create a new node for each icon you want to include. For example, you can create a node for the "home" icon with the following properties:

- `jcr:primaryType`: `nt:unstructured`
- `sling:resourceType`: `granite/ui/components/coral/foundation/icon`
- `icon`: `home`

You can repeat this step for each icon you want to include.

6. Finally, include the `materialiconselect` component in your dialog or component where you want to use the Google Material Icons. For example:

```xml
<materialiconselect
jcr:primaryType="nt:unstructured"
sling:resourceType="myproject/components/authoring/materialiconselect"
fieldLabel="Select an icon"
name="./selectedIcon"
/>
```

In this example, the `selectedIcon` property will store the selected icon value.

Remember to adjust the paths and resource types according to your project's structure and naming conventions.

This approach allows you to include Google Material Icons in your AEM dialogs and use them in your components. It is a general use-case and can be customized based on your specific requirements.

[Arjit_Bansal]

Hi @Raja_Reddy 
Thank you for the detailed reply. Appreciate the effort.
I will try this approach but the ask is to view the icons inside the dialog so that the icon can be selected directly instead of going via names inside Pathfield.
Something like below -

Please suggest how this can be approached.

[SureshDhulipudi]

did you try including directly in your project?

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

and <coral-icon>

[Arjit_Bansal]

Hi @SureshDhulipudi 
Thank you for your reply.
Direct inclusion is working fine on page i.e inside HTML  using <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
But I want the icons to load visually inside dialog meaning icons should load in dialog to be selected direclty.
I don't understand this - <coral-icon> please elaborate.

[arunpatidar]

Hi @Arjit_Bansal 
You can use graphiciconselect from ACS Common

https://adobe-consulting-services.github.io/acs-aem-commons/features/ui-widgets/icon-picker/index.ht... 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/graphiciconselect-not-work... 

[Arjit_Bansal]

@arunpatidar 
I tried using the Font Awesome icons, and they are working fine but I want Google material icons to load instead of Font Awesome icons.
As per my understanding - 
We need to add this to our dialog -

<icon xmlns:jcr="http://www.jcp.org/jcr/1.0"
      xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
      xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
      jcr:primaryType="nt:unstructured"
      fieldLabel="Icon" name="./icon"
      sling:resourceType="acs-commons/components/authoring/graphiciconselect">
            <datasource jcr:primaryType="nt:unstructured"
                        path="/etc/acs-commons/lists/font-awesome-icons"
                        sling:resourceType="acs-commons/components/utilities/genericlist/datasource"/>
</icon>

The path variable will hold the custom icons, but what value should we give each icon to load? In the acs commons example, it is a generic list component with only value as font awesome class like "fa fa-instagram"
path = /etc/acs-commons/lists/font-awesome-icons

[arunpatidar · Accepted solution]

Hi @Arjit_Bansal 
here is the implementation, you can check the expected values for datasource https://github.com/Adobe-Consulting-Services/acs-aem-commons/blob/master/ui.apps/src/main/content/jc... 

[kautuk_sahni]

@Arjit_Bansal Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.