I've tried looking for solutions regarding this issue but nothing to have solve my problem with this. These are the posts I've looked up :
I've not tried the second solution as this is a project in a company and I do not want to upgrade the version on my own without any permission.
Here's my code and imports:
import "antd/dist/antd.css";
import {Button} from 'antd';
import {TwitterOutlined} from '@ant-design/icons'; //import icons
//here is where i use the TwitterOutlined which is the icon
<Button type="link" href={links[3]} target="_blank" icon={<TwitterOutlined />}>Twitter</Button>
But the icon isn't showing up inside the button so I would appreciate if anyone knows what is exactly wrong with my imports or anything.
I've tested your code and it works with the latest antd, so almost definitely the same versioning situation as in that second question you linked. You can try getting around it by using a custom icon.
import Icon from '@ant-design/icons';
const TwitterSVG = () => (
<svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549" />
</svg>
);
// ...
const TwitterIcon = props => <Icon component={TwitterSVG} {...props} />;
// ...
<TwitterIcon style={{ color: '#1DA1F2' }} /> // Twitter's blue