Perspective Icons: Sprites Fit Backgrounds, Not Cursors

The operator moves the pointer over a Perspective component and sees a black square instead of the selected icon. The path /data/perspective/icons/material.svg#insert_emoticon can display the icon in a browser and can work as a CSS background, but that does not make the SVG sprite fragment a usable cursor image. For a dependable custom cursor, load a standalone, correctly sized SVG into Image Management and reference its /system/images/... path.

Which icon-loading approaches apply?

Perspective's icon library is packaged as an SVG sprite. The fragment after # selects a symbol inside that sprite. CSS backgrounds and CSS cursors both accept url(...), but the browser processes those resources in different rendering contexts.

Use the sprite path for decorative backgrounds and the standalone managed image for cursors. Both configurations have a valid role, but they are not interchangeable. The managed image is the recommended cursor configuration because the browser receives one complete SVG rather than a reference to a symbol embedded in a larger sprite.

Why does the icon become a black square?

What the screen is telling you is that the CSS rule created a cursor image box, but the intended symbol was not painted correctly. A successful browser navigation to the sprite URL proves that the route is reachable; it does not prove that the browser's cursor-image decoder can render the fragment.

An SVG sprite is a container of reusable definitions. The fragment identifier selects insert_emoticon, while the containing file remains material.svg. A background is painted into an element with CSS-controlled width, height, padding, and background layout. A cursor has no normal element box, so rules such as width, height, background-size, and padding do not size the image inside cursor: url(...).

The black square therefore points to an asset-rendering problem, not an incorrect icon name alone. Test the same sprite URL as a background. If the expected icon appears there but the cursor stays black, stop changing component dimensions: those dimensions affect the component, not the cursor bitmap.

Does the tag, driver, or controller affect the cursor?

No tag or controller value is required to render a static CSS cursor. Trace the symptom from the screen backward and stop at the layer where it fails:

This separation prevents an HMI presentation fault from turning into unnecessary PLC or driver troubleshooting. If the cursor rule is present in computed CSS and the image request succeeds, concentrate on the image format and its dimensions.

How should a Perspective icon be used as a background?

The sprite approach is efficient when the icon belongs inside the component rather than replacing the mouse pointer. Give the receiving element or pseudo-element a real drawing area.

1. Apply the rule to a component element or a pseudo-element such as :before.
2. Provide nonempty pseudo-element content, such as content: ' ', so the pseudo-element generates a box.
3. Assign background-image: url('/data/perspective/icons/material.svg#insert_emoticon').
4. Supply dimensions through the element's layout, width and height, or padding. The demonstrated dropdown technique used padding to create visible space.
5. Inspect the rendered element. Confirm that its box has nonzero width and height and that no foreground fill is covering the background.

.iaDropdownCommon_options [data-label='YourLabel']:before {
  padding: 10px;
  content: ' ';
  background-image: url('/data/perspective/icons/material.svg#insert_emoticon');
}

This rule illustrates the supported pattern from the installation. It targets a dropdown option by its data-label, creates a pseudo-element, and paints the icon as its background. Treat that selector as component-specific; verify it against the rendered markup before reusing it elsewhere.

How should the custom cursor be configured?

Use a complete SVG file whose own document defines the artwork and usable dimensions. Cursor sizing belongs in the asset, not in the dimensions of the Perspective component.

1. Create or obtain a standalone SVG containing only the required cursor graphic. Give its root SVG an explicit drawing area and viewport rather than depending on an external sprite symbol.
2. Load the file into Image Management. The installation already uses the managed-image form /system/images/flash.svg.
3. Apply the cursor declaration to the intended style scope: cursor: url('/system/images/flash.svg'), pointer.
4. Keep pointer after the URL. The browser uses it when the custom image cannot be decoded or accepted.
5. If the cursor is still rejected, reduce or revise the standalone asset according to the target browser's cursor-image constraints. Changing the Perspective component's CSS width or height will not resize the cursor source.

Do not add a Web Dev endpoint merely to wrap a static icon unless the project needs dynamic image generation or access logic. For a fixed cursor, Image Management has fewer moving parts and avoids coupling pointer rendering to endpoint execution.

How do you verify the fix?

1. Open the Perspective session in every browser used by operators.
2. Move the pointer outside and inside the styled component. Confirm that the custom cursor activates only within the intended hit area.
3. Inspect computed styles and confirm that cursor contains the managed-image URL and the pointer fallback.
4. Load /system/images/flash.svg directly in the same session. Confirm that it returns the standalone artwork rather than an SVG sprite container.
5. Temporarily enter an invalid custom-image path and confirm that the pointer falls back to pointer. Restore the valid path and verify that the standalone icon returns.

FAQ