Skip to main content
Solved

Can we incorporate the google material icons into the index.html of Universal GUI ?

  • January 14, 2021
  • 1 reply
  • 59 views
mperrott
Hero
Forum|alt.badge.img+12

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 ?

Best answer by Jasper

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 ...

 

View original
This topic has been closed for comments

Jasper
Superhero
  • JasperSuperhero
  • January 15, 2021

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

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings