# Angular Icon Settings

You can change the default look and feel of the icons used across all Kendo UI for Angular components by configuring the [`IconSettings`](https://www.telerik.com/kendo-angular-ui/components/icons/api/iconsettings) properties. This allows you to change the type of icons, their size, theme color, variant and flip direction.

The following example demonstrates the [`IconSettings`](https://www.telerik.com/kendo-angular-ui/components/icons/api/iconsettings) properties available for customizing the built-in icons.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/icons/icon-settings/dynamic-change/source.txt)

To apply the settings globally, add [`IconSettingsService`](https://www.telerik.com/kendo-angular-ui/components/icons/api/iconsettingsservice), [`IconsService`](https://www.telerik.com/kendo-angular-ui/components/icons/api/iconsservice), and the [`ICON_SETTINGS`](https://www.telerik.com/kendo-angular-ui/components/icons/api/icon_settings) token to the `providers` array in `main.ts`. To scope the settings to a specific component, add them to that component's `providers` array instead.

```ts Global configuration
// main.ts
bootstrapApplication(AppComponent, {
    providers: [
      IconSettingsService,
      IconsService,
    { provide: ICON_SETTINGS, useValue: { type: "svg", size: "xlarge" } },
  ],
});
```

```ts Component configuration
@Component({
  ...
  providers: [
    IconSettingsService,
    IconsService,
    { provide: ICON_SETTINGS, useValue: { type: "svg", size: "xlarge" } },
  ],
})
```

## Using Font Icons

By default, the Kendo UI for Angular components use `svg` icons. However, you can switch to `font` icons if your application requires it.

The following example demonstrates a sample application using only Font icons.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/icons/icon-settings/basic/source.txt)

To display `font` icons for Kendo UI for Angular components:

1. Import the font icons in your project by [using the precompiled CSS](https://www.telerik.com/kendo-angular-ui/components/styling/icons#loading-icons-through-precompiled-css).

2. Provide the [`IconSettingsService`](https://www.telerik.com/kendo-angular-ui/components/icons/api/iconsettingsservice) and set the type of icons to `font` using the [`ICON_SETTINGS`](https://www.telerik.com/kendo-angular-ui/components/icons/api/icon_settings) token.

   ```ts Standalone component
   import { ICON_SETTINGS, IconSettingsService, IconsService } from "@progress/kendo-angular-icons";

   @Component({
       ...
       standalone: true,
       providers: [
           IconSettingsService,
           IconsService, // Required if KENDO_ICONS is imported.
           {
               provide: ICON_SETTINGS,
               useValue: { type: 'font' },
           },
       ]
   })
   ```

   ```ts NgModule
   @NgModule({
       ...
       providers: [{ provide: ICON_SETTINGS, useValue: { type: 'font' } }]
   })
   export class AppModule {}
   ```

3. To display a Font icon inside a component, set the `icon` property to the necessary icon. Check the full [list of Font icons](https://www.telerik.com/kendo-angular-ui/components/icons/icon/icon-list) provided by Kendo UI for Angular suite.

   ```html
   <kendo-dropdownbutton ... icon="star">Bookmarks</kendo-dropdownbutton>
   ```

## Suggested Links

* [Icon Overview](https://www.telerik.com/kendo-angular-ui/components/icons/icon)
* [API Reference of the Icon](https://www.telerik.com/kendo-angular-ui/components/icons/api/iconcomponent)
* [SVGIcon Overview](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon)
* [API Reference of the SVGIcon](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgiconcomponent)