Global Styling

YCloud icons can be customized using the inputs for color, size and stroke width.

To style all icons globally, you can either use CSS or configure global defaults using provideYCloudConfig.

We recommend using CSS for global styling, as it is the most straightforward approach. However, CSS rules may override the size, color, and strokeWidth inputs on individual icons. If you need to keep those inputs configurable per icon, use provideYCloudConfig instead.

Configuring global defaults

YCloud Angular provides the provideYCloudConfig provider to set default properties for all icons.

You can define global defaults (such as size, color, or strokeWidth) while still allowing individual icons to override them through inputs.

Register the provider in your application configuration or in a top-level component:

import { ApplicationConfig } from '@angular/core';
import { provideYCloudConfig } from '@ycloud-web/icons-angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideYCloudConfig({
      strokeWidth: 1.5,
    }),
  ],
};

Style by using CSS

Styling icons globally can be done using CSS.

All YCloud icons include the ycloud class. You can use this class in your styles to target every icon in your application.

• The color of the icons can be changed using the color property.
• The size of the icons can be changed using width and height.
• The stroke width of the icons can be changed using stroke-width.

.ycloud {
  /* Change this! */
  color: #ffadff;
  width: 56px;
  height: 56px;
  stroke-width: 1px;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 6px;
}

Open Sandbox

Absolute stroke width

To keep the stroke width constant regardless of icon size, apply vector-effect: non-scaling-stroke to the icon's children. See absolute-stroke-width for more details.

.ycloud {
  width: 48px;
  height: 48px;
  stroke-width: 1.5;
}

.ycloud * {
  vector-effect: non-scaling-stroke;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 6px;
}

Open Sandbox