How can we integrate google material icons in AEM dialog? | Community
Skip to main content
A
Arjit_Bansal
Level 2
February 7, 2024
Solved

How can we integrate google material icons in AEM dialog?

  • February 7, 2024
  • 4 replies
  • 2454 views

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? 





4 replies

Raja_Reddy
Community Advisor
Raja_ReddyCommunity Advisor
Community Advisor
February 7, 2024

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.

    A
    Arjit_BansalAuthor
    Level 2
    February 8, 2024

    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
      Community Advisor
      SureshDhulipudiCommunity Advisor
      Community Advisor
      February 7, 2024

      did you try including directly in your project?

       

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

      and <coral-icon>

        A
        Arjit_BansalAuthor
        Level 2
        February 8, 2024

        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
          Community Advisor
          arunpatidarCommunity Advisor
          Community Advisor
          February 8, 2024

          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.html 

          https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/graphiciconselect-not-working-in-aem-6-5-icon-picker/m-p/407836 

          Arun Patidar
            A
            Arjit_BansalAuthor
            Level 2
            February 8, 2024

            @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
              Community Advisor
              arunpatidarCommunity AdvisorAccepted solution
              Community Advisor
              February 9, 2024

              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/jcr_root/apps/acs-commons/components/authoring/graphiciconselect/render.jsp 

              Arun Patidar
                kautuk_sahni
                Community Manager
                kautuk_sahniCommunity Manager
                Community Manager
                February 8, 2024

                @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.

                Kautuk Sahni
                Terms & ConditionsAccessibility statement

                Loading footer...