圖標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"

/>
<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="http://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="http://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png"
>Snowboarding</kendo-button
>
<kendo-button
imageUrl="http://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="http://demos.telerik.com/kendo-ui/content/shared/icons/sports/golf.png"
>Golf</kendo-button
>
<kendo-button
imageUrl="http://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="http://demos.telerik.com/kendo-ui/content/shared/icons/sports/swimming.png"
>Swimming</kendo-button
>
<kendo-button
imageUrl="http://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 });