Teams自定义应用如何实现选中与未选中状态的差异化图标配置？

Got it, let's tackle this problem! Teams' default app manifest only lets you set a single static icon for the main app entry, but we can work around this using front-end logic paired with Teams' client APIs to achieve that selected/unselected icon behavior you're after. Here are a couple of solid, actionable approaches:

方案1：基于前端UI的动态图标切换（适用于自定义Tab/个人应用） #

If your app is a custom Tab or personal app, you can directly listen for focus/active states in your front-end code and swap out icon resources on the fly:

• Step 1: Prepare two sets of icon assets (e.g., icon-active.png for selected state, icon-inactive.png for unselected) and host them in your app's static resource folder.
• Step 2: Use Teams client APIs and browser focus events to detect when your app is active, then update the icon accordingly.

Vanilla JS Example: #

// Initialize Teams SDK first
microsoftTeams.initialize();

// Grab your app's icon element (adjust the selector to match your UI)
const appIcon = document.getElementById('custom-app-icon');

// Listen for when the app gains/loses focus
window.addEventListener('focus', () => {
  appIcon.src = '/assets/icon-active.png';
});

window.addEventListener('blur', () => {
  appIcon.src = '/assets/icon-inactive.png';
});

// Extra: Confirm if the current Tab is active on load
microsoftTeams.getContext((context) => {
  appIcon.src = context.tabInstance.isCurrentTab 
    ? '/assets/icon-active.png' 
    : '/assets/icon-inactive.png';
});

React Example: #

import { useEffect, useState } from 'react';
import * as microsoftTeams from '@microsoft/teams-js';

const CustomAppIcon = () => {
  const [isAppActive, setIsAppActive] = useState(false);

  useEffect(() => {
    microsoftTeams.initialize();

    // Set up focus/blur listeners
    const handleFocus = () => setIsAppActive(true);
    const handleBlur = () => setIsAppActive(false);
    window.addEventListener('focus', handleFocus);
    window.addEventListener('blur', handleBlur);

    // Check initial Tab active state
    microsoftTeams.getContext((context) => {
      setIsAppActive(context.tabInstance.isCurrentTab);
    });

    // Clean up listeners on unmount
    return () => {
      window.removeEventListener('focus', handleFocus);
      window.removeEventListener('blur', handleBlur);
    };
  }, []);

  return (
    <img
      src={isAppActive ? '/assets/icon-active.png' : '/assets/icon-inactive.png'}
      alt="Custom App Icon"
      id="custom-app-icon"
      style={{ width: '32px', height: '32px' }}
    />
  );
};

export default CustomAppIcon;

方案2：动态图标用于任务模块/消息扩展（适用于机器人/消息扩展场景） #

If your app is a message extension or bot, you can dynamically set icons when launching task modules or interactive surfaces. This works well for temporary user interactions:

// Launch a task module with a dynamic icon based on state
microsoftTeams.tasks.startTask({
  title: "My Custom App",
  height: 500,
  width: 600,
  url: "https://your-app-domain.com/task-module",
  suggestedActions: {
    actions: [
      {
        type: "invoke",
        title: "",
        iconUrl: isAppActive ? "/assets/icon-active.png" : "/assets/icon-inactive.png"
      }
    ]
  }
});

Key Notes #

• Make sure your icons follow Teams' specs: Use 192x192px for main icons, 32x32px for small icons, transparent PNGs work best.
• Teams doesn't support dynamically swapping the main sidebar app icon set in the manifest, but the above approaches let you replicate the selected/unselected visual behavior within your app's UI, which matches the default Teams button experience users expect.

内容的提问来源于stack exchange，提问作者Aastitva Jain