diff --git a/src/components/map-control-group/save-map-options-control/index.tsx b/src/components/map-control-group/save-map-options-control/index.tsx
index f7724cd..a0d2552 100644
--- a/src/components/map-control-group/save-map-options-control/index.tsx
+++ b/src/components/map-control-group/save-map-options-control/index.tsx
@@ -3,6 +3,7 @@ import { Tooltip, message } from 'antd';
 import classNames from 'classnames';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { IconFont } from '../../../constants';
 import { useGlobal } from '../../../recoil';
 import useStyle from './styles';
 
@@ -35,7 +36,7 @@ const SaveMapOptionsControl: React.FC = () => {
           onClick={onSave}
           type="button"
         >
-          <i className="iconfont icon-ditu l7-iconfont" />
+          <IconFont type="icon-ditu " />
         </button>
       </Tooltip>
     </CustomControl>
diff --git a/src/constants/iconfont.tsx b/src/constants/iconfont.tsx
index 8fd25b4..6f36254 100644
--- a/src/constants/iconfont.tsx
+++ b/src/constants/iconfont.tsx
@@ -6,11 +6,13 @@ interface IconFontProps {
   type: string;
   className?: string;
   style?: CSSProperties;
+  id?: string;
 }
 
 export const IconFont: React.FC<IconFontProps> = (props) => {
   return (
     <span
+      id={props.id}
       role="img"
       style={props.style}
       className={classNames(['anticon', props.className])}