I'm using my own colors palette to set some special colors in some buttons in a section of my app. So, when I use the default palete and md-primary for example if I set ng-disabled=true the button become not clickable and the color is setted of gray. The problem is when I use myown palette, if I use ng-disabled=true I can't push the button but the color doesn't change and I would like that this happens.
This is an example of use:
<md-button
ng-disabled="true"
ng-click="..."
class="md-icon-button">
<md-icon ng-if="..." md-colors="{'color': 'specialpalette-pastelGreen'}" >
check_circle
</md-icon>
<md-icon ng-if="..." md-colors="{'color': 'specialpalette-pastelRed'}">
cancel
</md-icon>
</md-button>
One solution is to configure in a ng-class like: ng-disabled="classEnabled==false" ng-class="{'diabled-class': !classEnabled}", I'm not sure if there is any way to customize the disabled color.
I copied this sidenav demo from the angular material docs.
https://material.angularjs.org/latest/demo/sidenav
And added the first toolbar demo to it from https://material.angularjs.org/latest/demo/toolbar
What I want is the toolbar to be fixed.
Codepen demo: http://codepen.io/gvorster/pen/BzWvGe
When adding this style the toolbar is fixed.
<md-toolbar class="md-hue-2" style="position:fixed !important">
But the icons on the right are gone.
Resizing the screen until the sidenav is hidden will show the right side icons.
Removing the style shows the right side icons but the toolbar is not fixed:
Is there a way to get a sticky toolbar and have the rigth side icons shown.
You have to use md-sidenav inside the md-content container. Plus try to use md-content instead of div tag. In your example you gave wrong values to layout-align attribute. Please check the appropriate values in the Docs.
Here is the basic structure for your requirement.
<md-content flex>
<md-toolbar>
</md-toolbar>
<md-content layout="column" layout-fill>
<!-- content -->
<md-sidenav>
</md-sidenav>
</md-content>
</md-content>
here is the working pen. http://codepen.io/next1/pen/xOqMjy
You need to add layouts for all containers and move the toolbar out of the md-content that should be scrolled.
<div layout="row" flex>
<md-sidenav></md-sidenav>
<div layout="column" flex>
<md-toolbar></md-toolbar>
<md-content></md-content>
</div>
<md-sidenav></md-sidenav>
</div>
Here's a working demo: http://codepen.io/anon/pen/EyWJKK?editors=1010
I was using angular material. I find it very cool, well designed and user friendly.
I was trying to change or remove the calendar icon on datepicker directive.
<md-datepicker ng-model="myDate" md-placeholder="Enter date" ></md-datepicker>
The default icon is very good but i want to skip the icon in some case. well i can use svg icon using md-icon like this
<md-icon md-svg-src="calendar.svg"></md-icon>
Here is my sample plunker. Suggest me some idea to change/remove the default icon on datepicker.
Angular Material 1.1.0 has a solution, although it seems undocumented.
From angular-material/modules/js/datepicker/datepicker.js:
* #param {String=} md-hide-icons Determines which datepicker icons should be hidden. Note that this may cause the
* datepicker to not align properly with other components. **Use at your own risk.** Possible values are:
* * `"all"` - Hides all icons.
* * `"calendar"` - Only hides the calendar icon.
* * `"triangle"` - Only hides the triangle icon.
Usage:
<md-datepicker ng-model="myModel" md-hide-icons="calendar"></md-datepicker>
The original question was how to "to change or remove the calendar icon on datepicker directive."?
I just know how to remove it.
You can remove the calendar icon by simply putting the following in a CSS file and adding it to your page:
.md-datepicker-button {
display: none !important;
}
.md-datepicker-input-container {
margin-left: 0 !important;
}
Here is a better solution.
create a button with another icon and place it in the same div with datepicker
<div flex=40>
<md-icon md-svg-src="calendar.svg"></md-icon>
<md-datepicker ng-model="myDate" md-placeholder="Enter date" ></md-datepicker>
</div>
set the button postion to cover the orginal datepicker icon
<div flex=40>
<md-icon style="position:absolute;margin-top:15px; left:20px" md-svg-src="calendar.svg"></md-icon>
<md-datepicker ng-model="myDate" md-placeholder="Enter date" ></md-datepicker>
</div>
set the the original datepicker icon to apparent.
.md-datepicker md-icon {color: rgba(0,0,0,0) !important;}
.md-datepicker-open .md-datepicker-calendar-icon {fill:rgba(0,0,0,0)}
.md-datepicker-button.md-icon-button {
display: none;
}
This one works for me.
They do not provide an API option for specifying the icon, and as you can see from datepicker template.
The md-calendar icon is hard-coded inside the template. I suggest creating yourself a directive based from theirs and change it directly.
The solution provided by Ralph is kind of complex which is i have to create a new directive from their directive. I found a simple solution to this problem. The template of this md-calendar is using a button with an icon like this
<md-button class="md-datepicker-button md-icon-button" type="button"
tabindex="-1" aria-hidden="true"
ng-click="ctrl.openCalendarPane($event)">
<md-icon class="md-datepicker-calendar-icon" md-svg-icon="md- calendar">
</md-icon>
</md-button>
So i change the css of class md-datepicker-buttonand hide the button
.calendarDiv .md-datepicker-button{
display: none;
}
and use another custom icon like this
<md-icon md-svg-src="calendar.svg"></md-icon>
The icon isn't functional as default iconbut this would solve my problem .
This is my sample solution plunker.
You can change and hide the icon in the following way:
First give the md-datepicker an id (or class to target more then one):
<md-datepicker id="my-date-picker"></md-datepicker>
Then you can target the icon in css and change the color, size, display etc:
#my-date-picker .md-datepicker-calendar-icon {
color: green;
display: none;
}
md-datepicker now has a configuration attribute for hiding the icons. From the docs:
md-hide-icons String
Determines which datepicker icons should be hidden. Note that this may cause the datepicker to not align properly with other components. Use at your own risk. Possible values are:
"all" - Hides all icons.
"calendar" - Only hides the calendar icon.
"triangle" - Only hides the triangle icon.
Using CSS to override the default triangle icon (I want the calendar icon on the right) using a custom theme with the FontAwesome icon
/* override md material*/
.md-custom-theme .md-datepicker-input-container {
width: 100%;
border: none;
}
.md-custom-theme .md-datepicker-expand-triangle {
border:none;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-transform: none;
transform: none;
top: 6px;
right:0;
}
.md-custom-theme .md-datepicker-expand-triangle:before {
content: "\f073";
}
Just remove date-picker toggle for icon remove(I am using latest files of Angular Material)
<mat-form-field appearance="outline" (click)="from_date.open()">
<mat-label>From Date</mat-label>
<input matInput [matDatepicker]="from_date">
<mat-datepicker-toggle matSuffix [for]="from_date"></mat-datepicker-toggle>
<mat-datepicker #from_date></mat-datepicker>
</mat-form-field>
Remove this line
<mat-datepicker-toggle matSuffix [for]="from_date"></mat-datepicker-toggle>
You can use mat-icon in combination with mat-datepicker-toggle to change the calendar icon of mat-datepicker
<input [matDatepicker]="basicDatepicker">
<mat-datepicker-toggle [for]="basicDatepicker">
<mat-icon matDatepickerToggleIcon>
mouse
</mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #basicDatepicker></mat-datepicker>
instead if mouse you can use your costume icon by:
<mat-icon fontIcon="myCustomIcon"> </mat-icon>
For reference : https://www.angularjswiki.com/material/datepicker/
I know how to remove it.
Just copy and paste the code below in your css
div.layout-align-start-start.layout-row>.md-icon-button.md-button.md-ink-ripple:not(.md-raised){
display: none;}
Is there a way to set different background colors for different tabs in md-tabs ?
The default is no color as can be seen in tabs demo
I tried <md-tabs background-color="green"> but it's not working
AngularJS Material design (md) tabs, md-tabs background color is transparent and uses the background color of your main container. Try to add CSS class for md-tabs .
Added background to entire md-tabs
md-tabs {
background: red;
border: 1px solid #e1e1e1; }
By adding CSS childs to md-tab class, you can see different colors for different tabs.
.md-tab:first-child{background: green; }
.md-tab:nth-child(2){background: pink; }
.md-tab:nth-child(3){background: blue; }
fiddle
https://jsfiddle.net/cxf3otz9/
codepen
http://codepen.io/anon/pen/zGNEyw
Upon evaluating source code, i came to there a way to achieve dynamic content formatting for tab titles. To get that, please write the code as below
<md-tabs>
<md-tab>
<md-tab-label>
<span ng-class="......">
Title
</span>
</md-tab-label>
<md-tab-body>
content
</md-tab-body>
</md-tab>
</md-tabs>
I started to use Angular Material in my project and I was wondering how I can change the svg color inside an am-button.
This is my code:
<md-button class="md-fab md-primary">
<md-icon
class="ng-scope ng-isolate-scope md-default-theme"
style="height: 14px; width: 14px;"
md-svg-src="img/material-icons/core/arrow-forward.svg"
></md-icon>
</md-button>
What do I need to add to change the color of the svg from the curent black to white, just like in Google's button demo? (section "Icon button using Font-icons")
I'm on angular-material 0.8, and I simply added
style="color:white;font:bold;"
to the md-icon element.
For the people trying to color their md-icon, I found out that I had the same problem using Angular 1.3.x and Angular Material 0.8.x.
I fixed the problem by editing my SVG files and deleting the "fill" attribute that was overriding any inherited color.
After deleting this "fill" attribute in each SVG file, I could properly choose the color I wanted to assign to the icon thanks to CSS as specified by Jason Aunkst.
The SVG is under the md-icon, so you could add this to your style:
md-icon {
color: red
}
md-icon svg {
fill: inherit;
}
The following is the only way I've gotten it to work via stylesheets.
md-icon {
svg {
path {
fill: #ffffff;
}
}
}
Am using this in the CSS :
.my-icon svg
{
fill : #fff;
}
And in the HTML :
<ng-md-icon icon="search" class="my-icon"></ng-md-icon>
Works fine!
You should be able to do this by add "fill:white" to the style of the icon.
<md-icon class="ng-scope ng-isolate-scope md-default-theme" style="height: 14px; width: 14px; fill:white" md-svg-src="img/material-icons/core/arrow-forward.svg"></md-icon>
Add this to your css:
svg {
fill: inherit;
}
The svg will now inherit the fill attribute of your md-icon
<md-icon style="fill: red;" md-svg-src='/img/ic_menu_white_24px.svg'></md-icon>
I was having a similar problem when trying to change default svg icon color. For those who are experiencing the similar issue, make sure you check the angular-material version you're currently using. Currently, I'm using the angular-material "0.7.1" and this is quietly important.
NOTE: with my current Angular-material (0.7.1) version, the <mdIcon></mdIcon> directive only checks to see if attr.Icon is defined or not during postLinking compileFunction. With this implementation, in order to reference your svg icon files, you simply add icon attribute to your <mdIcon icon="iconsDir/path_to_icon_file.svg"></mdIcon> element directive. Notice in the earlier angular-material version, you might have use md-src-svg for referencing your svg files, its no longer the case in 0.7.1 version.
So if you were using 0.7.1 and following above instruction, you should have your svg icon rendering correctly, now its time to change the background-color of the svg you're using.
Raw svg file before any modification:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px"
height="24px" viewBox="0 0 24 24">
<g>
<path d="M6,2C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8l-6-6H6z M13,9V3.5L18.5,9H13z" />
</g>
You should have a folder within your project where you save all your svg icons, in my case, I have a folder named icons where I store all my svg icons. The example svg file above is the non-modified svg icon where I got it from https://github.com/google/material-design-icons. (Default its rendering as a black svg file)
To change the default svg file, you would simple add a fill attribute to your raw svg file. See modified svg file version:
<path d="M6,2C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8l-6-6H6z M13,9V3.5L18.5,9H13z" fill="green" />
I simply added fill="green" the path element svg file, and now my svg icon is rendering as color green instead of default black. I know some of you guys might be using a different version of angular-material, but the mechanism of changing default svg color should apply the same. Hopefully this can be helpful to solve your problems, thanks!
The issue seems to be with the downloaded SVGs from Google Design icons as they override the fill attribute in the svg root. Compare the view source of SVGs on Google Design with the ones used in the example.
Solution:: Override fill in css.
md-icon svg {
fill: currentColor;
}
One way to do it is by setting a custom class selector.
HTML:
<md-button class="md-fab mybtnstyle">
<md-icon md-svg-src="img/icons/cake.svg"></md-icon>
</md-button>
CSS:
.md-button.md-fab.mybtnstyle {
background-color: blue;
}
.md-button.md-fab.mybtnstyle:hover {
background-color: red;
}
Codepen here: http://codepen.io/anon/pen/pjxxgx
Easiest way out
Now there's no need to change the svg or the fill property.
Simply add the !important to md-icon's color property in CSS:
md-icon {
color: #FFF !important;
}
I was having a similar problem, I needed to change the SVG color using CSS, but I also needed to keep the original SVG color (e.g. fill="#fff") when no CSS was supplied.
I enhanced Jason Aunkst's approach to make it work. Here's the solution:
md-icon[style*="color:"] svg [fill] {
fill: inherit;
}
That class will set any svg's child element with a fill attribute to inherit the color value as long as the svg is a child of an md-icon element that contains the style attribute with a color value.
It will only work on SVG's that are only using one fill color though. Adjust as needed, hope it helps!