Unplanned
Last Updated:
25 May 2022 11:17
by ADMIN
Kyle
Created on:
24 May 2022 23:52
Category:
KendoReact
Type:
Feature Request
JSX.Element icon prop for Button
As it happens, none of the existing ways of setting icons in the Button component work with either of the icon libraries we are using, which are:
- Google Material Symbols, which uses ligatures to select icons rather than class names.
- Material Design Icons via @mdi/react and @mdi/js, which renders programmatically generated inline SVGs. These icons technically can be downloaded as finished SVGs for use with the
imageUrlproperty, but only a single icon at a time, which is significantly less convenient than having access to the entire library at once when using the @mdi packages.
Rather than try to separately add specific support for these (and a thousand other) icon strategies, however, you could add support for both (and a thousand others) at once by just having something like an iconJsx property. It would accept JSX.Element, and whatever it is given gets rendered inside the span.k-button-icon.k-icon.
So you could do something like this...
<h1>How will you attack?</h1>
{/* Google Material Symbols */}
<Button iconJsx={<span className="material-symbols-outlined">local_fire_department</span>}>Fire Breath</Button>
{/* @mdi/react + @mdi/js */}
<Button iconJsx={<Icon path={mdiKabaddi} />}>Target Weak Spot</Button>
{/* A poop emoji */}
<Button iconJsx={<span role="img" aria-label="poop">💩</span>}>Bio Weapon</Button>To get something like this...
<h1>How will you attack?</h1>
<button class="k-button k-button-md k-button-rectangle k-button-solid k-button-solid-base k-rounded-md">
<span role="presentation" class="k-button-icon k-icon">
<span class="material-symbols-outlined">local_fire_department</span>
</span>
<span class="k-button-text">Fire Breath</span>
</button>
<button class="k-button k-button-md k-button-rectangle k-button-solid k-button-solid-base k-rounded-md">
<span role="presentation" class="k-button-icon k-icon">
<svg viewBox="0 0 24 24">
<path d="M11.2 10.6C12.2 11.6 13.4 12.1 14.8 12.1L14.9 14.2C13 14.2 11.3 13.5 9.8 12.1L9.1 11.4L6.8 13.8L9 15.9V21.9H7V16.7L5.7 15.5V17.7L1.5 22L.1 20.6L3.7 17L2.5 13.5C2.3 12.9 2.6 12.4 3.1 12L6.4 8.7C6.8 8.2 7.3 8 7.8 8C8.3 8 8.6 8.1 8.9 8.3L11.2 10.6M24 11.9H22V8.5L20.2 7.8L21.1 12.2L22.1 17.4L23 21.8H20.9L19.1 13.8L17 15.8V21.8H15V14.3L17.1 12.3L16.5 9.3C15.9 9.9 15.2 10.5 14.4 10.9C13.5 10.8 12.6 10.4 11.9 9.7C13.5 9.4 14.6 8.6 15.3 7.4L16.3 5.8C16.9 4.8 17.8 4.5 18.9 5L24 7.2V11.9M11.4 4.4C12.5 4.4 13.4 5.3 13.4 6.4C13.4 7.5 12.5 8.4 11.4 8.4C10.3 8.4 9.4 7.5 9.4 6.4C9.4 5.3 10.3 4.4 11.4 4.4M16.5 .3C17.6 .3 18.5 1.2 18.5 2.3C18.5 3.4 17.6 4.3 16.5 4.3C15.4 4.3 14.5 3.4 14.5 2.3C14.5 1.2 15.4 .3 16.5 .3Z" style="fill: currentcolor;"></path>
</svg>
</span>
<span class="k-button-text">Target Weak Spot</span>
</button>
<button class="k-button k-button-md k-button-rectangle k-button-solid k-button-solid-base k-rounded-md">
<span role="presentation" class="k-button-icon k-icon">
<span role="img" aria-label="poop">💩</span>
</span>
<span class="k-button-text">Bio Weapon</span>
</button>
1 comment
ADMIN
Filip
Posted on:
25 May 2022 11:17