Using custom icons

Overview

The cds-icon class is part of the Design System and is used to include consistent and scalable icons throughout your application. These icons are designed to match the overall look and feel of the application, ensuring visual consistency and ease of use.

Why use cds-icon?

• Consistency: Ensures that all icons across the application have a uniform style.
• Scalability: Icons are scalable and look good on different screen sizes and resolutions.
• Ease of Use: Simplifies the process of including icons in the application.

How to use cds-icon

Step 1: Add the Icon Font to Assets

Ensure that the icon font files are included in the assets section of your angular.json file.

angular.json

{
  "projects": {
    "celerov2-ui-client": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              {
                "glob": "**/*",
                "input": "node_modules/@celerofinancas/design-system/fonts/",
                "output": "/fonts/"
              }
            ]
          }
        }
      }
    }
  }
}

Step 2: Reference the Icon Font in Styles

Ensure that the design system styles reference the icon font. This ensures that the icons can be used throughout the application.

angular.json

{
  "projects": {
    "celerov2-ui-client": {
      "architect": {
        "build": {
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": [
                "node_modules",
                "node_modules/@celerofinancas/design-system/styles"
              ]
            }
          }
        }
      }
    }
  }
}

Step 3: Add the Icon Class

Use the cds-icon class on an <i></i> element and specify the icon you want to use with an additional class.

app.component.html

<!-- Example usage of the cds-icon class -->
<i class="cds-icon-arrow-left c-icon-medium"></i>

Explanation

1. Add the Icon Font to Assets: The angular.json file includes the path to the icon font files in the assets section. This ensures that the font files are available in the build output
2. Reference the Icon Font in Styles: The stylePreprocessorOptions section includes the path to the design system styles, which should reference the icon font. This ensures that the icons can be used throughout the application.
3. Use the Icon Class: The cds-icon class is used on an <i></i> element to include an icon in the application. Additional classes can be used to specify the icon and its size.

Conclusion

By following these steps, the cds-icon class will be configured and ready to use in your project, allowing you to include consistent and scalable icons in your application.