Is there a way apply a custom icon to a custom toolbar item
Hi Lonny Blank,
Based on your requirements, we suggest using the Toolbar ItemModel property PrefixIcon option to render a
custom icon. Kindly refer to the code snippet and sample below for your
reference.
|
<SfGrid TValue="Order" DataSource="Orders" @ref="Grid" ID="Grid" AllowSorting="true" AllowFiltering="true" Toolbar="@Toolbaritems"> </SfGrid>
@code { public List<Order> Orders { get; set; } private List<Object> Toolbaritems { get; set; } = new List<Object>() { "Add", "Delete", "Edit", "Update", "Cancel" };
SfGrid<Order> Grid { get; set; } protected override void OnInitialized() {
Toolbaritems.Add(new Syncfusion.Blazor.Navigations.ItemModel() { Text = "Play", TooltipText = "Play", Id = "Play", PrefixIcon = "bi bi-play" }); Orders = Enumerable.Range(1, 7).Select(x => new Order() { OrderID = 1000 + x, CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], Freight = 2.1 * x, }).ToList(); } |
Regards,
Prathap Senthil
Attachment: DataGridToolbarCustomIcon_476bbbbc.zip
Based on your requirement, if you want to use our built-in icons, you just need to add the prefix 'e-' before the icon's class., define the available icon’s class with the 'e-' prefix Kindly refer to the sample below for your reference.
|
|
It seems that you are facing an issue. Could you please share a simple, reproducible sample that demonstrates the problem? Alternatively, kindly share your attempts to replicate the issue using the attached sample and let us know how you are referencing the theme in your project.
Note: We recommend checking our Icons List documentation, which provides information on the icons supported in different themes. You can find this information at the following link: https://blazor.syncfusion.com/documentation/appearance/icons#icons-list. Please ensure that the icons you are using are supported in the selected theme
Attachment: DataGridToolbarCustomIcon_eb6ec9e6.zip
Based on your requirements, we suggest using the Toolbar ItemModel property Template option to render an SVG for the icon. Kindly refer to the code snippet and sample below for your reference.
|
<SfGrid TValue="Order" DataSource="Orders" @ref="Grid" ID="Grid" AllowSorting="true" AllowFiltering="true" Toolbar="@Toolbaritems"> </SfGrid>
@code { public List<Order> Orders { get; set; } private List<Object> Toolbaritems { get; set; } = new List<Object>() { "Add", "Delete", "Edit", "Update", "Cancel" };
public Microsoft.AspNetCore.Components.RenderFragment title {
//here you can customize based on your need. get { return @<div class="PlayIcon" style="display: flex; align-items: center;"> <img src="s.svg" alt="Play Icon" style="width:35px;height:35px;margin-right:-20px;" /> <span>Play</span> </div>; } } SfGrid<Order> Grid { get; set; } protected override void OnInitialized() {
Toolbaritems.Add(new Syncfusion.Blazor.Navigations.ItemModel() { TooltipText = "Play", Id = "Play", Template = title });
Orders = Enumerable.Range(1, 7).Select(x => new Order() { OrderID = 1000 + x, CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], Freight = 2.1 * x, }).ToList(); } |
Attachment: DataGridToolbarCustomIcon_56e1f4e4.zip
Yes, you can make the icon behave like other toolbar buttons by applying the same CSS styles that are used for default toolbar buttons. .Please refer to the code snippet to make the custom icon look like a standard toolbar button.
|
public Microsoft.AspNetCore.Components.RenderFragment title {
//here you can customize based on your need. get { return @<div class="e-control e-btn e-lib e-tbar-btn e-tbtn-txt" style="display: flex; align-items: center;"> <img src="s.svg" alt="Play Icon" style="width:35px;height:35px;margin-right:-20px;" /> <span class="e-tbar-btn-text">Play</span> </div>; } }
|
