This is a migrated thread and some comments may be shown as answers.

Icon name mistakes

1 Answer 619 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Peter
Top achievements
Rank 2
Iron
Veteran
Iron
Peter asked on 28 Dec 2020, 01:01 PM

H

in https://docs.telerik.com/blazor-ui/common-features/font-icons  is written:

You can find the rendered icons in the Kendo UI Web Font Icons Library article.

There are some mistakes in the names.

Example in Charts section:

.k-i-line-markers Unicode: ea10
.k-i-bar Unicode: ea1c

In the definition in _content\Telerik.UI.for.Blazor\css\kendo-theme-bootstrap\all.css I found:

.k-i-graph::before {content: "\ea00";}
.k-i-chart-column-clustered::before {content: "\ea01";}
.k-i-chart-column-stacked::before {content: "\ea02";}
.k-i-chart-column-stacked100::before {content: "\ea03";}
.k-i-chart-column-range::before {content: "\ea04";}
.k-i-chart-bar-clustered::before {content: "\ea05";}
.k-i-chart-bar-stacked::before {content: "\ea06";}
.k-i-chart-bar-stacked100::before {content: "\ea07";}
.k-i-chart-bar-range::before {content: "\ea08";}
.k-i-chart-area-clustered::before {content: "\ea09";}
.k-i-chart-area-stacked::before {content: "\ea0a";}
.k-i-chart-area-stacked100::before {content: "\ea0b";}
.k-i-chart-area-range::before {content: "\ea0c";}
.k-i-chart-line::before {content: "\ea0d";}
.k-i-chart-line-stacked::before {content: "\ea0e";}
.k-i-chart-line-stacked100::before {content: "\ea0f";}
.k-i-chart-line-markers::before {content: "\ea10";}
.k-i-chart-line-stacked-markers::before {content: "\ea11";}
.k-i-chart-line-stacked100-markers::before {content: "\ea12";}
.k-i-chart-pie::before {content: "\ea13";}
.k-i-chart-doughnut::before {content: "\ea14";}
.k-i-chart-scatter::before {content: "\ea15";}
.k-i-chart-scatter-smooth-lines-markers::before {content: "\ea16";}
.k-i-chart-scatter-smooth-lines::before {content: "\ea17";}
.k-i-chart-scatter-straight-lines-markers::before {content: "\ea18";}
.k-i-chart-scatter-straight-lines::before {content: "\ea19";}
.k-i-chart-bubble::before {content: "\ea1a";}
.k-i-chart-candlestick::before {content: "\ea1b";}
.k-i-chart-ohlc::before {content: "\ea1c";}

The most chart icon starts with k-i-chart-.

Please correct the Kendo UI Web Font Icons Library article.

They are missing in https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.IconName

Regards,

Peter

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 29 Dec 2020, 03:37 PM

Hi Peter,

The API reference for the IconName static class lists the icons you can use with Blazor. Indeed, there are some issues in the font icons article and we're working on resolving them. You can Subscribe to the progress of that here.

In the meantime, here's how you can use the bar chart icon:

<TelerikIcon Icon="chart-bar-clustered"></TelerikIcon>

<span class="k-icon k-i-chart-bar-clustered"></span>

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions
Asked by
Peter
Top achievements
Rank 2
Iron
Veteran
Iron
Answers by
Marin Bratanov
Telerik team
Share this question
or