[✅ Solution] Google Icon Font in calculations

Roman · February 20, 2024, 12:45pm

I am in the process of porting an app from bubble.io to Tape. [Original]

An important UI element there was the upload overview. This showed which files had already been uploaded for each record. Now I would like to recreate this in Tape.

Since the calculation field accepts HTML, I started with a simple attempt. [HTML Editor]

But the preview only shows me text and not the icons. Is this not possible, or am I doing something wrong?

Link to Google Fonts: Material Symbols and Icons - Google Fonts

Code:

`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.material-icons {font-family: 'Material Icons'; font-size: 28px;}

</style>
</head>
<body>
<div style="display: flex; justify-content: center; align-items: center;">
 <div style="display: flex; align-items: center; border: 5px solid #1164A3; border-radius: 100px; padding: 10px;">
  <span class="material-icons" style="color: #FF5733;">favorite</span>
  <span class="material-icons" style="color: #33FF57; margin: 0 20px;">shopping_cart</span>
  <span class="material-icons" style="color: #5733FF;">settings</span>
 </div>
</div>
</body>
</html>`

The goal would then be to adjust the HTML code with a switch or if else case so that the corresponding icons are recolored from gray to blue.

BONUS: If it were possible to display calculation fields in the tile view (as in Podio), I could already display the status there.

tomaz · February 21, 2024, 11:18pm

@Roman this is how I do it in almost every app.
First field is almost always “title” if we need more info in related, it can also be hidden. Just add calculation so it is visible in related app. If you have a big app it can take some time to load and refresh all the fields for them to become visible in related.