Icon

• .ci (sprite): Inline SVG with width/height 1em by default; modifiers ci--sm, ci--md, ci--lg map to CDS icon size tokens (icons.less).
• .c-card__icon: font-family: 'Material Symbols Outlined', font-size from CDS tokens, font-variation-settings for FILL, wght, GRAD, opsz (card.less).
• Concordia icons: Fixed-size background images; brand-specific arrows and search glyphs; not variable font.

Keep weight, fill, and optical size aligned with Card LESS or design tokens unless a documented exception exists. Refer to Tokens for typography and spacing around icons.

• Sprite symbol ids: ci-* (for example ci-chevron-right, ci-external-link, ci-rss).
• Card icon colour modifiers: c-card__icon--burgundy, --white, --black (from card background context in card.jsp).

• Decorative: If the icon is next to a visible label or heading, use aria-hidden="true" on the SVG or span and let text carry the name (Card Icon view does this for c-card__icon).
• Informative: If the icon conveys meaning without redundant text, expose a name with aria-label on the SVG (or visible text), or use role="img" with a short label.
• Links: When an icon is inside a link, the link text should include the destination (or aria-label on the link when design uses icon-only controls).

• Sprite icons use currentColor; ensure contrast against the background meets WCAG when used as the only cue (usually pair with text).
• Material Symbols inherit colour from .c-card__icon modifiers; verify on dark and light card backgrounds.

• Understanding 1.4.3 Contrast (minimum)
• Understanding 4.1.2 Name, role, value

• Search (search affordance patterns with concordia-search-icon and sprite usage).
• Card (Icon view and Material Symbols).

Use this query in CRXDE Lite to find instances of this component.

/jcr:root/content//*[@sling:resourceType = 'concordia/components/card/cardViews/iconCard.jspf']

Treat Material Design as the canonical icon set. Material Symbols (variable font) is how Google ships those icons on the web today. Material UI exposes the same family as React components for app teams; naming and metaphors match what you see on Google Fonts.

In AEM, preferred methods:

1. SVG sprite (svg-sprites.svg): one file, many <symbol> entries with ids such as ci-search, ci-person, ci-external-link. Reference with <use href="…#ci-…"> and the .ci utility classes. Best when you need crisp SVG, single HTTP cache, and tight control in LESS (colour via currentColor, sizes via tokens).
2. Material Symbols Outlined (webfont): used by the Card component Icon view. Authors type an icon name string; the JSP loads the Google Fonts stylesheet and renders a <span> with the Material Symbols font. Best when authors pick icons from the Material catalogue without deploying new SVGs.

Other patterns (existing pages):

• Concordia icon classes (concordia-icon, concordia-search-icon, arrow classes): background images under clientlibs/img/icons/ (SVG or PNG). Prefer sprite or Material Symbols for new UI unless you are matching an existing pattern.
• Component-specific inline SVG or images elsewhere; migrate toward the two preferred methods when touching those areas.

Material Symbols are a variable font. Appearance is controlled by four axes:

Card Icon view loads a stylesheet that registers the variable font axis ranges (for example optical size 24, weight 100–700, fill 0, grade 0). Card LESS sets font-variation-settings on .c-card__icon (for example weight 300, optical size 24, fill 0, grade 0). Adjust only with design approval so icons stay consistent with Figma and the CDS.

Official references:

• Material Symbols guide (Google for Developers): axes, font-variation-settings, and how the font works in CSS.
• Material Symbols and icons on Google Fonts: search icons, preview weight / fill / size, and copy names for authoring.
• Material Icons (MUI): React component API; same icon names and metaphors for teams building in MUI.

Some screens combine formats (for example a sprite toolbar icon and a Concordia search glyph on the same page).

Paths below are under apps/concordia/components/ unless noted. Format means how the icon is delivered in markup, not the design metaphor.

Global navigation and page chrome

Search

Lists, grids, and faceted filters

Profiles and faculty

In-page navigation and secondary nav

Content components

Auditing or extending usage

To list every JSP/HTML reference to the shared sprite:

rg 'svg-sprites\.svg' apps/concordia --glob '*.{jsp,jspf,html,htm}'

To find Concordia background icon spans:

rg 'concordia-icon' apps/concordia --glob '*.{jsp,jspf,html,htm}'

Sprite:

<svg class="ci ci--md" aria-hidden="true">
  <use href="/etc/designs/concordia/clientlibs/img/svg-sprites.svg#ci-external-link"></use>
</svg>

Informative sprite (when there is no adjacent text):

<svg class="ci ci--sm" role="img" aria-label="RSS">
  <use href="/etc/designs/concordia/clientlibs/img/svg-sprites.svg#ci-rss"></use>
</svg>

• Card Icon view: Google Fonts stylesheet (Material Symbols Outlined); Card clientlibs.
• Sprite: No font download; relies on svg-sprites.svg and icons.less (typically via base or embedded clientlibs).
• Material webfont: iconCard.jspf includes the Google Fonts <link>; avoid duplicating that pattern if Icon view is used heavily on one page until a central load exists.