英文:
How to use Material Icons in Google App Script's Addon Card widgets (DecoratedText, ImageButton)?
问题
以下是翻译好的部分：
-
内置图标 的选择相当有限，但对于所有图像组件，您可以使用
setIconUrl(url)等方法设置 URL。 -
使用 Google，我看到一些地方可以从 gstatic.com 域获得 Material 图标的 URL，如下所示：
这些 URL 来自哪里？我尝试使用 https://fonts.google.com/icons?icon.platform=web 但无法确定该 URL。此外，是否有内置的用于 App Script 的 Material 图标，我不知道吗？谢谢。
英文:
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:
-
https://www.gstatic.com/images/icons/material/system/2x/shopping_bag_gm_blue_48dp.png
-
https://www.gstatic.com/images/icons/material/system/1x/pets_black_48dp.png (from this question)
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.
答案1
得分: 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.
The gstatic链接到Material图标的链接非常灵活（我在另一篇帖子中详细介绍了它们），但就颜色而言，它们似乎仅限于黑色和白色。
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.
但您可能还有其他选择。可以将图像（PNG、JPEG、GIF，甚至SVG！）转换为数据URI，并将其直接嵌入到您的附加组件中作为图像小部件。
I haven't tried it with icon urls but it stands to reason that it should work.
我尚未尝试使用图标URL，但理论上它应该可以工作。
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:
让我们以您的购物袋图标为例；使用在线工具（有大量工具可用），您可以生成以下图像的数据URI：
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).
如果您将它原样复制并粘贴到搜索栏中，您将看到这张图片。如果您无法承担托管自己的图像，这是一种很好的策略。您还可以将图像转换为数据URI并将其存放在GAS库中，以便在项目之间轻松分发。这是一种相当多用途的方法（假设它适用于图标URL）。"
英文:
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).
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论