import React from 'react';
import Icon from '../icon/Icon';
import AppLink, { Props as LinkProps } from '../link/AppLink';

interface Props extends LinkProps {
    icon: string;
    info: string;
}
export const SidebarListItemHeaderLinkButton = ({ info, icon, ...rest }: Props) => {
    return (
        <AppLink className="flex navigation-link-header-group-link flex-item-noshrink" type="button" {...rest}>
            <Icon name={icon} className="navigation-icon" />
            <span className="sr-only">{info}</span>
        </AppLink>
    );
};

export default SidebarListItemHeaderLinkButton;

import React from 'react';
import Icon from '../icon/Icon';
import AppLink, { Props as LinkProps } from '../link/AppLink';

interface Props extends LinkProps {
    icon: string;
    info: string;
}
export const SidebarListItemHeaderLinkButton = ({ info, icon, ...rest }: Props) => {
    return (
        <AppLink className="navigation-link-header-group-link flex-item-noshrink" type="button" {...rest}>
            <Icon name={icon} className="navigation-icon" />
            <span className="sr-only">{info}</span>
        </AppLink>
    );
};

export default SidebarListItemHeaderLinkButton;

--- 
+++ 
@@ -8,7 +8,7 @@
 }
 export const SidebarListItemHeaderLinkButton = ({ info, icon, ...rest }: Props) => {
     return (
-        <AppLink className="navigation-link-header-group-link flex-item-noshrink" type="button" {...rest}>
+        <AppLink className="flex navigation-link-header-group-link flex-item-noshrink" type="button" {...rest}>
             <Icon name={icon} className="navigation-icon" />
             <span className="sr-only">{info}</span>
         </AppLink>
Add flex to align items
