如何通过Outlook Web Add-in（Office.js）在邮箱添加自定义图标？

一、给自定义命令按钮添加绿色对勾图标 #

在Add-in的manifest.xml中配置命令按钮时，直接指定自定义图标资源：

1. 准备3种尺寸的绿色对勾图标（16x16、32x32、80x80），放在Add-in的静态资源目录。
2. 在manifest中添加图标定义和资源映射：

<Icon>
  <bt:Image size="16" resid="GreenCheckIcon_16" />
  <bt:Image size="32" resid="GreenCheckIcon_32" />
  <bt:Image size="80" resid="GreenCheckIcon_80" />
</Icon>
<!-- 放在Resources节点下 -->
<Resources>
  <bt:Images>
    <bt:Image id="GreenCheckIcon_16" DefaultValue="https://localhost:3000/assets/check-green-16.png" />
    <bt:Image id="GreenCheckIcon_32" DefaultValue="https://localhost:3000/assets/check-green-32.png" />
    <bt:Image id="GreenCheckIcon_80" DefaultValue="https://localhost:3000/assets/check-green-80.png" />
  </bt:Images>
</Resources>

• 本地开发用localhost路径，发布后替换为实际部署的资源地址。

二、在邮件项上显示绿色对勾状态图标 #

如果要给邮件标记已完成类的绿色对勾，通过Office.js的自定义属性+动态UI实现：

1. 存储邮件完成状态 #

async function markAsCompleted() {
  const item = Office.context.mailbox.item;
  const customProps = await new Promise((resolve) => {
    item.loadCustomPropertiesAsync((result) => resolve(result.value));
  });
  customProps.set("IsCompleted", "true");
  await new Promise((resolve) => {
    customProps.saveAsync((result) => resolve());
  });
  updateCheckIcon();
}

2. 加载邮件时显示图标 #

async function updateCheckIcon() {
  const item = Office.context.mailbox.item;
  const customProps = await new Promise((resolve) => {
    item.loadCustomPropertiesAsync((result) => resolve(result.value));
  });
  const isCompleted = customProps.get("IsCompleted") === "true";

  // 在阅读视图头部插入图标
  const iconEl = document.createElement("img");
  iconEl.src = "/assets/check-green-16.png";
  iconEl.alt = "已完成";
  iconEl.style.marginRight = "8px";
  
  const headerContainer = document.querySelector(".ms-Icon--Mail");
  if (isCompleted) {
    headerContainer.parentNode.insertBefore(iconEl, headerContainer);
  } else {
    const existingIcon = document.querySelector('img[alt="已完成"]');
    existingIcon?.remove();
  }
}

3. 邮件列表视图显示图标 #

通过Outlook的自定义列+条件格式实现：

• 在manifest中定义扩展属性映射，将自定义属性IsCompleted映射到Outlook的扩展字段。
• 引导用户在Outlook设置中添加自定义列，设置条件格式：当IsCompleted为true时显示绿色对勾图标。

注意事项 #

• 图标尺寸必须符合要求，否则会被拉伸或裁剪。
• 操作自定义属性时要确保在正确的上下文（阅读/撰写视图）中调用API。
• 邮件列表的图标显示依赖Outlook端的设置，需要在Add-in中给出用户引导。

内容的提问来源于stack exchange，提问作者Rajnish Suthar