# Icons

The DropDownButton provides the `Icon`, `SpriteCssClass`, and `ImageUrl` properties for configuring icons. With a specific DropDownButton instance, you have to use only one of them—if you define multiple properties, the DropDownButton will work with only one of them in the order previously stated.

* `Icon()`—This method displays the appropriate [Kendo UI font icon.](https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/font-icons)

  ```Razor HtmlHelper
      @(Html.Kendo().DropDownButton()
          .Name("DropDownButton")
          .Text("Plus")
          .Icon("plus")
      )
  ```

  ```Razor TagHelper
      <kendo-dropdownbutton name="DropDownButton" text="Plus" icon="plus">
      </kendo-dropdownbutton>
  ```

* `SpriteCssClass()`—This method displays the icon as a background of a span element instead.

  ```Razor HtmlHelper
      @(Html.Kendo().DropDownButton()
          .Name("DropDownButton")
          .Text("Plus")
          .SpriteCssClass("myPlusIcon")
      )
  ```

  ```Razor TagHelper
      <kendo-dropdownbutton name="DropDownButton" text="Plus" sprite-css-class="myPlusIcon">
      </kendo-dropdownbutton>
  ```

* `ImageUrl()`—This method applies image icons.

  ```Razor HtmlHelper
      @(Html.Kendo().DropDownButton()
              .Name("DropDownButton")
              .Text("Plus")
              .ImageUrl("url/to/myPlusIcon.png")
      )

  ```

  ```Razor TagHelper
      <kendo-dropdownbutton name="DropDownButton" text="Plus" image-url="url/to/myPlusIcon.png">
      </kendo-dropdownbutton>
  ```

## Font Icons

You can integrate FontAwesome or other font icons by setting the required third-party CSS classes over the `.SpriteCssClass()` configuration method. However, this approach will render a `k-sprite` CSS class, which applies font and size styles that may interfere with the font icon styles.

```Razor HtmlHelper
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
    <style>
        .k-button .fa {
            font-size: inherit;
            line-height: inherit;
            width: auto;
            height: auto;
            margin-left: 0;
        }
    </style>

    @(Html.Kendo().DropDownButton()
        .Name("DropDownButton")
        .Text("Archive")
        .SpriteCssClass("fa fa-archive")
        .Items(items =>
        {
            items.Add().Text("Item 1");
            items.Add().Text("Item 2");
        })
    )
```

```Razor TagHelper
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
    <style>
        .k-button .fa {
            font-size: inherit;
            line-height: inherit;
            width: auto;
            height: auto;
            margin-left: 0;
        }
    </style>

    <kendo-dropdownbutton name="DropDownButton" text="Archive" sprite-css-class="fa fa-archive">
        <dropdownbutton-items>
            <item text="Item 1"></item>
            <item text="Item 2"></item>
        </dropdownbutton-items>
    </kendo-dropdownbutton>
```

## See Also

* [Icons in the DropDownButton (Demo)](https://demos.telerik.com/aspnet-core/dropdownbutton/icons)
* [Server-Side API](https://www.telerik.com/aspnet-core-ui/documentation/api/dropdownbutton)