dashfolders: Add min-width to align icons in permissions list and some margin…

dashfolders: Add min-width to align icons in permissions list and some margin between icon and text #10275

public/app/core/components/Permissions/DisabledPermissionsListItem.tsx

@@ -13,7 +13,7 @@ export default class DisabledPermissionListItem extends Component<IProps, any> {
     return (
     return (
       <tr className="gf-form-disabled">
       <tr className="gf-form-disabled">
         <td style={{ width: '100%' }}>
         <td style={{ width: '100%' }}>
-          <i className={item.icon} />
+          <i className={`fa--permissions-list ${item.icon}`} />
           <span dangerouslySetInnerHTML={{ __html: item.nameHtml }} />
           <span dangerouslySetInnerHTML={{ __html: item.nameHtml }} />
         </td>
         </td>
         <td />
         <td />

public/app/core/components/Permissions/PermissionsListItem.tsx

@@ -20,7 +20,7 @@ export default observer(({ item, removeItem, permissionChanged, itemIndex, folde
   return (
   return (
     <tr className={setClassNameHelper(item.inherited)}>
     <tr className={setClassNameHelper(item.inherited)}>
       <td style={{ width: '100%' }}>
       <td style={{ width: '100%' }}>
-        <i className={item.icon} />
+        <i className={`fa--permissions-list ${item.icon}`} />
         <span dangerouslySetInnerHTML={{ __html: item.nameHtml }} />
         <span dangerouslySetInnerHTML={{ __html: item.nameHtml }} />
       </td>
       </td>
       <td>
       <td>

public/sass/base/_icons.scss

@@ -198,3 +198,8 @@
     background-image: url('../img/icons_dark_theme/icon_question.svg');
     background-image: url('../img/icons_dark_theme/icon_question.svg');
   }
   }
 }
 }
+
+.fa--permissions-list {
+  min-width: 20px;
+  padding-right: 5px;
+}