Skip to main content

Hi,

The requirement is simple.

We have a view where we need to display a note on the screen for the usage of our buttons Tasks.

The buttons tasks themselves are only an icon, taken from googles material.io .

The note itself is a field of HTML domain and we placed the below:

<p>Please contact us <i class="material-icons">contact_mail</i> if having second thoughts on approved <i class="material-icons">thumb_up</i> or disapproved <i class="material-icons">thumb_down</i> planning </p>

The result should be something like this:

In order to load the images in the note field, we added in the index.html header of the Universal GUI the line as instructed of:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 

In order for the images be incorporated within the text as shown in the image above.

 

Unfortunately it is blocked. Any idea why ?

Hi mperrot,

The contents of the HTML field are displayed inside an iFrame for security, so the link to the stylesheet will indeed not work. 

One option would be to incorporate the contents of the SVG in the HTML, for example:

Please contact us 

<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M0 0h24v24H0z" fill="none"/><path d="M21 8V7l-3 2-3-2v1l3 2 3-2zm1-5H2C.9 3 0 3.9 0 5v14c0 1.1.9 2 2 2h20c1.1 0 1.99-.9 1.99-2L24 5c0-1.1-.9-2-2-2zM8 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H2v-1c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1zm8-6h-8V6h8v6z"/></svg>

if having second thoughts ...

 

Terms & ConditionsCookie settings