- Overview
- Page Authoring
- Components
- Content Fragments
- Experience Fragments
- Developing
- AEM Project Archetype
- Getting Started with AEM Sites
- Getting Started with AEM Headless
- Getting Started with AEM SPA Editor and React
- Extending Page Properties
- Responsive breakpoints
- Developing with the Style System
- Style System Best Practices
- Developing for Page Difference
- Implementing Simple Search
- Social Media Sharing
- Customizing Component Icons
- Personalization
- SEO
- Single Page Applications
- Multi Site Management
- Introduction to Language Copy
- Live Copy and Blueprint
- Create a Live Copy
- Manage Live Copy inheritance on a component
- Manage Live Copy inheritance on a page
- Live Copy overview console
- Create a Language Copy
- Translation Projects
- Create a multi-lingual Translation Project
- Translation Jobs
- Updating a Language Copy with Launches
- Create a Language Copy page
- Translation Job status
- Create a country site from Language Copy
- Translation
- Integrations
- Experience Platform
- Experience Platform Data Collection Tags (Launch)
- Adobe Client Data Layer
- Analytics
- Adobe Target
- Overview
- Add Target extension to Launch Property
- Load and fire a Target call
- Create Adobe Target Cloud Service account
- Export Experience Fragments to Adobe Target
- Create Target Activity using Experience Fragment Offers
- Personalization using Visual Experience Composer
- Personalization of full web page experience
- Expert Resources
Customizing Component Icons
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.
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
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, 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 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 (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
Business.Adobe.com resources
Resources
Adobe Account
