DocumentationAEMAEM TutorialsAEM Sites Tutorials

Customizing Component Icons developing-component-icons-in-aem-sites

Last update: Tue May 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Intermediate
  • User

Component Icons allow authors to quickly identify a component with icons or meaningful abbreviations. Authors can now find locate the Components required to build out their Web experiences faster than ever.

https://video.tv.adobe.com/v/16778?quality=12&learn=on

Transcript
Hey, what’s up! In this video, we are going to be looking at component icons introduced in AEM 6.3. So, I’ve got one of the We.Retail pages open in my sites editor and if we expand the content finder, we can see that the component browser looks a little different.
So, we can see the component name as well as the component group. But, what’s been added is a component icon.
Now, the icon could just be an abbreviation of the component name, or it could be one of the core UI icons.
And so, this just allows content authors to more easily identify a component, when they’re looking for it.
In addition, if a content author selects the info circle, they can get a brief description about the component and its purpose.
So, let’s look at some configuration options for customizing the icon of a component. So, we’re going to go into CRXDE Lite and I’m just going to select my component here, and it’s this article list component and it’s from the We.Retail site. Now, by default, the component icon is the abbreviation of the first two letters of the component name. But, if we explicitly set this abbreviation property, we can override that icon. So, we’ll just set it to AL for Article List.
Go ahead and add that, and if we refresh the page and reopen the component browser, we can see that the icon is now this AL.
We can also choose any of the CoralUI icons. So, if we go to the CoralUI documentation and just select this icon here, this answer icon. So we’ll remove this property and we’ll put a new property called CQ colon icon and for the value we’ll just paste in the name of the CoralUI icon, and if we refresh the page, we should see our new icon.
Now, you can see that answer icon.
And, there’s a ton of CoralUI icons that are available. You also have the ability to upload a completely custom icon. So, what we’re going to do is create a new file, directly beneath our component and the name of the file is important. It’s going to be called CQ colon icon dot SVG and so, it accepts an SVG format and the recommended dimensions is 20 by 20.
So, I already have an SVG file, called, it’s just the AEM logo and I’ll just upload it through CRXDE Lite.
So, if we return to the component browser, we now see the AEM logo as the new component icon.
You can also upload a custom icon in a PNG format. So, go ahead and delete this file, and we’ll create a new file beneath our component, and it’ll be called CQ colon icon dot PNG.
As far as the dimensions for a PNG file, it doesn’t scale like SVG, so you’ll probably want to create them at 40 pixels by 40 pixels.
So, we’ll upload our smiley face PNG icon, and if we return to the component browser, we can now see our PNG icon.
Okay, so the last thing I want to show you is some component inheritance. So, I’m going to remove this icon from our component and there’s no icons configured. And, this component is actually inheriting from one of the core list components. So, we go ahead and open up that core component.
So, this is the list component and there’s an icon already configured, this text bulleted icon. The way that the icons will work is, if there’s no icon configured on the component itself, it will actually grab the icon from the parent component. So, if we refresh the page and go to the component browser, you can now see that it is inheriting the text bulleted icon. So, that’s it for component icons in AEM 6.3.

The Component browser now displays in a consistent grey theme, displaying the:

  • Component Group

  • Component Title

  • Component Description

  • Component Icon

    • The first two letters of the Component Title (default)
    • Custom PNG image (configured by a developer)
    • Custom SVG image (configured by a developer)
    • CoralUI icon (configured by a developer)

Component icon configuration options component-icon-configuration-options

Abbreviations abbreviations

By default, the first 2 characters of component title ([cq:Component]@jcr:title) are used as the abbreviation. For example, if [cq:Component]@jcr:title=Article List the abbreviation would display as “Ar”.

The abbreviation can be customized via the [cq:Component]@abbreviation property. While this value can accept more than 2 characters, it is recommended to limit the abbreviation to 2 characters to avoid any visual disturbance.


/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  - abbreviation = "AL"

CoralUI Icons coralui-icons

CoralUI icons, provided by AEM, can be used for component icons. To configure a CoralUI icon, set a [cq:Component]@cq:icon property to the desired CoralUI icon’s HTML icon attribute value (enumerated in the CoralUI documentation.


/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  - cq:icon = "documentFragment"

PNG Images png-images

PNG images can be used for component icons. To configure a PNG image as a component icon, add the desired image as a nt:file named cq:icon.png under the [cq:Component].

The PNG should have a transparent background, or a background color set to #707070.

The PNG images are scaled to 20px by 20px. However to accommodate retina displays 40px by 40px might be preferable.


/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  + cq:icon.png
     - jcr:primaryType = "nt:file"

SVG Images svg-images

SVG images (vector-based) can be used for component icons. To configure a SVG image as a component icon, add the desired SVG as a nt:file named cq:icon.svg under the [cq:Component].

SVG images should have a background color set to #707070 and a size of 20px by 20px.


/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  + cq:icon.svg
     - jcr:primaryType = "nt:file"

Additional Resources additional-resources

recommendation-more-help
bb44cebf-d964-4e3c-b64e-ce882243fe4d