Merge pull request #298 from apexcharts/fix-toolbar-icons

#297 Fixed custom icons

Author: joadan

docs/BlazorApexCharts.Docs/Components/Features/Toolbar/ChangeIcon.razor

@@ -0,0 +1,49 @@
+<DemoContainer>
+    <ApexChart TItem="Order"
+               Title="Order Net Value" Options="options">
+
+        <ApexPointSeries TItem="Order"
+                         Items="Orders"
+                         Name="Gross Value"
+                         SeriesType="SeriesType.Line"
+                         XValue="@(e => e.Country)"
+                         YAggregate="@(e => e.Sum(e => e.GrossValue))"
+                         OrderByDescending="e=>e.Y" />
+
+        <ApexPointSeries TItem="Order"
+                         Items="Orders"
+                         Name="Net Value"
+                         SeriesType="SeriesType.Line"
+                         XValue="@(e => e.Country)"
+                         YAggregate="@(e => e.Sum(e => e.NetValue))"
+                         OrderByDescending="e=>e.Y" />
+    </ApexChart>
+</DemoContainer>
+
+@code {
+    private List<Order> Orders { get; set; } = SampleData.GetOrders();
+    private ApexChartOptions<Order> options { get; set; } = new();
+
+    protected override void OnInitialized()
+    {
+
+        var downloadIcon = @"<svg xmlns='http://www.w3.org/2000/svg'  width='20' height='20' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'>
+   <path stroke='none' d='M0 0h24v24H0z' fill='none'></path>
+   <path d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2'></path>
+   <path d='M7 11l5 5l5 -5'></path>
+   <path d='M12 4l0 12'></path>
+</svg>";
+
+        options.Chart = new Chart
+            {
+                Toolbar = new ApexCharts.Toolbar
+                {
+                    Tools = new Tools { Download = downloadIcon }
+                }
+            };
+
+
+        base.OnInitialized();
+    }
+
+}

docs/BlazorApexCharts.Docs/Components/Features/Toolbar/Toolbar.razor

@@ -0,0 +1,12 @@
+@page "/features/toolbar"
+
+<DocExamples Title="Custom Tooltip">
+
+    <CodeSnippet Title="Change Icon" ClassName=@typeof(ChangeIcon).ToString()>
+        <Snippet>
+            <ChangeIcon />
+        </Snippet>
+    </CodeSnippet>
+
+   
+</DocExamples>

docs/BlazorApexCharts.Docs/Shared/MainNavigation.razor

@@ -160,6 +160,7 @@
                 <NavbarMenuItem Text="Size" Href="features/chart-size" />
                 <NavbarMenuItem Text="State" Href="features/state" />
                 <NavbarMenuItem Text="Syncronized charts" Href="features/syncronized" />
+                <NavbarMenuItem Text="Toolbar" Href="features/toolbar" />
                 <NavbarMenuItem Text="Custom Tooltip" Href="features/tooltip" />
             </SubMenu>
 

src/Blazor-ApexCharts/Models/ApexChartOptions.cs

@@ -1410,7 +1410,8 @@ public class Tools
         public List<ToolCustomIcon> CustomIcons { get; set; }
 
         /// <summary>
-        /// Show the download menu / hamburger icon in the toolbar. If you want to display a custom icon instead of hamburger icon, you can provide HTML string in this property.
+        /// Show the download menu / hamburger icon in the toolbar. 
+        /// If you want to display a custom icon, you can provide HTML string in this property.
         /// 
         /// <code>
         /// download: true 
@@ -1420,40 +1421,46 @@ public class Tools
         /// ApexCharts has built-in support to allow exporting the chart to popular image formats like PNG or SVG and also allows exporting the chart data to a CSV file.
         /// By default, all XY charts have the toolbar enabled in them which has a hamburger icon at the top right corner. Clicking the hamburger icon opens a menu which has following options to download.
         /// </summary>
-        public bool Download { get; set; } = true;
+        public object Download { get; set; } = true;
 
         /// <summary>
-        /// Show the panning icon in the toolbar.
+        /// Show the panning icon in the toolbar. 
+        /// If you want to display a custom icon for Pan, you can provide HTML string in this property.
         /// </summary>
-        public bool Pan { get; set; } = true;
+        public object Pan { get; set; } = true;
 
         /// <summary>
-        /// Reset the chart data to it's initial state after zommin/zoomout/panning. If you want to display a custom icon for reset, you can provide HTML string in this property.
+        /// Reset the chart data to it's initial state after zommin/zoomout/panning. 
+        /// If you want to display a custom icon for reset, you can provide HTML string in this property.
         /// </summary>
-        public bool Reset { get; set; } = true;
+        public object Reset { get; set; } = true;
 
         /// <summary>
-        /// Show the rectangle selection icon in the toolbar. If you want to display a custom icon for selection, you can provide HTML string in this property.
+        /// Show the rectangle selection icon in the toolbar. 
+        /// If you want to display a custom icon for selection, you can provide HTML string in this property.
         /// </summary>
         /// <remarks>
         /// Make sure to also enable <see cref="Chart.Selection"/> when showing the selection tool.
         /// </remarks>
-        public bool Selection { get; set; } = true;
+        public object Selection { get; set; } = true;
 
         /// <summary>
-        /// Show the zoom icon which is used for zooming by dragging selection on the chart area. If you want to display a custom icon for zoom, you can provide HTML string in this property.
+        /// Show the zoom icon which is used for zooming by dragging selection on the chart area. 
+        /// If you want to display a custom icon for zoom, you can provide HTML string in this property.
         /// </summary>
-        public bool Zoom { get; set; } = true;
+        public object Zoom { get; set; } = true;
 
         /// <summary>
-        /// Show the zoom-in icon which zooms in 50% from the visible chart area. If you want to display a custom icon for zoom-in, you can provide HTML string in this property.
+        /// Show the zoom-in icon which zooms in 50% from the visible chart area. 
+        /// If you want to display a custom icon for zoom-in, you can provide HTML string in this property.
         /// </summary>
-        public bool Zoomin { get; set; } = true;
+        public object Zoomin { get; set; } = true;
 
         /// <summary>
-        /// Show the zoom-out icon which zooms out 50% from the visible chart area. If you want to display a custom icon for zoom-out, you can provide HTML string in this property.
+        /// Show the zoom-out icon which zooms out 50% from the visible chart area. 
+        /// If you want to display a custom icon for zoom-out, you can provide HTML string in this property.
         /// </summary>
-        public bool Zoomout { get; set; } = true;
+        public object Zoomout { get; set; } = true;
     }
 
     /// <summary>