Icon Button
Basic clickable button with SVG icon.
| Name | Type | Default | Description |
|---|---|---|---|
| url | string | URL | Link to SVG file containing icon |
| svg | string | blank | Inline SVG for icon |
| enabled | boolean | true | When true, button can be pressed. When false, press and hover are disabled |
| width | number | 0.1 | Width and height of button in meters |
| buttonmaterial | Material | Theme button material (color #505050) | Background material. Set to override with custom material |
| disabledmaterial | Material | Theme disabled material (color #666666) | Disabled material. Set to override with custom material |
| outlinematerial | LineBasicMaterial | Theme outline material (color white) | Outline material. Set to override with custom material |
| iconmaterial | Material | MeshBasicMaterial | Override to provide your own material |
| selectable | InteractiveObjects | undefined | Add to list of objects ray caster can test for overlap |
| geometry | BufferGeoemtry | Rounded rectangle shape | Override to provide your own button geometry |
| Name | Type | Description |
|---|---|---|
| pressed | boolean | Triggered when button clicked. Event value is always true. |
<flat-ui-icon-button [svg]="svg" (pressed)="clicked($event)" [selectable]="selectable"></flat-ui-icon-button>
<flat-ui-icon-button [url]="'assets/sign-in/email.svg'"
[iconmaterial]="iconmaterial" [enabled]="false" [buttonmaterial]="buttonmaterial">
</flat-ui-icon-button>svg = '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Three.js</title><path d="M.38 0a.268.268 0 0 0-.256.332l2.894 11.716a.268.268 0 0 0 .01.04l2.89 11.708a.268.268 0 0 0 .447.128L23.802 7.15a.268.268 0 0 0-.112-.45l-5.784-1.667a.268.268 0 0 0-.123-.035L6.38 1.715a.268.268 0 0 0-.144-.04L.456.01A.268.268 0 0 0 .38 0zm.374.654L5.71 2.08 1.99 5.664zM6.61 2.34l4.864 1.4-3.65 3.515zm-.522.12l1.217 4.926-4.877-1.4zm6.28 1.538l4.878 1.404-3.662 3.53zm-.52.13l1.208 4.9-4.853-1.392zm6.3 1.534l4.947 1.424-3.715 3.574zm-.524.12l1.215 4.926-4.876-1.398zm-15.432.696l4.964 1.424-3.726 3.586zM8.047 8.15l4.877 1.4-3.66 3.527zm-.518.137l1.236 5.017-4.963-1.432zm6.274 1.535l4.965 1.425-3.73 3.586zm-.52.127l1.235 5.012-4.958-1.43zm-9.63 2.438l4.873 1.406-3.656 3.523zm5.854 1.687l4.863 1.403-3.648 3.51zm-.54.04l1.214 4.927-4.875-1.4zm-3.896 4.02l5.037 1.442-3.782 3.638z"/></svg>'