0

The built-in Icons are pretty limited but for all image components you can set an URL using setIconUrl(url) and the like.

Using Google, I saw a few places where they can get Material Icon url from gstatic.com domain like these:

Where are these URLs from? I tried using https://fonts.google.com/icons?icon.platform=web but there is no way to determine that URL. Also is there a built-in Material Icon for App Script that I am not aware of? Thanks.

Luke Vo
  • 17,859
  • 21
  • 105
  • 181
  • 1
    By any chance have you seen this post https://stackoverflow.com/questions/74758251/google-add-on-logourl-sources-from-https-www-gstatic-com-images-icons-material?rq=2? – George May 17 '23 at 07:02

1 Answers1

3

The gstatic links to material icons are pretty flexible (I covered them in my answer to another post) but in terms of color they seem limited to black and white.

You might have another option though. It's possible to convert an image (PNG, JPEG, GIF, and even SVG!) to a data URI and embed it directly in your add-on as an image widget.

I haven't tried it with icon urls but it stands to reason that it should work.

Let's take your shopping bag icon for example; using an online tool (there are a plethora of them) you can generate the following data URI for the image:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAAk1BMVEUAAAAac+oadOcac+gac+gac+gac+cZc+kZc+gbdeoac+Ybcugac+gac+gac+kacukVauoAgP8ac+gac+gacucVdeoac+gac+Ybc+gggN8adOgbduQac+gac+gbcugbcugYcOccdOcac+kac+gbc+kZc+kadOgbdOgac+gadOgcceoZc+gacugac+gbcuggcO8ac+je1FE1AAAAMXRSTlMAPIuvx9/Dq4MwFI/r/+N/DATv52sYsyjTCMsc99t7OCBAn/tzW0+jz2Mkv5ObQxDXkFaHOgAAAUtJREFUeAHt0AWu3FAQRNEaMiQpwzAz8/43FzJIg4Z28PcRP+grNVQmSpXKlWqtZpiWjeLh0+cvjDmuh2L5bp03Gk0UqVXlg7aHwnQcPtFtoSCtBp/qeihEr88X2ihEmS81UYDBkJHReDKdzqwGIw0PcnOGFks/3FmZERdi3pCBxQyxFUMOxNZP911myIbUhoHtzWmvwYAFqT4DO9ywGDAh5TAwxY0ZAwakGMKtKQM15LG3qjVmVDuMW0jHLy+Yy3CJNPwDc9sghSMFlkhkU2LYQpITRcZIUqPIAUkoU8scyHr+PwY0oAEvOO68OZcFzsHx7s25LLD1AeDivDmXBbg9e5d1jQnngkCCvzagAQ1oQAMa0IAGNKABDWhAAxpwkKRBkSqSbChiIcmMEos9EpkUKCOZd2VuBx8peCZzOvpIZ7ZpMLPaycZTSqlvG5bdfEWlwQIAAAAASUVORK5CYII=

If you copy and paste that as is into your search bar you'll see the image. It is a great strategy to use if you can't afford to host your own images. Another thing you can do is convert your images into data URIs and stick them in a GAS library for easy distribution between your projects. It's a pretty versatile approach (assuming it works with icon urls).

TheAddonDepot
  • 8,408
  • 2
  • 20
  • 30