图标Button

---

立即下载Kendo UI for Angular

您可以通过向组件显示图像、预定义或自定义图标和SVG图标来增强Button的文本内容。

从web标准的角度来看，最好使用背景图像，因为图标是用来装饰的，而不是用来表示结构内容的。

按钮提供了以下选项来设置组件内的图像或图标：

——在按钮内设置一个图标。要获得可用图标的完整列表，请转到Kendo UI For Angular支持的字体图标列表。

—在按钮内设置SVG图标。要获得可用图标的完整列表，请转到Kendo UI For Angular支持的SVG图标列表。

 ——显示CSS类中的图标。使用iconClass适合渲染FontAwesome或其他第三方字体图标。

——通过 URL 链接设置图像图标。

从R2 2023 (v13.0.0)开始，Kendo UI for Angular组件和Kendo UI主题中的默认图标类型从 font更改为svg。设置svgIcon属性，或者继续。

SVG图标按钮

要在按钮内部显示SVG图标，请将按钮的svgIcon属性设置为所需的svgIcon。

<kendo-button [svgIcon]="svgCart">Cart</kendo-button>

import { cartIcon, SVGIcon } from '@progress/kendo-svg-icons';

public svgCart: SVGIcon = cartIcon;

下面的示例演示如何在Button中设置SVG图标：

查看源代码：

app.component.ts：

import { Component } from '@angular/core';
import { SVGIcon, cartIcon, anchorIcon, codeIcon } from '@progress/kendo-svg-icons';

@Component({
selector: 'my-app',
template: `
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 example-col">
<kendo-button [svgIcon]="svgCart">Buy</kendo-button>
<kendo-button [svgIcon]="svgCart" title="Cart"></kendo-button>
</div>

<div class="col-xs-12 col-sm-6 col-md-4 example-col">
<kendo-button [svgIcon]="svgCode">Insert Code</kendo-button>
<kendo-button [svgIcon]="svgCode" title="Insert Code"></kendo-button>
</div>

<div class="col-xs-12 col-sm-6 col-md-4 example-col">
<kendo-button [svgIcon]="svgAnchor">Ferry Port</kendo-button>
<kendo-button [svgIcon]="svgAnchor" title="Ferry Port"></kendo-button>
</div>
</div>
`,
styles: [
`
kendo-button {
margin: 0 3px;
}
`,
],
})
export class AppComponent {
public svgCart: SVGIcon = cartIcon;
public svgAnchor: SVGIcon = anchorIcon;
public svgCode: SVGIcon = codeIcon;
}

app.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { ButtonsModule } from '@progress/kendo-angular-buttons';

import { AppComponent } from './app.component';

@NgModule({
bootstrap: [AppComponent],
declarations: [AppComponent],
imports: [BrowserModule, BrowserAnimationsModule, ButtonsModule],
})
export class AppModule {}

main.ts：

import './polyfills';

import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

enableProdMode();
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule, { preserveWhitespaces: true });

字体图标按钮

要在按钮内部显示一个字体图标：

1.使用Icons包的令牌并将图标类型设置为font。

2.根据字体图标库，您可以设置：

• icon属性设置为KendoUI主题中的字体图标。要了解详细信息，请查看Kendo UI for Angular支持的字体图标列表。

<kendo-button icon="calendar">Events</kendo-button>

• iconClass属性设置为第三方字体图标库(如FontAwesome)。

<kendo-button iconClass="fa fa-taxi">Take a Taxi</kendo-button>

下面的示例演示如何设置Button的icon和iconClass属性：

查看源代码：

app.component.ts：

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-3 example-col">
<p>Kendo Font Icon</p>
<kendo-button icon="calendar">Events</kendo-button>
<kendo-button icon="calendar" title="Events"></kendo-button>
</div>

<div class="col-xs-12 col-sm-6 col-lg-3 example-col">
<p>FontAwesome Library</p>
<link
rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"
/>
<kendo-button iconClass="fa fa-taxi">Take a Taxi</kendo-button>
<kendo-button iconClass="fa fa-taxi" title="Take a Taxi"></kendo-button>
</div>
</div>
`,
styles: [
`
kendo-button {
margin: 0 3px;
}
`,
],
})
export class AppComponent {}

app.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { ICON_SETTINGS } from '@progress/kendo-angular-icons';

import { AppComponent } from './app.component';

@NgModule({
bootstrap: [AppComponent],
declarations: [AppComponent],
imports: [BrowserModule, BrowserAnimationsModule, ButtonsModule],
providers: [{ provide: ICON_SETTINGS, useValue: { type: 'font' } }],
})
export class AppModule {}

main.ts：

import './polyfills';

import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

enableProdMode();
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule, { preserveWhitespaces: true });

使用图像URL

要想在Button中显示来自URL链接的图像，请设置组件的imageUrl属性。

<kendo-button imageUrl="//demos.telerik.com/kendo-ui/content/shared/icons/sports/golf.png" >Take a Taxi</kendo-button>

下面的例子演示了按钮的imageUrl属性：

查看源代码：

app.component.ts：

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 example-col">
<kendo-button imageUrl="//demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png"
>Snowboarding</kendo-button
>
<kendo-button
imageUrl="//demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png"
title="Snowboarding"
></kendo-button>
</div>

<div class="col-xs-12 col-sm-6 col-md-4 example-col">
<kendo-button imageUrl="//demos.telerik.com/kendo-ui/content/shared/icons/sports/golf.png"
>Golf</kendo-button
>
<kendo-button
imageUrl="//demos.telerik.com/kendo-ui/content/shared/icons/sports/golf.png"
title="Golf"
></kendo-button>
</div>

<div class="col-xs-12 col-sm-6 col-md-4 example-col">
<kendo-button imageUrl="//demos.telerik.com/kendo-ui/content/shared/icons/sports/swimming.png"
>Swimming</kendo-button
>
<kendo-button
imageUrl="//demos.telerik.com/kendo-ui/content/shared/icons/sports/swimming.png"
title="Swimming"
></kendo-button>
</div>
</div>
`,
styles: [
`
kendo-button {
margin: 0 3px;
}
`,
],
})
export class AppComponent {}

app.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { ButtonsModule } from '@progress/kendo-angular-buttons';

import { AppComponent } from './app.component';

@NgModule({
bootstrap: [AppComponent],
declarations: [AppComponent],
imports: [BrowserModule, BrowserAnimationsModule, ButtonsModule],
})
export class AppModule {}

main.ts：

import './polyfills';

import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

enableProdMode();
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule, { preserveWhitespaces: true });