skills.rest
Legal-and-General
Legal-and-GeneralOFFICIAL
Explore all skills by this author →
Website𝕏@landg_groupGitHub

canopy-icon

Enforce Canopy UI icon usage best practices for Angular lg-icon components.

23|46|Updated Sep 7, 2020
Search Tags:#ui#accessibility#angular#best-practices#icon#canopy#lg-icon
One-click install
npx skills add https://github.com/Legal-and-General/canopy --skill canopy-icon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canopy-icon
Source: https://github.com/Legal-and-General/canopy/tree/main/skills/best-practice/icon
Command: npx skills add https://github.com/Legal-and-General/canopy --skill canopy-icon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Clear guidance to ensure Canopy icons are used consistently, accessibly, and in line with brand guidelines when implementing the lg-icon component in Angular projects.

Core Features & Use Cases

  • Guidance on when to use lg-icon and how to apply proper sizing, colour, and decorative vs informative roles.
  • Accessibility recommendations such as ARIA attributes and descriptive text for informative icons.
  • Real-world use: ensure icons maintain brand consistency across Canopy apps.

Quick Start

Follow these guidelines when implementing the lg-icon component in an Angular project.

Frequently Asked Questions about canopy-icon

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use the lg-icon component for accessibility in Angular?▼

Use the lg-icon component in Angular by applying ARIA attributes and descriptive text for informative icons, while omitting them for decorative icons. This ensures Canopy UI icons meet accessibility standards and maintain proper screen reader behavior.

What's the best way to handle decorative versus informative icons in Canopy UI?▼

Distinguish decorative icons from informative icons by hiding decorative ones from screen readers using ARIA attributes. Informative icons require descriptive text to convey their meaning for accessibility compliance within the lg-icon component.

How do I apply proper sizing and colour to Canopy icons?▼

Apply proper sizing and colour to Canopy icons by following the structured guidance on inputs provided by the lg-icon component. This enforces brand consistency and ensures visual alignment across Angular projects using the Canopy UI framework.

Does the Canopy UI icon component enforce brand consistency across Angular apps?▼

Yes, the Canopy UI icon component enforces brand consistency by providing documented usage patterns and structured guidance for lg-icon inputs. This ensures icons are used consistently and in line with brand guidelines across all Canopy applications.

Why does my lg-icon component need ARIA attributes?▼

The lg-icon component needs ARIA attributes to provide descriptive text for informative icons, ensuring screen readers can interpret their meaning. Decorative icons should have ARIA attributes set to hide them from assistive technologies.

When do I need to provide descriptive text for an icon in Angular?▼

You need to provide descriptive text for an icon in Angular when it serves an informative role rather than a decorative one. Informative icons require text to convey their meaning for accessibility, while decorative icons do not.

Related Skills

Explore More Design & Creative Skills→
Legal-and-GeneralLegal-and-General
23

canopy-alert

Implement accessible inline alerts with Canopy's lg-alert component in Angular projects.

Official
Basic
Legal-and-GeneralLegal-and-General
23

canopy-page

Guide Angular developers to implement full-page layouts with the Canopy lg-page component.

Official
Intermediate
Legal-and-GeneralLegal-and-General
23

canopy-button

Apply Canopy Button best-practices guidance to Angular lg-button usage.

Official
Intermediate
Legal-and-GeneralLegal-and-General
23

canopy-pipes-kebab-case

Transform strings to kebab-case in Angular templates with Canopy's LgKebabCasePipe.

Official
Basic