How to add a tile with custom icon to AEM’s homepage

AEM allows you to customise the buttons on the homepage, so you can easily add links external or internal pages.

Adding a custom icon

To add a custom icon to your button you’ll need to add an extra clientlib and generate font files from an SVG.

To generate the font files, I normally use Gliphter, an online font generator, where you can assign an SVG to each letter. You can use any method you’re familiar with and prefer.

Create client lib

Create an icon clientlib in your project and add the path to your filters.xml

/apps/demo(nt:folder)
└──clientlibs(nt:folder)
   └──icons(cq:ClientLibraryFolder)
      ├──css.txt
      ├──css(nt:folder)
      │  └──icons.css(t:file)
      └──resources
         └──fonts
            ├──demo-font.eot
            ├──demo-font.svg
            ├──demo-font.ttf
            └──demo-font.woff

Where the clientlib definition (/apps/demo/clientlibs/icons/.content.xml) is

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
  jcr:primaryType="cq:ClientLibraryFolder" 
  allowProxy="{Boolean}true"
  categories="[coralui3]"/>

css.txt

css/icons.css

and icons.css

@font-face {
    font-family: 'demo font';
    src: url('../resources/fonts/demo-font.eot');
    src: url('../resources/fonts/demo-font.eot?#iefix') format('embedded-opentype'),
    url('../resources/fonts/demo-font.woff') format('woff'),
    url('../resources/fonts/demo-font.ttf') format('truetype'),
    url('../resources/fonts/demo-font.svg#demo-font') format('svg');
    font-weight: normal;
    font-style: normal;
}
[icon*=custom-] {
    font-family: 'demo font';
}
._coral-Icon--sizeXL[icon*=custom-]:before {
    font-size: 2.8em;
}
[icon*=custom-] svg {
    display: none;
}
[icon=custom-dog]:before {
    content: 'A';
}

Creating the button

Create the following tree structure

apps
└──cq(nt:folder)
   └──core(nt:folder)
      └──content(sling:OrderedFolder)
         └──nav(nt:unstructured)
            └──demo(nt:unstructured)
               └──.content.xml

Where .content.xml is:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
          jcr:primaryType="nt:unstructured"
          jcr:title="Demo button"
          href="/my-custom-path"
          icon="custom-dog"
          id="custom-dog"
          order="{Long}700"/>

Add this path to your filter.xml .

Finally, after deploying to your environment you can see the new icon:

AEM author homepage with new button

Originally published at https://joao.ws on August 11, 2022.