Flutter中如何从文本字符串创建IconData 实现文本转自定义图标功能

以下三种方案均不需要引入任何第三方依赖，可直接将$这类文本转换为符合使用标准的图标：

方案1：CSS行内标签模拟（最简便） #

直接将货币符号放在行内标签中，通过CSS调整样式对齐原生图标规格，可直接替代图标使用：

<!-- 页面中直接插入 -->
<span class="custom-icon currency-dollar">$</span>

.custom-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; /* 适配Material Icons默认尺寸，可自行调整 */
  height: 24px;
  font-size: 20px;
  font-weight: 500;
  color: inherit; /* 继承父级颜色，和普通图标行为一致 */
  user-select: none; /* 禁止选中，模拟图标不可选特性 */
  vertical-align: middle; /* 对齐行内元素/其他图标 */
  font-family: system-ui, sans-serif;
}

方案2：Canvas生成图片格式图标 #

如果需要可传入组件的图片格式图标对象，可通过Canvas绘制文本后导出为Base64或者Image对象：

/**
 * 文本转图标Base64地址
 * @param {string} text 要转成图标的文本
 * @param {number} size 图标尺寸，默认24px
 * @param {string} color 图标颜色，默认黑色
 * @param {string} fontFamily 字体
 * @returns {string} 图标Base64地址
 */
function textToIcon(text, size = 24, color = '#000', fontFamily = 'system-ui') {
  const canvas = document.createElement('canvas');
  canvas.width = size;
  canvas.height = size;
  const ctx = canvas.getContext('2d');

  ctx.fillStyle = color;
  ctx.font = `bold ${size * 0.8}px ${fontFamily}`;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(text, size / 2, size / 2);

  return canvas.toDataURL('image/png');
}

// 调用示例：生成美元图标
const dollarIcon = textToIcon('$', 24, '#212121');

生成的Base64地址可直接作为<img>标签的src属性值，也可以传入支持图片源的图标组件使用。

方案3：SVG矢量图标 #

需要无损缩放的矢量图标时，可直接手写SVG文本图标，行为和原生Material Icons完全一致：

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <text 
    x="12" 
    y="12" 
    font-size="18" 
    font-weight="500" 
    text-anchor="middle" 
    dominant-baseline="middle" 
    fill="currentColor"
  >
    $
  </text>
</svg>

该SVG可直接嵌入页面使用，fill="currentColor"设置会继承父级文字颜色，也可以嵌入CSS的url()中作为背景图标使用。

内容的提问来源于stack exchange，提问作者sumit kumar Pradhan