New to Kendo UI for Vue? Start a free 30-day trial

FontIconProps

Interface

Represents the props of the KendoVue FontIcon component.

Definition

Package:@progress/kendo-vue-common

Properties

Sets the aria-label of the icon element.

class?

string

Sets a list of CSS classes on the root DOM element.

Sets the fill mode of the icon.

The possible values are:

  • solid—Renders the default fill mode of the icon.
  • outline—Renders an outlined version of the icon.
  • duotone—Renders a two-tone version of the icon.

flip?

string

Sets the flip direction of the icon.

The possible values are:

  • default (Default)—Does not flip the icon.
  • horizontal—Flips the icon horizontally.
  • vertical—Flips the icon vertically.
  • both—Flips the icon both horizontally and vertically.

id?

string

Sets the id of the icon element.

name?

string

Sets the name of the font icon.

Sets the size of the icon.

The possible values are: default (Default)—Font-size: 16px; Width: 16px; Height: 16px. xsmall—Font-size: 12px; Width: 12px; Height: 12px. small—Font-size: 14px; Width: 14px; Height: 14px. medium—Font-size: 16px; Width: 16px; Height: 16px. large—Font-size: 20px; Width: 20px; Height: 20px. xlarge—Font-size: 24px; Width: 24px; Height: 24px. xxlarge—Font-size: 32px; Width: 32px; Height: 32px. xxxlarge—Font-size: 48px; Width: 48px; Height: 48px.

You can use the style prop to apply a custom font size to the icon.

tabIndex?

number

Sets the tabIndex of the icon element.

Sets the theme color of the icon.

The possible values are:

  • inherit (Default)—Applies the current color.
  • primary —Applies the primary theme color.
  • secondary—Applies the secondary theme color.
  • tertiary— Applies the tertiary theme color.
  • info—Applies the info theme color.
  • success— Applies the success theme color.
  • warning— Applies the warning theme color.
  • error— Applies the error theme color.
  • inverse— Applies the inverse theme color.

If you do not set this property, the icon takes the color of its parent.

You can use the style prop to apply custom color styles to the icon.

title?

string

Sets the title of the icon element.