Below is an example of how to incorporate Material UI icons into a Custom HTML component:
<div>
<span className="iconContainer"> {{icon_person}} </span>
<span className="iconContainer"> {{icon_person_search}} </span>
<input type="button" value="Click me" onclick="msg()">
</div>
In the code above, we've used the syntax {{icon_*}} to insert an icon. The * represents the specific icon you'd like to use from the Material UI library. To choose an icon, navigate to the Material UI Icons library at Material Icons - Material UI There, you can search for and select the desired icon.
Upon locating and clicking on the chosen icon, a modal will appear. From there, copy the icon name as specified within the modal. For reference, see the red box highlighted in the images below:
When incorporating these icons into your HTML, you should use their exact names within the {{icon_*}} syntax.
For example, to utilize the "Person" icon, you would use {{icon_person}}.
Similarly, for the "PersonSearch" icon, use {{icon_person_search}}.
