[docs] Add a demo for a custom tick label

[prakhargupta1]

Preview: https://deploy-preview-20073--material-ui-x.netlify.app/x/react-charts/axis/#adding-svg-icons

[mui-bot]

Deploy preview: https://deploy-preview-20073--material-ui-x.netlify.app/

Updated pages:

• docs/data/charts/axis/axis.md

Bundle size report

Bundle	Parsed size	Gzip size
@mui/x-data-grid	0B(0.00%)	0B(0.00%)
@mui/x-data-grid-pro	0B(0.00%)	0B(0.00%)
@mui/x-data-grid-premium	0B(0.00%)	0B(0.00%)
@mui/x-charts	0B(0.00%)	0B(0.00%)
@mui/x-charts-pro	0B(0.00%)	0B(0.00%)
@mui/x-charts-premium	0B(0.00%)	0B(0.00%)
@mui/x-date-pickers	0B(0.00%)	0B(0.00%)
@mui/x-date-pickers-pro	0B(0.00%)	0B(0.00%)
@mui/x-tree-view	0B(0.00%)	0B(0.00%)
@mui/x-tree-view-pro	0B(0.00%)	0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 914029f

[codspeed-hq]

CodSpeed Performance Report

Merging #20073 will not alter performance

_{Comparing prakhargupta1:svg-icon (914029f) with master (2423e2f)¹}

Summary

✅ 13 untouched

Footnotes

1. No successful run was found on master (fc6ab97) during the generation of this report, so 2423e2f was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

[prakhargupta1]

@alexfauquette Do you think this demo is meaningful to be added to the docs? If Yes, is 'Custom components' the right place for it?

[alexfauquette]

Maybe axis customization would be better 🤔
https://mui.com/x/react-charts/axis/#axis-customization

[bernardobelchior]

It's a bit weird that we're using a foreignObject to render an SVG icon, but I guess it's valid.

[JCQuintas]

Yeah it feels a bit useless. You could probably achieve this more efficiently with just the svg.

Maybe we could use the logo images here instead? 🤔

[prakhargupta1]

Makes sense, I'll try that.

[bernardobelchior]

The images are not centered on mobile.

To properly fix this, I think we need to access the xScale and obtain the bar's width so that we can properly center the images within the bar