How to add icon in the start of Text input in Gmail Addon

[Shivharakh Yadav]

Hello, community,

I am working on developing a Gmail Add-on using Google Apps Script and I'm trying to achieve a similar functionality to what Bootstrap provides with its input group and prefix functionality. Specifically, I want to add a prefix (icon or text) to an input field within the Gmail Add-on.

In Bootstrap, I can achieve this with the following code:


<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

I want to replicate this kind of prefix functionality in a Gmail Add-on, where users can see a symbol or text before the input field, and the input field resizes accordingly.
For reference, here's the functionality I'm aiming for, as seen in Google Sheets: (https://prnt.sc/u4cLB1DT4uNs).

My questions are:
1. Is it possible to achieve this kind of input prefix functionality within a Gmail Add-on using Google Apps Script?

2. If yes, what would be the general approach to implement this? Are there any specific methods or components provided by Google Apps Script that I can use for creating input prefixes in a Gmail Add-on?

3. Are there any limitations or considerations I should be aware of when implementing such a feature in a Gmail Add-on?

I would greatly appreciate any insights, code examples, or guidance that the community can provide. Thank you in advance for your help!

Best regards,
shiv